2026年01月21日

GitHub Pages 設定メモ

はじめに

GitHubのPages機能で本サイトを公開するまでの設定をメモします。

前提

Astroでサイトを構築する。

GitHub PagesそのものにはAstroプロジェクトをビルド・デプロイする機能はないので、GitHub Actionsを利用する。

サイト用のリポジトリの作成

GitHubでサイト用のリポジトリを作成する¹。

GitHubサイトの「New Repository」²からリポジトリを新規作成する。

作成時は以下の点に注意する。

リポジトリ名（Repository name）
- リポジトリ名（Repository name）は3種類のどれか。
  - ユーザー用: <user>.github.io
  - 組織用: <organization>.github.io
  - 各プロジェクト用: 任意
可視性（Visibility）: （Freeプランならば）Public
READMEの追加（Add READNE）: ON

Astroプロジェクトの作成

上記で作成したリポジトリをローカルにクローンする。

git clone https://github.com/<owner>/<owner>.github.io.git

Astroプロジェクトを新規作成する。

npm create astro@latest .

GitHub Actionsのワークフローファイル.github/workflows/deploy.ymlを追加する。

mkdir .github/workflows
touch .github/workflows/deploy.yml

ファイル内はAstroプロジェクトのビルドおよびGitHub Pagesへのデプロイ用の設定を記載する。設定の詳細はこちら³を参照する。

## .github/workflows/deploy.yml
## DEFAULT_RUNNERはGitHubのリポジトリ設定から指定している。
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: true

jobs:
  build:
    runs-on: ${{ vars.DEFAULT_RUNNER }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: npm
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    needs: build
    runs-on: ${{ vars.DEFAULT_RUNNER }}
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Astroの設定ファイルにデプロイ先のURL（site⁴）を指定する。Pagesを各プロジェクト用に作成するといったことからURLのパスをルート（/）からカスタムするときは、基準パス（base⁵）も指定する。

設定ファイルの記載方法はこちら³。

// astro.config.mjs
import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://<owner>.github.io',
})

カスタムドメイン設定

GitHubのドキュメントでは、Apexドメインとサブドメインの設定方法が記載されている。

ここでは、サブドメイン（www）の設定方法を記載する。

DNSプロバイダー

DNSプロバイダーはさくらインターネット株式会社（サービス名: さくらのドメイン）を例とする。

自身が持つドメインのゾーン情報に以下を追加する。

エントリー名	タイプ	データ	TTL
www	CNAME	<owner>.github.io.	3600秒

※ データのURLの末尾には「.」を入れる。忘れると「.github.io.<自身のドメイン>のように認識されてしまう。

時間をおいてから、以下のコマンドで設定がDNSに反映されているか確認する。コマンドの実行結果で「185.199.109.153」といったGitHub PagesのIPアドレス⁶が表示されていることを確認する。

dig www.<自身のドメイン> +nostats +nocomments +nocmd
# ;www.soloshmz.com.              IN      A
# www.soloshmz.com.       3600    IN      CNAME   <owner>.github.io.
# shi-tak.github.io.      3600    IN      A       185.199.109.153 
# shi-tak.github.io.      3600    IN      A       185.199.110.153
# shi-tak.github.io.      3600    IN      A       185.199.111.153
# shi-tak.github.io.      3600    IN      A       185.199.108.153

GitHubリポジトリ設定

Settings > Pagesから以下のように設定する。

Source: GitHub Actions
Custom Domain: www.<自身のドメイン>
Enforce HTTPS: オン