📄

静的WebページをGitHubでホスティングするまでの手順

2024/03/25に公開

GitHub Actions

日々更新が目まぐるしいGitHubさんですが、最近ではホスティングが簡単にでき、カスタムドメインも設定できます。
エンジニア的にはレンタルサーバー借りるよりもラクかも。簡単な静的ページはサクッと作れます。
またカスタムドメイン, HTTPSにも対応できます。

というわけでGitHubを使った静的ページのホスティングを解説します。
前提として、ドメインは購入済み、WebサイトのコーディングデータがGitHubリポジトリにある状態からスタートしますのでご留意ください。

今回使ったもの

GitHub Actions, GitHub Pages
Vite
Google Domains

実際、今回これで自社のWebサイトをホスティングしました。
https://bug-fix.org/

なお、GitHub Pagesでのホスティングはエンタープライズプラン（有料）へのアップグレードか、またはリポジトリがPublicであることが条件になります。状況に合わせてどちらかを選択ください。

1.GitHubでドメインを設定する 1/2

購入済みのドメインをGitHubに設定します。
アカウントの設定ページ（ https://github.com/settings/pages ）に移動し、「Add a domain」ボタンをクリック。

「What domain would you like to add?」の入力欄に購入したドメインを入力します。

すると「Add a verified domain」というページに遷移します。
1,2にあるTXTレコードの情報をコピーしてメモし、このページは開いて残したままドメインサービス側の設定に移行します。

※もし新規での取得ではなく、なんらかのホスティングサービスから移行することを考えている場合は先にそのホスティングサービスからドメインの設定を解除しておく必要があります。

2.購入したドメインのDNSを設定する

購入済みのドメインのDNSを設定し、GitHubと紐づけるプロセスです。
このあとGitHubからドメインの認証を行いますが、これを行うことでGitHubに自身がドメインの所有者であることを認識させます。

今回はGoogle Domainsでドメインを購入したので、その管理画面でのやり方を示します。
ただUIは違えどDNSの設定はどのサービスでも大体同じ手順じゃないかと思います。

まずはドメインの管理ページ（ https://domains.google.com/registrar/ ）にアクセスし、任意のドメインを選択します。

左サイドメニューの「DNS」を選択し、「カスタムレコードを管理」ボタンをクリック。

すると「リソースレコード」と書かれたページに遷移します。
まず1の入力画面についてですが、ここでGitHubのIPアドレスからのアクセスを有効化します。

AレコードでのGitHubのIPアドレスは執筆時点（2024/03/25）では下記の4つです。

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

公式ページに最新の情報があるので、こちらで情報確認することをオススメします。

改めてレコードの設定画面に戻り、入力欄1の部分について解説しますと...
まずホスト名は空欄でOKです。（任意のドメインがデフォで設定されます）
タイプはレコードのタイプを指します。ここでは「A」を設定します。
TTLは3600を設定します。（1時間の意味）
そしてデータに先ほどのGitHubのIPアドレスを設定します。
「このレコードをさらに追加」リンクをクリックすると入力欄が増えるので、4つ設定します。

つづいて入力欄2について解説します。
ここで先程GitHubの設定画面でメモっておいたTXTレコードの情報を入力します。
ホスト名は「xxx.ドメイン名」のように後ろに「.ドメイン名」がつくのでそこまで入力するよう注意してください。

ここまでできたら右下の「保存」ボタンをクリックしてドメインのDNS設定は完了です。
コマンドラインで dig ドメイン名 +noall +answer を実行して下記のように帰ってきたら設定はうまくいっています。

3.GitHubでドメインを設定する 2/2

つづいて、GitHubに戻ってドメインの認証を完了させます。
先ほど開いたままの画面で、3の「Verify」ボタンをクリックします。

設定が成功すると「Verified domains」セクションに「Verified」のラベルと共に追加されます。

最大で24時間かかる、というようなメッセージが表示されますが、私の場合は2,3分で反映されました。すごいはやい。

4.リポジトリでのビルドとホスティング設定

いよいよ終盤です。Webサイトのデータが保存されているGitHubリポジトリのページの右上にあるタブメニュー「Settings」をクリックし、左サイドメニューの「Pages」をクリックします。

「Source」でビルド方法を選びます。「Deploy from a branch」はシンプルで、とくにビルドが不要な静的ページを作っているならそれでいいかもしれません。
その場合は下にある「Branch」も任意のブランチに設定します。ここで設定したブランチにデータがPushされると、そのままのディレクトリ構成で即座にホスティングされます。

