GitHub Pagesを使ってサイトを公開する方法

## はじめに

GitHub Pagesを利用しようとしたのですが、公式ドキュメントは下記の点で読むのが大変でした。

- GitHub公式ドキュメントのリンクが多すぎて集中できない

- 詳細に説明されていて、読み飛ばしていいところがわからない

今後、すぐにGitHub Pagesを利用できるようにするため手順をまとめました！

それではいってみましょう！

### 注意事項

GitHubのアカウントには3つの種類があります。

- ユーザー アカウント
- Organization アカウント
- Enterprise アカウント

そのうち、今回紹介するのはユーザーアカウントに該当する個人用アカウントの`GitHub Free`アカウントを使った手順になります。

https://docs.github.com/ja/get-started/learning-about-github/types-of-github-accounts

### GitHub Pagesとは？

ところで、GitHub Pagesって何でしょうか。

答えは、静的サイトホスティングサービスになります。  

って言ってもよくわからないので分解します。

- 静的サイト

    - 誰がいつ、どこで見ても、同じコンテンツが表示されるWebサイト

- ホスティングサービス

    - サーバーを提供するサービスのこと

    - ホストファミリーが家を提供して泊めてくれるみたいなものですね（？）

なるほど、結構分かってきました。

それでは、具体的な手順を説明していきます。

## GitHub Page サイトを公開する


### 1.GitHubでリポジトリを作成する

#### サイト用のリポジトリを作成する場合

リポジトリ名を`<user>.github.io`にします。

すると、この後で公開するサイトのURLが`https://<user>.github.io`になります。

#### 既存のリポジトリあるいは、名前を上記以外のものにする場合

`https://<user>.github.io/<repository>`となります。

ここでは、こちらの場合を例にして説明します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993508/21816e17-acf4-46f1-a782-d95709c39327.png" width="75%">

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

:::note warn
個人用アカウントのGitHub FreeアカウントでGitHub Pagesを使う場合は、リポジトリをパブリックにしないとGitHub Pagesが利用できないので注意してください
:::


### 2.index.htmlファイルを用意する

Webページを公開するのに必要なindex.htmlファイルを用意します。

:::note

- index.html
- index.md
- README.md

上記のファイルであれば
サイト用のエントリファイルとして使用できます。
:::

今回は下記の内容でindex.htmlを作ります。

```index.html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
```

参考：

https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax

作成したらGitHubにpushします。

下図のようにGitHub上にindex.htmlファイルを配置できればOKです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993508/dc4f580e-1bcb-4342-b863-31acfbbddcca.png" width="75%">

### 3.GitHub Pagesサイトを公開する

メニューバーのSettingsをクリックします。

![Screenshot - 2025-04-01 21.28.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993508/91ac55df-ba89-448d-b990-26314f4fb09e.png)

Code and automationのPagesをクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993508/4332194b-63ef-4aa1-8a80-794ab7e6c452.png" width="50%">


下図のようになっているので、BranchをNoneからmainにします。

![Screenshot - 2025-04-01 21.31.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993508/036bb868-dd2c-4543-8c6e-56ba1755d88a.png)

mainに変更したらSaveをクリック。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993508/19b6231b-a607-4753-8419-8ecc096a0ae8.png" width="50%">


Saveを押して数十秒待った後リロードすると



下図のように`Your site is live at https://<user>.github.io/<resitory>`と表示されます。

![Screenshot - 2025-04-01 21.35.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993508/93228c65-103f-4f8f-8f2a-d9120958b8bf.png)

Visit siteをクリックしてみると・・・

表示されました！

![Screenshot - 2025-04-01 21.39.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993508/0cd17fc3-1556-4807-9d9f-7d40f6565dfc.png)

## 終わりに

今回は、GitHub Pages サイトの公開方法について説明しました。  

無料で使えるし、手軽に公開できるのでかなり使いやすいですね！

自己紹介用のWebページを公開するのが良い使い方かなと思いました！

## 参考

https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages