Astro Content Collections を使用した Markdown 形式のブログ
管理画面(Sveltia CMS)もしくは直接markdownファイルを作成して記事の作成が可能
- src/content/posts - ブログ記事の Markdown ファイルが格納されています(サブモジュールとして管理)
- src/components - Astro コンポーネント(記事表示、カード、カテゴリなど)
- src/constants - カテゴリや公開ステータスなどの定数管理
- src/layouts - ページのレイアウト
- astro.config.mjs - Astro の設定ファイル
- public/admin/config.yml - Sveltia CMS の設定ファイル(リポジトリ連携、コンテンツモデル定義)
- netlify.toml - Netlify ビルド設定など
- .gitmodules - Git サブモジュール設定
- src/content/config.ts - Astro Content Collections のスキーマ定義
- .github/workflows/update-submodule.yml - サブモジュール自動更新のワークフロー
npm run new:post
- 新規ブログ投稿のテンプレートを作成(hygen)npm run update
- git pull とサブモジュール更新を実行- 管理画面でcommitが進むことがほとんどなので、このプロジェクトで何らかの修正を加える前に最新化する目的
- 将来的にpre-pushで実行するなど自動化を考える
npm run copy-images
- 画像を public ディレクトリにコピー ビルド時に行っているsrc/content/posts
をサブモジュール化している兼ね合いで、記事のサムネイルや記事内の画像も同じリポジトリでgit管理したいが、publicにおかないと画像を表示できないのでbuild前にsrc/content/posts/images
の内容をpublic/images
にコピーしている- 基本的に開発サーバー起動時とビルド時に実行されるようにしているので意識して実行はしなくて良い
npm run new:post
を実行してテンプレートを生成- 生成されたファイルを編集
- 変更を commit して push
/admin
にアクセス- GitHub OAuth 認証
- 管理画面から記事を作成・編集
- 「Publish」ボタンで変更を適用
このリポジトリは記事を別リポジトリ(private)としてサブモジュール管理している
- サブモジュールとしているリポジトリに変更があると GitHub Actions で自動的に親リポジトリにイベントが通知される
- 親リポジトリ側でイベントを検知して、自動的にポインタを更新・コミット
- mainブランチが更新されるのでnetlifyのdeployが走る
- SveltiaCMSでuploadした画像は src/content/posts/images に配置される(配置場所は/admin/config.yml参照)
- ビルド前に src/content/posts/images の内容が public/images にコピーされるようにコマンドを実行してあるので、publicへの配置は意識しなくていい
-
src/constants/categories.ts - フロントマターでのバリデーションで使われる(主にエディタ編集時に活用)
-
public/admin/config.yml - 管理画面でカテゴリ選択時のサジェスト
- public/admin/config.yml - 管理画面カスタマイズ
- src/content/config.ts - スキーマ
- _templates/generator/new/index.ejs.t - hygenによって生成するmdファイルのテンプレート(主にフロントマター部分)
場合によっては定数の追加
マークダウンで以下の形で書くことでコールアウトを生成する
> [!WARNING]
> これは警告メッセージです
Warning
これは警告メッセージです
> [!NOTE]
> これは情報メッセージです
Note
これは情報メッセージです
> [!CAUTION]
> これは危険メッセージです
Caution
これは危険メッセージです
> [!TIP]
> これは便利なヒントです
Tip
これは便利なヒントです
> [!IMPORTANT]
> これは重要な情報です
Important
これは重要な情報です