GitHub Pages で 静的サイトを爆速公開 するなら、この 2 ルートを押さえれば OK！
どちらも GitHub 公式サポートなので、安心してガンガン使える 💪🎉
1. ブランチ方式 🚢
| 手順 | ポイント |
|---|---|
gh-pages などの公開用ブランチを作成 |
ビルド済みファイルをコミットして配置する |
git push でブランチを更新 |
GitHub Pages がブランチ内容をそのまま配信 |
📝 公式ドキュメント: Configuring a publishing source — 公開ブランチの設定方法。
2. アーティファクト方式（GitHub Actions）🚀
| 手順 | アクション / 役割 |
|---|---|
| 1️⃣ ビルド |
npm run build などで静的ファイルを生成 |
| 2️⃣ アップロード |
actions/upload-pages-artifact で生成物をアーティファクト化 |
| 3️⃣ デプロイ |
actions/deploy-pages でアーティファクトを GitHub Pages に公開 |
🔗 参考:
- Using custom workflows with GitHub Pages — Actions ワークフロー解説
- GitHub Changelog 2022‑07‑27: Custom GitHub Actions Workflows (beta) — Actions から直接 Pages にデプロイ可能になった告知
📜 サンプルワークフロー YAML（コピペで即デプロイ！）
name: Deploy to GitHub Pages
on:
push:
branches: ["main"]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Build static site
run: |
npm ci
npm run build
- name: Upload Pages artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./dist
deploy:
needs: build
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
upload-pages-artifactでファイルをギュッと固め、deploy-pagesでズドンと公開！ 🚀
まとめ 🔮
| 方式 | オススメ場面 |
|---|---|
| ブランチ方式 | ビルドが必要ないページを公開する場合 |
| アーティファクト方式 | MkDocs等ビルドが必要なページを公開する場合 |