GitHub初心者がGitHub PagesとHTML5 UPを使って楽してサイトを作る

#はじめに
自分のサイトが欲しかったので、作ってみました。
ここでは、GitHub PagesとHTML5 UPを活用して自分のサイトを作った際の手順について説明しています。エディタはVisual Studio Codeを使いました。

完成したサイトがこちら↓↓↓↓↓
[shimi43 works](https://mikushimizu.github.io/)
GitHub PagesのURLは https://`username`.github.io/ になります。

#1.GitHubでリポジトリを作成する
##GitHubアカウントの作成
GitHub Pagesを使うには、GitHubのアカウントが必要です。
[GitHub](https://github.com/)のSignUpからアカウントを作成しましょう。
ここで登録したusernameはサイトのURLに使われます。変更するのが少し大変ですので、気をつけてください。

##リポジトリの作成
リポジトリとはデータの貯蔵庫を意味します。これから作るサイトのデータを保存する場所を作ろうという話です。SignUpもしくはSignInしたら、画像右上の＋ボタンからNew repositoryをクリックすることでリポジトリを作成することが出来ます。
<img width="945" alt="12101.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/250946/1d1e04ba-3483-6da4-d24e-f488266c4c26.png">

Repository nameは`username.github.io`にしてください。
画像の赤枠の中を打ち込んだら、CreateRepositoryボタンを押してリポジトリを作成しましょう。
<img width="611" alt="12102.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/250946/69d5c74d-4bb0-d8c6-cd4d-a77589ae537a.png">
こんな感じの画面になって、リポジトリの作成は完了です。
画像の赤枠で囲われたhttps文は後で使うので、コピーしたらこのウインドウは最小化でもしておいてください。
※画像はサイト制作を終えた後のリポジトリです。リポジトリ作成直後の場合、このhttps文はすぐ見つけられる場所に記載されています。
<img width="944" alt="12103.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/250946/7f6c4409-0ba4-e412-b1d0-d1e2af8b8266.png">

#2.HTML5 UPにお世話になる
勿論自分で一からHTMLとかcssとかJSとか書くのもいいですが。
面倒なので、フリーのソースコードにお世話になります。
私のオススメは[HTML5 UP!](https://html5up.net/)です。
<img width="875" alt="12104.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/250946/771024f4-869f-fa69-58d7-5cd48d907fcb.png">

色んなデバイスに対応していますし、デフォルトからオシャレです。
フッターにある**HTML5UPのクレジットを残して**おけば、**自由にカスタマイズ**して公開することができます。今回はStrataというのを使わせていただきました。
「HTML テンプレ」で検索すれば、他にもいいのが沢山出てきます。

ダウンロードしたフォルダを解凍したら、フォルダ名をGitHubPagesに変えてドキュメントに移動しておくとわかりやすくて良いと思います。


#3.GitHubにプッシュする
2でローカルに用意したフォルダをローカルリポジトリにして、コミットして、
1で用意したGitHubのリポジトリ(リモートレポジトリ)にプッシュできるように設定します。
こうすることで、手元のコードがGitHubに上がります。今回作成するリポジトリはGitHub Pagesを扱うためのリポジトリなので、`https://username.github.io/`で誰でもアクセスできるようになります。
## VS Codeでローカルリポジトリを作成する
ローカルリポジトリとは各コンピュータ上のディレクトリ(フォルダ)のことを意味します。
他のエディタでもできますが、私の場合はVisual Studio Codeを使います。
①上のFileタブから**Open Folder**でプッシュしたいフォルダ(2でドキュメントに作ったGitHubPagesフォルダ)を選択してください。
②画像の青枠で囲われた**ソース管理ボタン**を選択し、画像の赤枠で囲われたリポジトリの**初期化ボタン**を押してください。
<img width="219" alt="12105.png" src="https://qiita-image-store.s3.amazonaws.com/0/250946/19aa8384-9114-1813-b0f2-ff5c18b51710.png">
③画面上にPick workspace folder to initialize git repo inと表示されるので、同じフォルダを選択してください。
<img width="734" alt="12106.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/250946/ac3a396a-47a8-2c52-23a7-bebe87595f41.png">
④ローカルリポジトリが作成されました。

##ローカルリポジトリにコミットする
コミットとは変更を記録するという意味です。コミットの手順を簡単に説明します。
①ソース管理画面で**＋ボタン**または**数字**を押す
②**✔ボタン**を押す
③Commit Messageに変更点など入力する
<img width="220" alt="12107.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/250946/10f28ff2-2ba8-b4cb-42be-e98bf6aea615.png">
変更するたび、ローカルリポジトリにコミットする作業を繰り返します。

##リモートリポジトリにプッシュする
まずはローカルリポジトリをGitHub上のリモートリポジトリと繋げましょう。
**View**から**Terminal**を選択すると、画面右下にTERMINALが現れます。
ここでコマンドを2行実行したいと思います。

`git remote add origin <GitHubで作成したリポジトリのURL>`
と打ち込んでください。
GitHubで作成したリポジトリのURLというのは1.で作ったhttp文です。コピーしていたらここでペーストしましょう。打ち終わったらエンターを押してコマンドを実行します。
<img width="960" alt="12108.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/250946/a5002ba8-3509-d0b4-23b6-3dfc3335222a.png">
次に、
`git push -u origin master`
と打ち込んでください。
エンターを押すとGitHubのUsernameとPasswordを求められるので、打ち込みます。
これでリモートリポジトリの設定は終わりです。

ソース管理画面で**…ボタン**を選択し、**Push**してください。
PushするたびにGitHubのUsernameとPasswordを求められます。
GitHubのリポジトリを確認すると、変更が反映されているはずです。

以降、コードを変更したら
`+ボタン` -> `✔ボタン` -> `…ボタン` -> `Push` -> `Username & Password`
の作業を繰り返します。

`https://username.github.io/ `でサイトができているか確認してみましょう。
終わりです。お疲れさまでした。

#参考
https://blog.janjan.net/2018/07/11/visual-studio-code-remote-repository/
https://qiita.com/y_fujieda/items/70fc75708b932e04a035