01
基本ワークフロー(静的サイト)
推奨
リポジトリのルートに .github/workflows/pages.yml を作成します。ビルド不要な静的ファイルそのままをデプロイする場合に最適です。
name: Deploy to GitHub Pages
on:
push:
branches: ["main"]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
02
Node.js ビルド & デプロイ
Vite / Next.js / Astro 対応
ビルドステップが必要なプロジェクト向け。npm run build で生成された ./dist や ./build などをデプロイします。
name: Build and Deploy
on:
push:
branches: ["main"]
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: './dist' # Next.jsなら './out' などに変更
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
03
Jekyll
公式アクション
name: Deploy Jekyll site to Pages
on:
push:
branches: ["main"]
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Build Jekyll
uses: actions/jekyll-build-pages@v1
with:
source: ./
destination: ./_site
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
04
Hugo
Extended版対応
name: Deploy Hugo
on:
push:
branches: ["main"]
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
submodules: true # Hugoテーマ用
- uses: actions/setup-go@v5
with:
go-version: '1.22'
- name: Setup Hugo
uses: peaceiris/actions-hugo@v3
with:
hugo-version: 'latest'
extended: true
- run: hugo --minify
- uses: actions/upload-pages-artifact@v3
with:
path: './public'
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- uses: actions/deploy-pages@v4
id: deployment
05
トリガー設定のバリエーション
タグ push 時のみ
on:
push:
tags:
- 'v*'
複数ブランチ
on:
push:
branches:
- main
- develop
06
リポジトリ設定チェックリスト
- Settings > Pages > Source を GitHub Actions に変更
permissionsにpages: writeとid-token: writeを記述upload-pages-artifactのpathがビルド成果物のディレクトリを指しているか確認- カスタムドメインを使う場合は
CNAMEファイルをデプロイ対象ディレクトリに含める
07
Tips
CNAME
カスタムドメイン
ビルド後に CNAME ファイルを生成してからアップロードします。
- run: npm run build
- run: echo 'www.example.com' > ./dist/CNAME
- uses: actions/upload-pages-artifact@v3
with:
path: './dist'
キャッシュ
依存関係のキャッシュ
actions/setup-node の cache: 'npm' や actions/cache を使うとビルドが高速化します。Hugoでも ~/.cache/hugo のキャッシュが有効です。