ポートフォリオサイトの公開と公開手順【GitHub Pages】
はじめに
Hello World...!!
平（@tairanobuhiko）と申します。
プログラミングスクールを卒業し、もうすぐ早2ヶ月が経とうとしてます。
エンジニア転職に向けて、少しでも自己アピールすることができれば、という思いでポートフォリオサイト制作をしました。
この記事では GitHub Pages でホスティングを行い、カスタムドメインを設定するまでの流れを備忘録的に記していきます。
GitHub Pagesとは...
静的なサイト（データベースを伴わないHTML / CSS / JavaScriptのみで構成され、リクエストに対して常に同じコンテンツを返すサイト）を無料で公開できるサービスです。
GitHub の github.io ドメインまたは独自の カスタムドメイン でサイトを公開できます。
対象のリポジトリの設定画面から数クリックで公開できる超便利なホスティングサービスです（涎）
URLに拘らず、カスタムドメインを取得しない場合は秒速（体感）で公開できちゃいます。
Pagesでのホスティング設定手順
-
公開したい対象リポジトリのSettings画面を展開
-
サイドカテゴリから
Pagesを展開し、Branch項目のプルダウンからmainを選択しSaveをクリック
たったこれだけです。
とりあえずURLに拘らなければこれで公開設定は完了です。
独自ドメインの取得・設定
独自ドメインを取得します
-
お名前.comでドメイン取得します。
DNSレコードを追加します
-
ドメインを取得したら、トップページから対象ドメインにログイン
-
サイドメニューかメイン画面にある「ドメイン」メニューを展開
-
DNSメニューを展開
-
DNSレコードを追加
必要なレコード
| タイプ | TTL | 値 |
|---|---|---|
| CNAME | 3600 | GitHubユーザー名.github.io |
| A | 3600 | 185.199.108.153 |
| A | 3600 | 185.199.109.153 |
| A | 3600 | 185.199.110.153 |
| A | 3600 | 185.199.111.153 |
| AAAA | 3600 | 2606:50c0:8000::153 |
| AAAA | 3600 | 2606:50c0:8001::153 |
| AAAA | 3600 | 2606:50c0:8002::153 |
| AAAA | 3600 | 2606:50c0:8003::153 |
最終的に参照画像【1】のように9レコード分設定する
参照画像【1】
GitHub Pages公式ドキュメント参照
GitHub Pages側でカスタムドメインを設定します
- サイドカテゴリから
Pagesを展開し、Custom domainエリアに取得したドメインを入力しSaveをクリック（SSL化するためにEnforce HTTPSにもチェック）
以上！ カスタムドメイン設定もたったこれだけ！！
OGPも設定したい場合は次の見出しもご覧ください。
OGP設定を行う
手順はこちらを参照
OGPの表示確認をしたい場合
以下は対象のURLを入力して確認できるサイトです。（どちらも無料）
使用イメージ
使用イメージ
各種SNSや各種デバイス毎の表示を確認できる
おわりに
最後までお読みいただきありがとうございました。
実際の作業はドメイン取得をすることを含めても多めにみて所要時間20分前後といったところでしょうか。
この記事を作成する方が時間かかりました笑
何かしらリアクションいただけるとアウトプットの励みになります。
まだGitHub Pagesを利用したことがない方の参考になると嬉しいです。
Discussion
titleが「ポートフォリオサイト」で
og:titleが「Taira Nobuhiko Portfolio-Site」なので
修正したほうが良いです。
修正しました！ご指摘くださりありがとうございました^_^！！