GitHub Pagesでサイトを作る

blog github-pages

GitHub Pagesを利用してウェブサイトを公開します。

GitHub Pagesとは

GitHubのリポジトリから自動で静的サイトを公開してくれるサービスです。
HTMLやMarkdownで記載されたファイルからウェブサイト作成します。
Jekyllを使ったサイト作成についてはこちらをご覧ください。

サイト作成の流れ

1. GitHubのアカウントを作成する。
2. GitHubのリポジトリを作成する。
3. リポジトリの設定を変更する。
4. サイトが公開されたかを確認する。
5. サイトを確認する。

以下のページを参考にしています。
GitHub Pages サイトを作成する

1. GitHubのアカウントを作成する

GitHubのアカウントを持ってない場合、GitHubのアカウントを作成します。
持っている場合はサインインして次のステップに進みます。

1. GitHubにアクセスする。
2. 「サインアップ」または「GitHubに登録する」をクリックする。
   
3. 案内に従ってアカウントを作成する。

2. GitHubのリポジトリを作成する

GitHubのリポジトリを作成します。

1. GitHubにアクセスする。
2. 「New」をクリックする。
   

3. 以下の項目を確認する。

   項目	説明
   Owner	リポジトリを所有するアカウントを選択します。
   Repository name	リポジトリ名です。リポジトリ名は <アカウント名>.github.io にする必要があります。アカウント名は全て小文字にして入力します。
   Description	リポジトリの説明です。任意の説明を入力します。
   リポジトリの可視性	「Public」か「Private」を選択します。「Public」を選択するとリポジトリが公開され、「Private」を選択するとリポジトリの公開を制限することができます。アカウントがGitHub Freeの場合、「Public」を選択する必要があります。
   Add a README file	README.md を追加するかどうかです。GitHub Pagesでは index.html または index.md、README.md がトップページになります。今回はチェックを入れます。

4. 「Create repository」をクリックする。
   

3. リポジトリの設定を変更する

サイトを公開するためにリポジトリの設定を変更します。

1. GitHubにアクセスする。
2. 作成したGitHubリポジトリのページにアクセスする。
   
3. 「Settings」をクリックする。
   
4. 「Pages」をクリックする。
   

5. 「Build and deployment」の以下の項目を確認する。

   項目	説明
   Source	サイトの公開元です。今回は「Deploy from a branch」を選択します。特定のブランチにプッシュされたときにサイトを公開します。
   Branch	ブランチとルートフォルダを選択します。選択したブランチにプッシュすると、選択したルートフォルダ内の変更がサイトに公開されます。ルートフォルダは / または /docs を指定できます。今回はブランチは main を選択し、ルートフォルダは / を選択します。

6. 「Save」をクリックする。

4. サイトが公開されたかを確認する

サイトが公開されたかどうかを確認します。

1. GitHubにアクセスする。
2. 作成したGitHubリポジトリのページにアクセスする。
   
3. 「Actions」をクリックする。
   
4. デプロイが完了したかどうかを確認する。
   Actionの左側にチェックがついていたらデプロイが完了しています。
   

5. サイトを確認する

公開したサイトを確認します。

1. GitHubにアクセスする。
2. 作成したGitHubリポジトリのページにアクセスする。
   
3. 「Settings」をクリックする。
   
4. 「Pages」をクリックする。
   
5. 「Visit site」をクリックする。
   
   トップページ(README.md)が確認できます。