Astroでブログを構築する実践ガイド：コンテンツ管理を分離した構成

はじめに

技術ブログを立ち上げる際、「記事の執筆に集中したい」という思いと「サイトのカスタマイズもしたい」という2つのニーズがありました。そこで選んだのがAstro + Git Submodulesの構成です。

この記事では、実際に私が構築した手順を共有します。コンテンツとサイトのコードを別リポジトリで管理することで、記事の執筆とサイトの改修を並行して進められるようになります。

テーマ選定：AstroWindを選んだ理由

Astroでブログを構築する際、AstroWindを選択しました。

選定理由：

TailwindCSSベースでカスタマイズしやすい
SEO対応が標準で組み込まれている
レスポンシブデザインが最初から完成している
ドキュメントが充実している

リポジトリのセットアップ

Upstreamを残した状態でFork

GitHubの「Fork」ボタンだけでも可能ですが、本家の更新を取り込みやすくするため、upstreamリモートを設定します。

まず、GitHubで自分用のリポジトリを作成します。ここでは「my-site」という名前にします。

ターミナルで以下を実行します：

# 1. 本家リポジトリをクローン
git clone https://github.com/arthelokyo/astrowind.git my-site
cd my-site

# 2. 本家をupstreamとして設定
git remote rename origin upstream

# 3. 自分のリポジトリをoriginとして追加
git remote add origin git@github.com:あなたのユーザー名/my-site.git
git push -u origin main

この構成により、git pull upstream mainで本家の更新を取り込みつつ、自分の変更はoriginにプッシュできます。

開発環境のセットアップ

依存パッケージをインストールし、開発サーバーを起動します：

npm install

# セキュリティ警告が表示された場合
npm audit fix

# 開発サーバー起動
npm run dev

ブラウザで http://localhost:4321 にアクセスできれば成功です。

コンテンツ管理の分離設計

src/content/config.ts を編集し、コンテンツの読み込み先を変更します：

const postCollection = defineCollection({
  loader: glob({ pattern: ['**/*.md', '**/*.mdx'], base: 'data/content' }),
});

この変更により、コンテンツを src ディレクトリの外で管理できるようになります。

2. コンテンツの移動

既存のコンテンツを新しい配置先に移動します：

mkdir -p data/content
mv src/data/post/* data/content/posts/

post を posts に変更しているのは、複数形の方が一般的だからです。

3. 動作確認

開発サーバーを再起動し、Blog一覧から記事にアクセスできることを確認します。URLが /post/... の形式になっていれば成功です。

Git Submoduleでコンテンツを分離

コンテンツ用リポジトリの作成

GitHubで新しいリポジトリ「docs」を作成します。これが記事の執筆専用リポジトリになります。

Submoduleとして追加

プロジェクトのルートディレクトリで以下を実行：

# dataディレクトリをSubmodule化
git submodule add git@github.com:あなたのユーザー名/docs.git data

この構成により、以下のメリットが得られます：

記事の執筆: data ディレクトリで作業し、docs リポジトリにプッシュ
サイトの改修: ルートディレクトリで作業し、my-site リポジトリにプッシュ
並行作業: 2つの作業を互いに影響せずに進められる

まとめ

この記事では、AstroWindを使ったブログ構築と、Git Submodulesによるコンテンツ分離の手順を解説しました。

実装のポイント：

Upstreamを残すことで本家の更新を取り込みやすくした
Content Loaderの変更でコンテンツの配置を柔軟にした
Submodule化で記事執筆とサイト開発を完全に分離した

この構成により、FinDocGenプロジェクトの技術ブログ基盤が整いました。今後はこの環境で記事の執筆を進めていきます。

git submodule add git@github.com:あなたのユーザー名/docs.git data

git submodule add git@github.com:crz33/docs.git data