概要Permalink

元来、GithubPagesを使えば無料で誰でもWebページを公開できる。しかし、無料でGithubPagesを外部に公開する場合はusername.github.ioというリポジトリをPublicリポジトリとして公開しなければならず、下書き等をGithubリポジトリにプッシュすると世界中に公開されてしまう。それを防ぐため、本記事ではPrivateリポジトリとGithubActions、そしてJekyllを使用することで、リポジトリの内容を非公開の状態でWebページを公開できるようにする。

手順Permalink

1. mm-github-pages-starter をクローン
2. クローンしたリポジトリをプライベートリポジトリに変更
3. .github/workflows/jekyll.yml を編集

    name: Build Jekyll site
    on:
    push:
      branches: ["master"]
    permissions:
      contents: read
      pages: write
      id-token: write
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - # https://github.com/actions/checkout
            name: Checkout
            uses: actions/checkout@v4
          - name: Setup Ruby
            uses: ruby/setup-ruby@v1
            with:
              ruby-version: '3.3' # Not needed with a .ruby-version, .tool-versions or mise.toml
              bundler-cache: true # runs 'bundle install' and caches installed gems automatically
          - name: Set up Jekyll
            run: gem install bundler && bundle install
          - name: Build site
            run: bundle exec jekyll build --baseurl ''
            env:
              JEKYLL_ENV: production
          - name: Upload artifact
            uses: actions/upload-artifact@v4
            with:
              name: compiled-site
              path: ./_site
      publish:
        needs: build
        runs-on: ubuntu-latest
        steps:
          - # https://github.com/actions/download-artifact
            name: Download a single artifact
            uses: actions/download-artifact@v4
            with:
              name: compiled-site
              path: ./_site
          - # https://github.com/cloudflare/wrangler-action
            name: Publish to Cloudflare Pages
            uses: cloudflare/wrangler-action@v3
            with:
              apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
              accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
              command: pages deploy ./_site --project-name=${{ secrets.CLOUDFLARE_PAGES_PROJECT_NAME }}
   

4. CloudFlareで適当にPagesプロジェクトを作成、アカウントID,APIキー,プロジェクト名をGithub Actions Secretに登録
5. _config.ymlの以下の点を修正

    url: https://<fqdn>
    baseurl: /
    repository: <github username>/<github repository name>
   

6. 自動でCloudFlareにページがプッシュされるので、それを確認。