👌

今更ながらCDを学んでみた：GitHub Pages に自動デプロイ

に公開
GitHub Pages
CD
tech

1. はじめに

CI を試した流れで、次は CD（Continuous Deployment） を体験してみました。
サーバーを用意しなくても学習できるように、GitHub Pages をデプロイ先に選びます。

2. 何を作るか

  • main ブランチに push すると、自動でサイトを公開
  • 成果物は public/index.html
  • 公開は GitHub Pages（gh-pages ブランチ経由）

3. プロジェクト構成

リポジトリ直下に public/ を作り、そこに公開したいファイルを置きます。

ci-tutorial-php/
  ├─ src/
  ├─ tests/
  ├─ public/
  │    └─ index.html
  └─ .github/
       └─ workflows/
            └─ deploy.yml

最小の public/index.html はこんな感じでOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CI/CD Demo</title>
</head>
<body>
  <h1>Hello GitHub Pages!</h1>
  <p>これは GitHub Actions でデプロイされたページです。</p>
</body>
</html>

4. GitHub Actions の設定

.github/workflows/deploy.yml を作成。

name: Deploy Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v4
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

ポイント：

  • checkout でソースを取ってくる
  • publish_dir: ./public にあるファイルを gh-pages ブランチに push
  • permissions: contents: write を付けないと権限エラーになるので注意

5. GitHub Pages の設定

  1. リポジトリ → Settings → Pages
  2. Build and deployment → Source を Deploy from a branch に変更
  3. Branch: gh-pages、Folder: / (root) を選択して Save

これで gh-pages ブランチの中身が公開対象になります。

6. 公開URL

リポジトリが username/repo 形式なら URL は：

https://username.github.io/repo/

今回の例では：

https://yt-catpaw.github.io/ci-tutorial-php/

アクセスすると public/index.html の内容が表示されます。

7. まとめ

  • GitHub Actions + GitHub Pages で、push → 自動公開の流れを作れる
  • 成果物を public/ に置き、peaceiris/actions-gh-pages が gh-pages ブランチに push する
  • Pages の設定を「gh-pages / root」にするのを忘れない

Discussion