Webpack, Vite, Next.jsなど使っている場合はビルドが必要になるので「GitHub Actions」を選択します。
すると2つメニューが表示されます。今回は静的なサイトなので「Static HTML」の「Configure」ボタンをクリックします。

すると「/.github/workflows/static.yml」の編集画面に遷移します。
ここで記述した設定がGitHub Actionsでビルド時に実行されます。

使っているフレームワークによって内容が変わります。
Viteの場合は公式ページに具体的な記述があるのでほぼコピペでいけます。

全文はこんな感じ

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  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@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

念の為2箇所だけ大事な部分を説明します。

on.push.branches: ホスティング先のブランチ名です。デフォルトはmainですが、もしブランチ名を変える場合はここも変えます。
jobs.deploy.steps.with.path: npm run build 実行時にビルドされるデータの出力先ディレクトリのパスです。デフォは./distですが、変更している場合はここも変えましょう。

修正が終わったら画面右上の「Commit changes...」をクリックします。
これを行うとGitHubのページ上で「/.github/workflows/static.yml」ファイルを作成し、commit, pushを行ったことになるので、ローカルにもPullしておきましょう。

GitHubリポジトリのページに帰ってきまして、「Custom domain」の入力欄にドメイン名を入力し、「Save」ボタンをクリックします。ここまでのプロセスが成功していれば問題なくSaveできますが、どこか間違えているとエラーになるので注意ください。

5.GitHub Actionsでホスティング

ここまで終わったら、設定した任意のブランチ（デフォはmain）にデータをPushしてみましょう。
成功した場合はリポジトリのPages画面に「Visit site」のボタンが出現するので、ここからアクセスできます。

デプロイが成功したのか失敗したのか、失敗したなら原因はなにか、を探る場合はリポジトリの「Actions」タブから履歴が見れます。
さらに失敗した履歴をクリックするとエラーの詳細とログが閲覧できるので、それをヒントに修正しましょう。

もしうまくいかない場合（※2024/04/26追記）

このとおり進めても期待値通りに動作しないかもしれません。

カスタムレコード設定時に「IPv4アドレスが無効です」などと表示される
上記のコマンドを実行して期待値通りに返ってこない

このような場合には下記を試してみてください。

まず、カスタムレコード設定時に、DNSレコードのタイプを「A」ではなく「ALIAS または ANAME」を設定します。
それから「TTL」を3600、「DNSレコード値」を「USERNAME.github.io」に設定します。
例えば私の場合はGitHubユーザー名が「seito-developer」なので、DNSレコード値は「seito-developer.github.io」になります。
下記はGoogleドメインで設定する場合の管理画面の入力例です。

このことはGitHubの公式（https://docs.github.com/ja/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site）にも書いてある内容です。

その上で再度、「GitHub Pages」の「Custom domain」で希望のドメインを入力し、再度認証を行います。これには数分かかりますが、うまくいけば「DNS check successful」と表示されます。

そのうえでもう一度なんらかの変更を加え、mainブランチにpushしてリポジトリを更新してくだしあ。するとGitHub Actionを作動し、自動でデプロイが行われます。
変更の内容はなんでもOK。（READMEの内容を一文字変えるなど）

これでドメインにアクセスしたら反映されているはずです。（数分かかるかも）

ついでにwwwサブドメインも設定したい（※2024/04/26追記）

ついでにwwwのサブドメインの設定方法もこちらに明記します。
これを行うと、「https://www.bug-fix.org/」にアクセスされたら「https://bug-fix.org/」に自動でリダイレクトさせる、というようなことが可能になります。

設定方法は簡単で、DNSレコードを設定する要領でサブドメイン「www」を設定します。
ドメイン管理サービスの管理画面にアクセスし、カスタムレコードの設定を下記のように設定します。

ホスト名: www
DNSレコードのタイプ: CNAME
TTL: 3600
DNSレコード値: USERNAME.github.io　（※）

※例えば私の場合はGitHubユーザー名が「seito-developer」なので、DNSレコード値は「seito-developer.github.io」になります。
下記はGoogleドメインで設定する場合の管理画面の入力例です。

このあと、もう一度「GitHub Pages」にアクセスし、「Custom domain」で認証を行う必要＆リポジトリを更新してpushしGitHub Actionを動かす必要があります。
このプロセスは自動で行われるはずですが、一応目視でも確認するといいでしょう。

「Create CNAME」が自動で作成されPushまで行われます。

さいごに

以上で解説は終わります。おつかれさまでした！
なお弊社ではプログラミング・ゼミ「SiiD」、エンジニア向けキャリア支援EEE転職、を展開しています。ご興味ある方はぜひ公式LINE（ https://lin.ee/eR6BXOD ）からお問い合わせください。