爆速で初心者がGithub pages でWebサイトを公開する方法

# はじめに
みなさん、こんにちは。**torihazi**です。
今回は Git初めて1ヶ月に満たない初心者である私が
タイトルのことを実際にやってみようと思います。

文字通り爆速で Webサイトを **世界に発信**する事ができます！！

それでは行ってみましょう！！

# やり方
1. Githubのアカウント作成
1. Publicリポジトリの作成
1. 必要なファイル(index.htmlなど)をGithubにアップロード
1. Github上から設定する
1. 指定されたURLへアクセス

※途中、VScodeというエディタを使用しますが、なければ自身のエディタもしくはメモ帳などでも可能です。

# やり方詳細
## 1. Githubアカウントの作成
[Githubの公式ページ](https://github.com/)に飛び、アカウントを作成してください
右上にある**Sign up**をクリックしてください。
![スクリーンショット 2024-01-26 23.53.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/c7f27197-0dfa-cfc1-9c13-1aaa1f99110d.png)

そうすると次の画面に遷移するのでメールアドレス等必要な情報を入力して新規登録を行なってください。
![スクリーンショット 2024-01-26 23.55.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/400a7c66-b3bd-9ddd-37cb-05dcf131679d.png)

登録が完了すると次のようなマイページが表示されます。
これでアカウントが作成できました。
![スクリーンショット 2024-01-26 23.56.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/8f0752d9-ebaa-718f-0ab0-d7005c394b08.png)

## 2.Public リポジトリの作成
Github PagesでWebページを公開するためには "Public"リポジトリを作成する必要があります。
画面左側欄にある **New**とい緑色のボタンをクリックしてください。
![スクリーンショット 2024-01-26 23.56.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/7fb0e14b-57ed-fe2b-3b7d-242407f782a3.png)

すると下の画面が表示されるので
- リポジトリ名 画面上部にある項目
- Public リポジトリ 画面中央にある項目
として**Creating Repository"をクリックしてリポジトリを作成します。
:::note alert
Privateを選択すると公開できません!!
注意してください！！（変更はできますが手間が増えます。)
:::
![スクリーンショット 2024-01-26 23.48.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/28d14d00-da46-5323-5c83-81cdb039b40a.png)


![スクリーンショット 2024-01-26 23.48.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/6b044b3e-8467-d090-db0e-d4db0e7a9bdd.png)

次のようなリポジトリの画面が表示されたら成功です。
![スクリーンショット 2024-01-27 0.06.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/48a328e7-1246-dcf9-abc9-c9587fbb0c08.png)


## 3.必要なファイルをアップロード
Webページを表示させるためにはhtmlファイルを用意する必要があります。
HTMLという言語で記述されたファイルです。

Githubに戻ってそのファイルを作ってみましょう。
緑色ボタン`<> Code`の隣の`Add file`から　`Create new file`をクリックしてください。
![スクリーンショット 2024-01-27 9.46.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/f3b2d162-add7-6c69-4b49-967dfc3d3d3d.png)

すると以下のような画面が表示されるので
ファイル名を`index.html`として、コードは下記をそのままコピー&ペーストします。
その後、画面右側にある `Commit changes`をクリックします。
![スクリーンショット 2024-01-27 9.49.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/d5dd409a-20cf-da52-eae4-0b5cf2d9b8bd.png)

```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Profile</title>
</head>
<body>
    <h1>My name is (ご自身の名前など)!!</h1>
</body>
</html>
```

次に表示されるものについても`Commit changes`をクリックです。
![スクリーンショット 2024-01-27 9.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/55c976ad-c24e-d953-1ebf-1cd2cefb276d.png)

自身の`resume`リポジトリ画面に戻ると先ほど作成した`index.html`が表示されているかと思います。
されていれば成功です。公開まであと一歩です!

![スクリーンショット 2024-01-27 9.54.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/bc011f77-bbaf-1103-e6c8-ad884b0291f5.png)


## 4.Github上から設定する
ファイルを設定した後は、Github上でWebページを表示させる設定をする必要があります。
この画面の上部タブにある`Settings`をクリックしてください。
![スクリーンショット 2024-01-27 9.54.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/bc011f77-bbaf-1103-e6c8-ad884b0291f5.png)

その後左側欄にある`Pages`をクリックします。
中央にある`Branch`という項目において`main`と選択して`Save`をクリックします。
![スクリーンショット 2024-01-27 9.56.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/1ea1c117-4046-a1ae-110a-9cc3be9ac412.png)

画面上側に`Github Pages source saved`(設定完了したよ)と表示されたらOKです。
![スクリーンショット 2024-01-27 9.57.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/f895f9b9-13b9-0e95-7926-4d9e32e58671.png)

時間がある程度経過する、もしくは一度画面を閉じてGithubを開き直すと
次のように上側にURLが表示されると思います。そちらをクリックしてください。

![スクリーンショット 2024-01-27 9.58.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/9ae8a429-2dd5-6137-c886-58ac69db9784.png)

## 5. 指定されたURLへアクセス
そのURLをクリックして次のような画面が表示されたら成功です！！
お疲れ様でした！！
![スクリーンショット 2024-01-27 9.59.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/10ed769c-8dcd-d747-5354-3a480e20828d.png)


# 表示されない方へ
:::note alert
404 Not Foundのページが出る方は以下を見直してみてください。
私も最初なりました。
:::
次のような画面が出た方の対処法です。
1つご紹介します。
![スクリーンショット 2024-01-26 23.52.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/e555de78-5b8c-3cc1-984c-9a9c02917ac8.png)

原因の1つとして
**ディレクトリを作ってその中にindex.htmlを作成してしまっている**
ことが考えられます。

Github Pagesが参照しているのは 一番上の階層にある`index.html`です。
1番上とはこの画面において表示されている時のことです。
ここにはディレクトリなんてありませんよね。
![スクリーンショット 2024-01-27 9.54.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/bc011f77-bbaf-1103-e6c8-ad884b0291f5.png)

Githubはディレクトリの下にある`index.html`を参照してはくれません。
もしどうしてもディレクトリ配下のものを参照したいなら、Github Pagesが指定しているURLの後ろに
そのディレクトリ名を追記してください。
そうすれば参照する事ができ、画面も表示されます。

# 終わりに
いかがでしたでしょうか。
これで発信者として仲間入りです。
世界にあなたの情報を公開する事ができました。
表示させたページがあまりにも簡素で残念と感じた方は
ぜひ勉強をしてもっとすごいページを公開してみてください。

私も頑張ります。