静的ページをGitHub Pages使って簡単に公開しよう！

HTMLとCSSで作成したWebページをGitHub Pagesというサービスを使って公開します。

# GitHubの登録
https://github.com/

上記のページからSign upしてください
メール等届くので、認証してください

Sign up後、画面左上の＋マークを押しましょう
以下のようなメニューが出てきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/8ec58bdb-162d-978f-d4a2-a28c22e673a2.png)

New repositoryをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/df55f3c4-9cfa-0298-5253-e2a6b5de1d5d.png)

リポジトリの名前は好きなものを設定してOKです

あとはそのまま「Create repository」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/98455437-d944-b807-4365-e293e8910e0f.png)


# ファイルの作成

「creating a new file」を選択しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/771a6816-a625-ebe1-c683-a469dc1949fa.png)

まずファイルネームを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/a235627b-b725-8137-f9e2-c663b17d2f3b.png)

自分が記述したHTMLをすべて張り付けましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/60a18b8b-68e1-1c6f-f5d5-c739c2a6da78.png)

そして「commit new file」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/a7fd09b2-14e7-2de0-d6c3-ad76f31260de.png)

# フォルダの作成

新しいファイルorフォルダを作成するときは
「Add file」の「Crate new file」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/d8fc1c9b-69df-5fb3-2f3b-62f8353a1daf.png)


フォルダ名と/を入力すると勝手にフォルダが作成されます。
今回は```stylesheets/index.css```と入力
![github_folder_create.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/0768f49c-7c2b-c963-edf2-71f5ba2eebbf.gif)

あとはファイルの作成と同じように、自分が作成した記述をすべてコピペして「commit new file」

# 画像ファイルの作成
まず、何もないファイルとフォルダを作りましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/e51679df-6857-ae35-f832-34a1386fe7ea.png)

作成終わったら、フォルダにに移動して「Add file」から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/043b311c-8c0d-0b27-ab28-0107f277ad15.png)

「Uploade File」選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/81c06345-d879-7a39-b62e-f26de3e9ed28.png)

ファイルをドラック＆ドロップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/8963b144-4750-51c7-0aa4-afce32f9301e.png)

アップロードが終わったら「Commit changes」

# 公開設定
必要なファイルすべてを作成し終わったら、ページの公開をします。
リポジトリのTopのSettingsをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/ad865c12-56a9-660d-0f71-8c1f7fa0b677.png)

Pagesを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/5d166677-d1b8-2f05-64a8-d2b1b8168fdb.png)

Noneからmainに変えて「save」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/7c6be73e-87e8-6dce-6885-7c26722335dc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/1f851ace-1815-af6c-14e2-5664281721dc.png)


これで公開されました。
表示されたURLをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/657ecba6-5e33-7f73-a350-90f6a29d32e6.png)

# ファイルを編集する
ファイルページへ飛べば編集が可能です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/af22be9c-6d3e-d43e-27c2-f62764659123.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/1a568886-d33a-53d1-61c7-4ae830d64f52.png)

編集が終わったら「Commit changes」

自動で公開ページも更新されます！

# うまく表示されない場合
ファイルもしくは、フォルダの作成がうまくいってない可能性があります。
自分が作成したものと、GitHub上で作成したもので違うところがないか確認しましょう！

URLの後ろに表示したいファイルを入力するとうまく表示される場合があります
```https://~~~~~.github.io/home_page```でうまく表示されない時
```https://~~~~~.github.io/home_page/index.html```で表示

# 最後に
お疲れ様でした！
これであなたのサイトはURLをつかって全世界からアクセス可能になりました！