Githubを使ったHTMLプレビューができるようになるまで

![github_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/d2ed1643-dd73-5084-09f6-f6bded07a77b.png)
# Githubアカウントを登録
　まずはアカウントを登録。これが無いとGithubで何もできません。
　こちらの方が投稿しているアカウント登録方法：[【2019年1月現在】GitHubアカウント作成方法](https://qiita.com/okumurakengo/items/848f7177765cf25fcde0)をご覧ください。

# リポジトリを作る
　そもそもリポジトリって何ぞや？　という方のためにこちらのリンクをどうぞ。
　[今さら聞けない！GitHubの使い方【超初心者向け】](https://techacademy.jp/magazine/6235)
　物凄くざっくり説明すると、「作業スペース」みたいなものです。少しパソコンが分かる方なら、作業用フォルダを新たに作った、と喩えてもいいかもしれません。
　ここにファイルを幾つも追加していったり、さらにこの中にフォルダを作っていったりします。というわけで、早速作って行きましょう。
###まずはプロフィール画面をクリック
　どこにいても右上に出てくる、この画像矢印先の＋マークのアイコンをクリックしましょう。
![github_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/2393d189-c3fc-ce99-3168-4f6b0edffded.png)
　続いて出てきた「New repository」をクリック。
![github_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/0370b765-d3ca-244c-983e-c4d8669312d5.png)
　この画面になったと思うので、「Repository name」に名前を入れましょう。日本語だと認識してもらえずに「-」という名前になってしまうので、英語名を推奨します。
![github_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/41a74b51-8011-9dc1-1de5-ee388ac4350e.png)
　他は特に弄らず、そのまま「Create repository」！
![github_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/48eda39a-0171-56c5-ffe5-9e962cc975b7.png)
こんな画面になったら、成功です！
![Rigal1-test_name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/864538e5-d1e5-b324-0bc9-af2263963f66.png)


#HTMLファイルをアップロード
　作っただけではまだ見れませんので、アップロードしましょう！　「uploading an existing file」をクリックです。
![github_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/94ed7869-346b-b1ce-b830-f2effbc8eb9a.png)
　ここの中央に見たいHTMLファイルをドラッグアンドドロップで入れて、「Commit changes」をクリックしてください。
![github_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/ad3440b4-ae2a-fdc0-19f4-a6b1c4775cad.png)
　今回はこんなテキトーなHTMLファイルを使ってみます。

```html:test.html
<!DOCTYPE html>
<html lang = "ja">
    <head>
        <title>テストの文章だよ～</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>
            ここがh1だよ
        </h1>
        <p>
            ここは
            普通に改行できる
        </p>
    </body>
</html>
```

　アップロードが完了したら画面が切り替わりますが……これだけではまだ見れません。「Setting」から、「Pages」をクリック。
![github_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/4b567853-f096-db6f-d923-10c0ce53c0d1.png)
　「None」のところをクリックし、「main」に変更して、「Save」をクリックです。
![github_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/a10c4835-42ad-918c-adea-f4b7fd2c27bc.png)
　これで全ての準備が完了です！

#いざ、プレビュー！
　リンク名は「https://(アカウント名).github.io/(作ったリポジトリの名前)/(見るHTMLファイルの名前)」です。
　例えば今回の私の場合はアカウント名は「Rigal1」、リポジトリの名前は「test_name」、見るHTMLファイルの名前は「test.html」ですので、「[https://rigal1.github.io/test_name/test.html](https://rigal1.github.io/test_name/test.html)」となります。
![テストの文章だよ～.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/f45ae131-ae7d-99c1-e368-d35ea92be60f.png)
　無事HTMLが見ることができました！

#ファイルを追加したい場合
　「Code」の「Add file」から「Upload files」を選びましょう。最初にアップロードしたのと同じ画面が出てくるので、そこからファイルをアップロードしてください。
　![github_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553298/7b7df4a3-cd39-89f2-595d-761805477d10.png)
　無事にできたら、さっき使ったリンクのファイル名だけ変えればそのファイルもプレビューできます！


#終わりに
　GoogleドライブのHTMLプレビューは無くなりましたが、Githubでは少し手間がかかりますがこうしてプレビューができるようになったので、手軽にWebサイトを閲覧できるようになりました。
　HTMLファイルを気軽に共有して、サイトとして見たい方は是非参考にしてください！