2026/10/27 テクノロジー

ブーログ

これまでの道のり、本当に充実したJamstackサイト構築のプロセスでしたね！

microCMSの管理画面に**そのままコピー＆ペーストしてブログ記事として投稿できる形式（Markdown形式）**で、これまでの全手順・つまずきポイントと解決策を記事としてまとめました。

ご自身のブログ第1号記事の記録として、ぜひお役立てください！

---

## 📝 ブログ記事の原稿（タイトル案＆本文）

### タイトル案

【Astro × microCMS】JamstackサイトをGitHub Pagesで自動デプロイ＆Webhook連携するまでの全記録

---

### 本文

#### はじめに

今回は、高速な静的サイトジェネレーター「Astro」と、国産ヘッドレスCMS「microCMS」を組み合わせた Jamstack 構成のWebサイトを構築しました。

ローカル開発から始まり、GitHub Pages への自動デプロイ、そして microCMS で記事を投稿した瞬間にサイトが自動更新される「Webhook連携」までを一気通貫で完成させました。その全手順と、途中でつまずいたポイントの解決策を記録としてまとめます。

---

#### 1. サイトの構成とローカル開発

- フレームワーク: Astro（高速な静的HTMLを生成するツール）

- コンテンツ管理: microCMS（お知らせ・ブログ・バナーのAPI管理）

- ホスティング環境: GitHub Pages（無料の静的Webホスティング）

- 自動化: GitHub Actions（ビルド・デプロイ・Webhook連動）

元々あった「お知らせ」機能に加え、新たに「ブログ」用APIを定義し、トップページ（一覧表示）と詳細ページを追加実装しました。

---

#### 2. GitHub Pages への自動デプロイ設定

GitHubにコードを保存（プッシュ）するだけで、自動的にビルドが行われてサイトが公開されるパイプラインを構築しました。

1. `astro.config.mjs` のパス設定

GitHub Pages のサブディレクトリ公開に合わせて、`site` と base を設定。

2. GitHub Actions ワークフロー（`deploy.yml`）の作成

Node.jsのセットアップから npm run build、成果物のアップロードまでを自動化。

3. GitHub Secrets の設定

microCMSのAPIキー（`MICROCMS_API_KEY`）やドメイン情報を、コードに直接書かずにGitHubの安全な秘密金庫（Secrets）に登録。

---

#### 3. 【トラブルシューティング】Gitプッシュ時の「アクセス許可がありません」問題

設定完了後、GitHubへプッシュしようとした際に以下のエラーで進行がストップしました。

> エラー:「GitHub で "syooji/jamstack" にプッシュするためのアクセス許可がありません。代わりに、フォークを作成してそれにプッシュしますか?」

##### 原因

VS Code上では正しいアカウント（`syooji`）でサインインしていたものの、**Mac本体のパスワード保存機能（キーチェーンアクセス）に過去の別アカウント（`syooji-me`）が記憶されており、Gitが勝手にその古い情報を使って通信していた**ためでした。

##### 解決策

1. Macの「キーチェーンアクセス」アプリを開く

2. 検索バーで github.com を検索

3. アカウント名が syooji-me になっているインターネットパスワードを削除

4. エディタから再度プッシュを行うと、ブラウザで正しいアカウント（`syooji`）の再ログイン画面が開き、無事に解決！

---

#### 4. microCMSとGitHub ActionsのWebhook自動連携

最後に、**「microCMSで記事を書いて公開ボタンを押すだけ」でGitHub Pagesが自動更新される仕組み**を構築しました。

1. `deploy.yml` にトリガーを追加

外部からの呼び出しを受け取る repository_dispatch: を設定。

2. GitHubで Personal Access Token を発行

microCMSがGitHubに「更新して！」と合図を送るための共通の合鍵（トークン）を発行（スコープ: repo）。

3. microCMSのWebhook設定

「GitHub Actions」連携を選び、トークンとリポジトリ名、トリガーイベント名（`microcms`）を登録。

これで、「お知らせ」も「ブログ」も、管理画面で記事を更新するだけで裏側でGitHub Actionsが走り、1〜2分で本番サイトへ反映される完全自動化システムが完成しました！

---

#### まとめ

静的サイトの高速性・セキュリティの高さと、microCMSの更新の手軽さを両立した、本格的なJamstack環境を整えることができました。

同じ構成でWebサイトを運用したい方の参考になれば幸いです。

---

この内容を microCMS のブログ投稿画面（コンテンツ本文）に貼り付けて公開していただければ、Webhook連携によって**自動的に本番サイトにこの記事が反映**されます！ぜひ試してみてください。