プログラミング初心者がGitHub Pagesを使ってサイトを公開してみた

## はじめに
今回はGitHub　Pagesを使って自分の作ったWebページの公開方法をわかりやすくまとめて記事にしようと思います。
私はGitHub Pagesの存在を今まで知りませんでした。今回の学習を通してGithub Pagesの公開方法を学習しました。そんな初心者でも簡単にサイトを公開する事ができる便利な機能を紹介していこうと思います！！

:::note info
今回は、個人でVScodeでコーディングしたサイトをGithub Pagesを使って公開する方法を紹介します。
GitHubアカウントは既に登録済みを想定しています。
:::

## GitHub Pagesとは？？
GitHubから提供されている、静的サイトのホスティングサービスのことを言います。
静的サイトとは、ユーザー操作でページ内容が変わらないHTML.CSSなどでコーディングされたサイトのことです。  
ユーザーの操作でページ内容が変化するサイトの公開はできません。
GitHubのアカウントを持っていれば無料で公開する事ができます。

## GitHub Pagesの公開までの手順
1. リモートリポジトリを作成
1. リポジトリにファイルを追加
1. サイトを公開する

こんな感じの手順で進めて行きます。
そんなに手数は多くないです。  
それでは、実際に説明しながら進めて行きたいと思います。

### 1. リモートリポジトリを作成
①　GitHubのリモートリポジトリを作成します。
Topページ右上の`+`ボタンから、`New Repository`を選択します。
![1A6C8AD1-A240-4F34-A2AB-EDCC6C07DCF6_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/1a81448b-c062-2278-c735-50a8467513e9.jpeg)

② リポジトリ名を入力して、Publicでリポジトリを作成します。  
※ 無料アカウントだとPublicアカウントしか公開できません。  
リポジトリ名は基本的になんでも大丈夫ですが、ここで設定したリポジトリ名によってこの後に公開するWebページのURLが変わります。  
**「アカウント名.github.io」とした場合**
公開URLは、`https://アカウント名.github.io`となります。
**「それ以外の場合」**
公開URLは、`https://アカウント名.github.io/リポジトリ名`となります。

今回はリポジトリ名を`githubpages_test`として作成して行きたいと思います。

リポジトリ名を入力して、Publicを選択してCreate repositoryを押して新しいリポジトリを作成する。

![AC9934A4-B399-4A62-A253-AE3C8A765110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/e15e71de-1bd0-7cbe-c78b-fcc275a005e4.png)
![8B15E2F4-3E23-4289-80C0-75C88AB3EF33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/7ffbafdc-d5bb-aaab-589b-90bea26dd7e1.png)


作成できたら次のような画面に切り替わります。
![9F5F4782-232C-4783-A978-853BE9B1D816.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/e8ba8c5a-1220-165c-7a7b-3e1bf5660241.png)


今回はVScodeで作成したコードを使っていきます。
![085CD88A-E6DE-41C5-A003-32948D53EFA2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/a6165792-8971-ef4b-e67f-6f8df5e055ca.png)

### ローカルリポジトリからプッシュしてファイルを追加する
ターミナルで
```
$ git init

$ git add .

$ git commit -m "githubpages_test"

$ git remote add origin git@github.com:kuuuuumiiiii/githubpages_test.git

$ git branch -M main

$ git push -u origin main
```
とコマンド操作してリモートリポジトリにローカルリポジトリのファイルをプッシュします。

![E230966A-D659-4357-BF57-154CE5179F0B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/c1d6bab1-f5e8-c262-5c89-9f507b14d993.png)

こんな感じでプッシュできました。


### GitHub Pagesでサイトを公開する
いよいよGitHub Pagesでサイトの公開をしていきます。

右上にある`Settings`を押したら左側の`Pages`を選択する。

![DBAEDB08-5E2B-49B7-A1A9-6ACC697391F0_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/ffe0a2b4-1bdb-a92b-b299-b8605e05e66e.jpeg)


そうすると次のような画面になるのですが、**Branch**の部分が`None`になっているので`main`に変更して**Save**をする。
![BABE022B-C740-4013-B89B-54C8BB5A11D3_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/a8ed7b8a-98b7-aa13-d648-40ea1364dcc2.jpeg)

Saveできると次のような表示になると思います。
![A6C3505C-14C0-4DA6-A6D9-DCB3366CCFA2_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/ff925422-df60-d267-ac28-d84737cb4676.jpeg)

これで設定は完了です。

GitHub Pagesの部分にURLが発行されます。
このURLの発行には時間がかかる場合があります。
![17B88205-B710-416C-A250-281037299581.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/e71087fe-06f9-2801-0910-5f99a273142c.png)


GitHub Pagesの部分に表示されたURLでWebサイトを表示することができるようになりました！


### 思わぬ落とし穴
GitHub Pagesの設定が完了したので、いざURLに飛んでみようと思ったら...
エラー！？
![D2A31D6A-710C-4E48-B26E-773E4910F04B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/6a3a2fde-5198-8390-3496-80ff253681f7.png)

なんでかなと思ったらファイルの指定がされていませんでした。
GitHub Pagesで表示されているURLは  
rootの直下にあるindex.htmlはそのままでも表示できるみたいです。

今回は下記のようなURLが生成されました。
`https://kuuuuumiiiii.github.io/githubpages_test/`

今回私が作成したファイルは
![スクリーンショット 2023-07-18 13.35.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/aa58b7f9-6072-825b-3f0a-7463f21f9133.png)
上記のような構成になっています。


なので次のようなURLにて表示する事が可能でした。
`https://kuuuuumiiiii.github.io/githubpages_test/pages_test/index.html`

自動生成された`https://kuuuuumiiiii.github.io/githubpages_test/`をrootとしたパスを指定する事で表示できるようになります。
![492BE59F-19CC-4884-BDBE-67ED30AE1C47_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335067/63151b9e-f687-b503-40bf-d6bf9394776b.jpeg)

無事表示することができました。（よかった。。。）


## 最後に
今回はGitHub Pagesを使ってWebサイトを公開する方法をまとめてみました。
個人でやる時とチームでやる時とではまた違うようなのでそのあたりはまた学習していきたいと思います。

最後までご覧いただきありがとうございました。

## 参考文献
[GitHub Pages について](https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages "GitHub Pages について")

[自分で作ったWebページをインターネット上に公開しよう！](https://prog-8.com/docs/github-pages "自分で作ったWebページをインターネット上に公開しよう！")