Github Pagesの使い方

普段皆さんが使用しているgithubに[Github Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages)という機能があります。
Github Pagesでは、作成したWebサイトを無料で公開することができます。

今回は静的なページをGithub Pagesを使用して公開する方法をまとめました。

**手順は以下になります。**
1. 公開するページの作成（HTML/CSS）
2. Githubに公開用のリポジトリを作成する
3. ローカルのファイルをGithubにアップロードする
4. Github Pagesでページを公開します

注意：
Github Pagesを使用するためには、githubのアカウントが必要になりますので
まだアカウントをもっていない方は作成をお願い致します。
https://github.com/signup


## 1. 公開するページをローカルで作成します。

以下がサンプル用のHTML/CSSファイルになります。
ディレクトリ名は「github-pages-sample」です。
ディレクトリ構成は以下になります。

```
github-pages-sample
├─ index.html
└─ style.css
```

```:html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>Github Pagesを使ってサイトを公開する方法</h1>
    <p>手順</p>
    <ol>
      <li>テスト</li>
      <li>テスト</li>
      <li>テスト</li>
      <li>テスト</li>
      <li>テスト</li>
    </ol>
  </body>
</html>
```

```:CSS
h1 {
  color: blue;
}

p {
  font-weight: bold;
}
```

このようなサンプルページになります。
![スクリーンショット 0006-04-22 1.08.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/02d4c0de-5b58-0684-d1c6-aa8ac0a70528.png)


今後、このファイルをgithubにアップロードすること（=リモートリポジトリにpush）することになりますので、commitをお願いします。
※まだGitの使い方について未学習の方はこちらなどを参考にしてGitの基礎を勉強してみてください。


https://www.sejuku.net/blog/71279



## 2. githubに公開するためのリポジトリを作成します。

（１）
![スクリーンショット 0006-04-21 23.05.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/a6f34825-e9d5-972c-a000-3b81b7257328.png)

（２）
![スクリーンショット 0006-04-21 23.06.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/8fd14a37-b10f-1c31-62b3-85bf5cb24800.png)

（３）リポジトリ名はローカルと同じ「github-pages-sample」にしました。
（異なっていても問題ありません）
![スクリーンショット 0006-04-21 23.12.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/0f7fe599-1def-bba4-5d7f-6ad06cfdb521.png)

（４）ページをリロードしてこのページが表示されれば問題ありません。
![スクリーンショット 0006-04-21 23.14.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/c7d24355-6702-940c-2238-5514abedcdc0.png)

## 3. ローカルのファイルをgithubにアップロードします。

ローカルの「github-pages-sample」のファイルを、リモートリポジトリの「github-pages-sample」にpushします。

すでに手順1でローカルのファイルはcommitされていると思いますので以下の２つのコマンドを実行するだけでリモートリポジトリにローカルのファイルをpushすることができます。

（１）
![スクリーンショット 0006-04-21 23.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/c2edf4ad-d7bc-524c-17db-0fa8a247ef4c.png)

![スクリーンショット 0006-04-21 23.17.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/babcb848-fe76-0152-e743-29d459ecfc19.png)

（2）ターミナルを開いて実行します。
![スクリーンショット 0006-04-21 23.17.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/97d26b56-0fc1-ce21-2261-81b92c518981.png)

![スクリーンショット 0006-04-21 23.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/5cc1ce1c-2b79-e173-2167-98b489c6232e.png)

（３）リロードをしてこのような画面になっていれば、ファイルをアップロードできています。
![スクリーンショット 0006-04-21 23.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/f48d542f-a464-d3c9-52e0-eadcb13505fd.png)


## 4. Github Pagesを使用してページを公開します。

![スクリーンショット 0006-04-22 0.46.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/faa35f3e-22f5-6988-d348-b6aa700179ee.png)


ここでは、どのブランチを公開させるか設定します。
今回は、mainブランチのみ作成しているので、mainを選びます。
![スクリーンショット 0006-04-22 0.46.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/a46aa532-5048-f401-8a92-f3fe8cb118bb.png)

![スクリーンショット 0006-04-22 0.46.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/6d6f47d1-bf2c-dce1-3913-fb65cbc2b959.png)

Saveをクリックします。
![スクリーンショット 0006-04-22 0.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/9d7ecbee-d473-7468-0f26-59c4cb474111.png)


Saveを押すと、このような表示がされて、ページの公開のための準備がはじまります。この表示が「緑」になることを待ちます。
![スクリーンショット 0006-04-22 0.47.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/3860bcbe-6a70-4854-8539-aed8cf688116.png)

クリックするとWebページが表示されます。
![スクリーンショット 0006-04-22 1.21.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/8a8b3f73-90cc-bb64-71fa-b48ef6e543e9.png)

![スクリーンショット 0006-04-22 1.44.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722496/77793216-e9d4-0339-607f-8db25ac99738.png)


これで、手順は終了になります。
ぜひ簡単なポートフォリオやご自身のブログの公開などに役立ててください。