GitHub で超簡単に静的サイトをホスティングする！

# tl;dr
+ github では簡単に静的サイトをホスティングすることができます。
+ ここでは `gh-pages` というブランチを切ることによるホスティング **ではない** やり方を紹介します。
    + もちろん、ブランチいるほうのやり方でもできます。
+ 備忘録にでもしていただければ...

### 対象者
+ git を使い始めて間もないけど、だいたい仕組みぐらいはわかってきたなーっていう人。
+ ホスティングは知っている
    + けど、`gh-pages`っていうブランチ切ってやってた
    + ほかの方法知らない
    + `gh-pages` ブランチいちいち切るのも...

## Step1.
github で新しいリポジトリを作成します。

![新しいリポジトリを作成](https://qiita-image-store.s3.amazonaws.com/0/193558/1ef11fb7-b679-f779-e9a4-27983e23fc8e.png)

## Step2.
テスト用のファイルを作成したいと思います。

### ディレクトリ構造
`page-hosting` フォルダを作成 

|  |  |  |
|:--|:--|:--|
| :open_file_folder: **page-hosting** |   | :page_facing_up:  *index.html* |
|                 | :file_folder: **css** | :page_facing_up:  *style.css*  |
|                 | :file_folder: **js** | :page_facing_up:  *common.js*  |

githubからファイルをダウンロードする:
[GitHub - lemon2003/page-hosting](https://github.com/lemon2003/page-hosting)

またはclone:
[https://github.com/lemon2003/page-hosting.git](https://github.com/lemon2003/page-hosting.git)

## Step3.
作成したファイルを、リモートリポジトリにプッシュしたいと思います。
1. `git init` で初期化
2. `git add --all` ですべてのファイルをステージング
3. `git commit -m "commit comment"` でコミット
4. `git remote add origin リモートURL` でリモートを追加
5. `git push -u origin master` で `master` ブランチにプッシュ

![bash - リモートリポジトリにプッシュ](https://qiita-image-store.s3.amazonaws.com/0/193558/e4bab122-f216-eefa-7ea4-63db16f43ba3.png)

<details><summary>bash</summary><div>

```bash
User@DESKTOP MINGW64 /e/page-hosting (master)
$ git init
Initialized empty Git repository in E:/page-hosting/.git/

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git add --all

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git commit -m "first commit"
[master (root-commit) d5e7519] first commit
 3 files changed, 110 insertions(+)
 create mode 100644 css/style.css
 create mode 100644 index.html
 create mode 100644 js/common.js

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git remote add origin https://github.com/[ユーザーid]/page-hosting.git

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git push -u origin master
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 4 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (7/7), 1.61 KiB | 411.00 KiB/s, done.
Total 7 (delta 0), reused 0 (delta 0)
remote:
remote: Create a pull request for 'master' on GitHub by visiting:
remote:      https://github.com/[ユーザーid]/page-hosting/pull/new/master
remote:
To https://github.com/[ユーザーid]/page-hosting.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

```

</div></details>

## Step4.
いよいよホスティングの設定 :gear: をしたいと思います。

1. `Settings` タブをクリック
2. `GitHub Pages` グループ
    + `Source` : `master branch` に設定
3. `Save` をクリック

#### 1. `Settings` タブをクリック

![`Settings` タブ](https://qiita-image-store.s3.amazonaws.com/0/193558/634a20d3-4392-f89e-2f53-0c050efdff6a.png)

#### 2. `Source` : `master branch` に設定 & `Save` をクリック

![`Source` : `master branch` に設定 & `Save` をクリック](https://qiita-image-store.s3.amazonaws.com/0/193558/9e688a4e-e8e7-9f86-def2-210fc10bb409.png)

## Step5.
準備は完了しました！
実際にアクセスしてみましょう。

URL: `https://[アカウントid].github.io/[リポジトリ名]/`
(`[アカウントid]` と `[リポジトリ名]` はご自身のものに。)

# 表示結果

[GitHub Static Page Hosting Test!](https://lemon2003.github.io/page-hosting/index.html)

![表示結果](https://qiita-image-store.s3.amazonaws.com/0/193558/15942163-a6e1-0bd1-e4ca-69c5966489ed.png)

# 終わりに
githubを使えば、簡単に、サーバーを自分で用意せず、静的サイトをホスティングすることもできます。
(もちろんバージョン管理もしながら。)
使いこなせば、独自ドメインの追加もできるので、何かしら便利だと思います。