Skip to content

k-ito-cat/astro-markdown-blog

Repository files navigation

概要

Astro Content Collections を使用した Markdown 形式のブログ

管理画面(Sveltia CMS)もしくは直接markdownファイルを作成して記事の作成が可能

リポジトリの構成

  • src/content/posts - ブログ記事の Markdown ファイルが格納されています(サブモジュールとして管理)
  • src/components - Astro コンポーネント(記事表示、カード、カテゴリなど)
  • src/constants - カテゴリや公開ステータスなどの定数管理
  • src/layouts - ページのレイアウト

主要設定ファイル

用意している npm script

  • 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にコピーしている
    • 基本的に開発サーバー起動時とビルド時に実行されるようにしているので意識して実行はしなくて良い

記事の管理方法

1. エディタで直接編集

  1. npm run new:post を実行してテンプレートを生成
  2. 生成されたファイルを編集
  3. 変更を commit して push

2. 管理画面(Sveltia CMS)から編集

  1. /admin にアクセス
  2. GitHub OAuth 認証
  3. 管理画面から記事を作成・編集
  4. 「Publish」ボタンで変更を適用

サブモジュール管理

このリポジトリは記事を別リポジトリ(private)としてサブモジュール管理している

  • サブモジュールとしているリポジトリに変更があると GitHub Actions で自動的に親リポジトリにイベントが通知される
  • 親リポジトリ側でイベントを検知して、自動的にポインタを更新・コミット
    • mainブランチが更新されるのでnetlifyのdeployが走る

画像管理

  • SveltiaCMSでuploadした画像は src/content/posts/images に配置される(配置場所は/admin/config.yml参照)
  • ビルド前に src/content/posts/images の内容が public/images にコピーされるようにコマンドを実行してあるので、publicへの配置は意識しなくていい

メンテナンス

カテゴリを追加したいとき

フロントマターを変更するとき

場合によっては定数の追加

remark

マークダウンで以下の形で書くことでコールアウトを生成する

> [!WARNING]
> これは警告メッセージです

Warning

これは警告メッセージです

> [!NOTE]
> これは情報メッセージです

Note

これは情報メッセージです

> [!CAUTION]
> これは危険メッセージです

Caution

これは危険メッセージです

> [!TIP]
> これは便利なヒントです

Tip

これは便利なヒントです

> [!IMPORTANT]
> これは重要な情報です

Important

これは重要な情報です

About

AstroとSveltiaCMSで作るブログサイト

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •