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の場合は公式ページに具体的な記述があるのでほぼコピペでいけます。
https://embed.zenn.studio/card#zenn-embedded__67afc1bacb379
全文はこんな感じ
# 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まで行われます。
GitHub Pagesでの公開まで一通り通すと、Gitの操作もDNSの設定もまとめて身につきます。公開までの流れを実務の順番で学びたい方に向けて、SiiDの概要をまとめておきます。
AIプログラミングスクール「SiiD」について
AIプログラミングスクール「SiiD」は、未経験からITエンジニア転職を目指す方向けのオンラインスクールです。
SiiDの特徴
- 現役エンジニアでYouTube登録者約13万人の「セイト先生」が代表兼主任講師
- 採用側の実務知見（2,000人以上の選考・150名以上のエンジニア採用）にもとづく指導
- 生成AIを取り入れた学習設計と、実務レベルのフルスタックWeb開発スキル
- Workship CAREER（株式会社GIG）と連携した無料の転職伴走支援
- 経済産業省認定のReスキル講座で、給付金の条件を満たせば実質105,600円〜
- 学割あり（35%オフ）
こんな方におすすめ
- 未経験・文系・社会人からITエンジニア転職を本気で目指したい方
- 独学に限界を感じている方
- 費用を抑えながら実務スキルと転職サポートを両立したい方
「未経験だから」とあきらめる必要はありません。採用する側を知り尽くしたプロが、給付金で負担を抑えながら内定まで伴走します。
