AIcicle Records

「毎回アップロードするのが面倒」「無料でモダンなブログを作りたい」——
そんなあなたにおすすめなのが Astro × GitHub Pages × GitHub Actions！

この記事では、本ブログでも採用しているGitHub Pagesへ自動公開する手順を解説します。

✅ 準備するもの

GitHubアカウント（未作成なら公式サイトへ）
Node.js（Astroに必要）
Astroプロジェクト（まだなら以下で作成）

1
npm create astro@latest

🛠 ステップ1：Astroの設定（astro.config.mjs）

🔹 ユーザーページ（https://<ユーザー名>.github.io）の場合

1
import { defineConfig } from 'astro/config';
2

3
export default defineConfig({
4
  site: 'https://<ユーザー名>.github.io',
5
});

📁 ステップ2：GitHubリポジトリを作成

GitHubで新しいリポジトリを作成(github pagesに利用する場合、“ユーザー名.github.io” としてください)
Astroプロジェクトをプッシュ

1
git init
2
git add .
3
git commit -m "Initial commit"
4
git remote add origin https://github.com/<ユーザー名>/<リポジトリ名>.git
5
git branch -M main
6
git push -u origin main

⚙️ ステップ3：GitHub Actionsの設定

.github/workflows/deploy.yml を作成し、以下を記述：

1
name: Deploy Astro site to Pages
2

3
on:
4
  push:
5
    branches: [ "main" ]
6
  workflow_dispatch:
7

8
permissions:
9
  contents: read
10
  pages: write
11
  id-token: write
12

13
concurrency:
14
  group: "pages"
15
  cancel-in-progress: false
38 collapsed lines
16

17
jobs:
18
  build:
19
    runs-on: ubuntu-latest
20
    steps:
21
      - name: Checkout
22
        uses: actions/checkout@v4
23

24
      - name: Setup Node.js
25
        uses: actions/setup-node@v4
26
        with:
27
          node-version: "20"
28
          cache: 'npm'
29

30
      - name: Install dependencies
31
        run: npm install
32

33
      - name: Build
34
        run: npm run build
35

36
      - name: Setup Pages
37
        uses: actions/configure-pages@v5
38

39
      - name: Upload artifact
40
        uses: actions/upload-pages-artifact@v3
41
        with:
42
          path: ./dist
43

44
  deploy:
45
    needs: build
46
    runs-on: ubuntu-latest
47
    environment:
48
      name: github-pages
49
      url: ${{ steps.deployment.outputs.page_url }}
50
    steps:
51
      - name: Deploy to GitHub Pages
52
        id: deployment
53
        uses: actions/deploy-pages@v4

🌐 ステップ4：GitHub Pagesの設定

GitHubリポジトリの Settings > Pages に移動
「Build and deployment」→ Source: GitHub Actions に設定

✅ デプロイしてみよう！

変更後、以下のようにプッシュすれば自動でデプロイされます：

1
git add .
2
git commit -m "Add blog post"
3
git push

Actionsタブでワークフローが実行され、数分後に公開されます。
アクセスURL: https://<ユーザー名>.github.io/<リポジトリ名>

🎉 まとめ

これで、記事を書いてプッシュするだけでブログが更新される環境が完成です！

Astro + GitHubでブログを自動更新！