GitHub Pagesの使い方

## はじめに

HTML・CSSで作成した静的なWEBサイトを無料で簡単に一般公開するために、GitHub Pagesを使用する方法があります。今回はGithub Pagesを使用して、作成したWEBサイトを一般公開する方法について記載致します。


## 前提条件

Githubアカウントを既に持っている状態での説明となりますため、まだGithubアカウントをお持ちでない方は以下の手順がわかりやすいため、ご参考にしていただければと思います。

https://prog-8.com/docs/github-pages#:~:text=%E3%81%A7%E3%81%8D%E3%81%9F%EF%BC%81-,2.%20GitHub%E3%81%AE%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E4%BD%9C%E6%88%90,-%E3%81%BE%E3%81%9A%E3%81%AF%E3%80%8CGitHub%E3%80%8D%E3%81%AE


## 公開方法

手順は以下のとおりです。

1. リポジトリの作成
2. ファイルのアップロード
3. ページの公開


### リポジトリの作成

まずは以下の赤枠「New repository」をクリックして、Github Pages専用のリポジトリを作成します。

![Your_Repositories.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/33464e6d-e18a-0e78-bf91-27f2df7fa3a0.png)


Repository nameには`アカウント名.github.io`で入力。また、PublicとPrivateだと`Public`を選択して、緑色の「Create repository」をクリックします。

![New_repository_·_GitHub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/6aaf2df7-d30a-34d7-b6d9-75d2069adc98.png)


以下の赤枠で囲んだ`README`をクリックすることで、READMEの雛形を作成できます。この作業は必須ではありませんので、不要な場合はスキップしてください。

![YokoyamaGen_YokoyamaGen2_github_io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/b2aa2216-18a6-7e24-d230-477ab25c73a5.png)


以下画面に遷移するため、赤枠で囲んだ「Commit changes」をクリックします。

![New_File_at___·_YokoyamaGen_YokoyamaGen2_github_io_·_GitHub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/ca9e2034-f3c3-f3ff-c5f6-2720103af5a5.png)

以下モーダルが表示されるため、「Commit changes」をクリックします。

![New_File_at___·_YokoyamaGen_YokoyamaGen2_github_io_·_GitHub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/7fa555e9-6c3d-1a63-c4c7-644521449b68.png)


### ファイルのアップロード

ここからは一般公開したいHTML、CSS、画像などを先程作成したリポジトリにアップロードする方法について記載します。「Add file」をクリック後に「Create new file」をクリックします。

![YokoyamaGen2_github_io__at_main_·_YokoyamaGen_YokoyamaGen2_github_io_·_GitHub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/a11150e0-a88e-2d7e-5ee1-3483f2b990f1.png)

赤枠のファイル名に`index.html`と入力し、Editの赤枠には公開したいhtmlを記述します。html記述後に緑色の「Commit changes」ボタンをクリックすることで、ファイルをコミットします。

![New_File_at___·_YokoyamaGen_YokoyamaGen2_github_io_·_GitHub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/76cbae42-7233-6e08-20fd-4c90b3afe266.png)


CSSについてはHTMLと同様の手順でアップロードを行います。
もし、画像もアップロードしたい場合は、以下の赤枠で囲った「Add file」→「Upload files」をクリックします。

![YokoyamaGen_YokoyamaGen2_github_io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/7867a13d-eec2-8e50-faf6-1c58757a70e8.png)

アップロードしたい画像を以下の赤枠の箇所でドラックアンドドロップするか、「choose your files」をクリックして、アップロードしたい画像を選択します。アップロードが完了したら、緑色ボタンである「Commit changes」をクリックします。

![Upload_files_·_YokoyamaGen_YokoyamaGen2_github_io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/774f70d8-cd3e-fdc0-a6a6-b4d36b6db9bf.png)


### ページの公開

ページの公開設定がされているかを確認するため、赤枠で囲った「Settings」をクリックします。

![YokoyamaGen_YokoyamaGen_github_io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/534078ae-1577-4ca3-d9d7-2cf8d5b88e62.png)

「Paages」をクリック後に、「Your site is live at…」と表示されていたら、すでに外部に公開されている状態です。
もし表示されていない場合には、「Branch」の項目が「None」となっていると思いますので、これをデフォルトブランチ（「master」または「main」）に変更して「Save」ボタンを押すことでURLが表示されます。

![Pages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673263/30260f20-91e5-97ba-1d7e-92354a27e001.png)

上記の「Visit site」ボタンをクリックすることで、公開したサイトを確認できます。