Astroブログのテーマと記事を別リポジトリで管理する

Astroブログのテーマ関連ファイルと記事ファイルを別のリポジトリに分けて管理するようにしました。基本的に変動しないテーマ関連ファイルと頻繁に追加・更新されるファイルが同じリポジトリで管理されていることに違和感があったからです。

リポジトリを分ける

テーマ関連ファイルと記事ファイルのリポジトリを分けます。本ブログはAstroPaperをベースに作っているため、記事を格納するディテクトリは./src/content/blogです。このディレクトリを別リポジトリに移します。更に、記事リポジトリ側からGitHub Actionsでデプロイを行うため、./.github/workflows/deploy.yaml（後述）も作成します。結果として記事リポジトリは以下の構造になりました。

PROJECT_DIR
\_ .git
\_ .github
|  \_ workflows
|     \_ deploy.yaml
\_ blog
   \_ hogehoge.md
   \_ fugafuga.md
   \_ ...

GitHub Actionsの設定

./.github/workflows/deploy.yamlに設定を記述します。stepsに記述する処理は以下の流れになります。

外部リポジトリであるテーマリポジトリをワークディレクトリのルートにチェックアウト
本リポジトリである記事リポジトリの適当なディレクトリ（今回は./articlesとした）にチェックアウト
記事リポジトリのblogディレクトリを、本来あるべき./src/content/blog配下にコピー
Astroサイトをビルド
Cloudflare Pagesにアップロード

具体的な記述内容は以下のとおりです。

name: Build and Deploy to Cloudflare Pages

on:
  push:
    branches: [ main ]
  workflow_dispatch:

jobs:
  publish:
    name: Publish to Cloudflare Pages

    runs-on: ubuntu-latest

    permissions:
      contents: read
      deployments: write

    steps:
      - name: Checkout theme repository at the root
        uses: actions/checkout@v3
        with:
          repository: ${{ vars.ASTRO_THEME_REPOSITORY }}
          path: .

      - name: Checkout this repository into a subdirectory
        uses: actions/checkout@v3
        with:
          path: articles

      - name: Copy articles
        run: cp -r ./articles/blog ./src/content/

      - name: Build astro site
        uses: withastro/action@v0

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: ${{ vars.CLOUDFLARE_PROJECT_NAME }}
          directory: ./dist

各変数は以下のとおりです。

ASTRO_THEME_REPOSITORY: GitHub上のテーマリポジトリ（<username>/<repository_name>の形式で指定）
CLOUDFLARE_API_TOKEN: CloudflareのAPIトークン
CLOUDFLARE_ACCOUNT_ID: CloudflareアカウントのID
CLOUDFLARE_PROJECT_NAME: Cloudflare Pagesのプロジェクト名

GitHub Actionsの変数はリポジトリのSettings > Secrets and variables > Actionsから設定できます。なお、変数はSecretsとValiablesのいずれかに設定できますが、CLOUDFLARE_API_TOKENとCLOUDFLARE_ACCOUNT_IDは機密情報のため、Secretsに設定することをおすすめします。

CloudflareのAPIトークンは、ダッシュボード右上のマイプロフィール > APIトークン > トークンを作成するで作成できます。今回はカスタムトークンを作成します。トークン名にお好みの名前を指定し、アクセス許可をアカウント Cloudflare Pages 編集に設定します。他の項目は変更しなくて大丈夫です。作成されたAPIトークンは再表示できないため、きちんと保存しておきます。

CloudflareアカウントのIDは、Cloudflareのダッシュボードにアクセスした際のURLから確認できます。URLは以下の形式になっていますので、当該URLからアカウントIDの部分をコピーすればOKです。

https://dash.cloudflare.com/<account_id>

デプロイ

以降は、記事リポジトリのmainブランチにpushすれば自動的に新しい記事の反映されたサイトがデプロイされます。なお、テーマ自体を編集した場合は自動でプロイされないため、手動でワークフローを実行する必要があります。記事リポジトリのActionsタブから、Run workflowで手動でワークフローを実行しましょう。

難点

この管理方法に変えると、テーマリポジトリ側に記事が存在しないためnpm run devによるローカルでの検証ができなくなります。シンボリックリンクで簡単に解決できるかというとそうも行かないようで、コンテンツのビルドに失敗するようになってしまいます。

この問題は、Linux系OSであれば（試していませんが）恐らくbindマウントで解決できます。しかし私のPCはMacbook(BSD系Unix)のためbindマウントが使えません。仕方がないので力技ではありますが、Astroの検証環境の起動はDockerコンテナで行うことにしました。この件についてはAstroの検証をDockerコンテナで行うの記事を書いています。