GitHub Pagesを使って無料で自分で作ったWebページをインターネット上に公開する３つのステップ

## この記事でやりたいこと
- 難しそうに見えるGitHub PagesをつかったWebページの公開手順。最低限の手順で何をすればよいのか記載します。

## 想定する読者
- index.htmlを作ったことがある。
- [GitHub](https://github.com/)のアカウントを持っている。もしくは自力でアカウントを作成できることができる。

## 事前に知っておくと役立つ知識
- 自分で作ったWebページをインターネット上に公開する際、リポジトリは「Public」(公開)にしないと無料では公開できない、ということを覚えておきましょう。

## 大まかな流れ
1. GitHubにログインしてリポジトリを作成する。(「リポジトリ」が何かを知らなくても大丈夫です。)
2. index.htmlファイルを作成する。
3. デプロイする。(「デプロイ」とはGitHubにアップロードしたindex.htmlをインターネット上で公開できる状態にすることです。)
→完成！

## 1. GitHubにサインインしてリポジトリを作成する。

1. [GitHub](https://github.com/)にサインインする。
2. 下図を参考に __New Repository__ を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/ac6d3c6b-ed39-eb34-a35d-eec915be903d.png)
3. 下図を参考に適当な名前(例: test)でリポジトリ名を入力します。また"Public"(公開)を選択します。
:::note info
"test is available."と表示されない場合は"test"以外の他の名前に変更してください。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/8af67ed7-f31f-d2ef-8322-db5cd62f1c04.png)
4. 画面下の方に __Create repository__ という緑のボタンがあるのでクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/809906b0-e695-eb63-af4e-4be0f8efb48a.png)
5. クリック後の画面で __Quick setup__ という項目があるので、__creating a new file__ リンクを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/b29dab28-050b-73a3-ed75-1090e5a27fd0.png)

## 2. index.htmlファイルを作成する。
1. 下図を参考に"index.html"と入力し、自分が書いたHTML文書を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/9c887a98-3b0a-74fb-06d8-a1218dfdd31b.png)

HTML文書例：
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>テスト</h1>
</body>
</html>
```
2. __Commit changes..__ ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/44c926b6-cb2d-6da6-2308-80cec71173ae.png)


3. 同様に __Commit changes..__ ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/0888fc7c-5fe6-da6d-56e2-4d6cd51ed369.png)

:::note info 
index.html以外のファイルや画像ファイルを追加したい場合は、一度リポジトリ(test)をクリックし、下図を参考にそれぞれ __Create new file__、__Upload files__ から追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/3cdcf565-e094-1e86-d0bd-1cd1d847b425.png)
:::

## 3. デプロイする。
1. 遷移先画面で画面右上の __Settings__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/1dc3d774-d3ee-f22e-d290-838e53d121e7.png)

2. 下図を参考に __Pages__ → __main__ → __Save__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/8785b464-35f8-a7e4-356a-a24e90d82ac7.png)

3. 下図のように "Your GitHub Pages site is currently being built from the main branch."と表示されていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/cd4857ff-573f-e156-3295-18cb9aaf80ec.png)

4. 画面を更新し、__Visit site__ をクリックします。
:::note info
インターネットに公開されるまでには数分かかる場合があります。下記のような画面にならない場合は少し時間を空けた後、画面を更新します。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/303d5d2e-1fbb-a72f-5c69-93b97dffe43b.png)

5. 自分で作ったWebページがインタネット上に公開されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589583/53267048-9a58-5b83-1c82-33dd27f3d805.png)