GitHub Pagesを初めて使ってみた

# 【初心者】GitHub Pagesの使い方
アウトプット用です。

## GitHub Pagesって何？
GitHubのアカウントがあれば、誰でも無料でWebページを公開することができるGitHubの1つの機能です。

## 何が必要？
GitHub Pagesを使ってWebサイトを公開するまでに必要なものは以下になります。
1. GitHubアカウントの作成
1. 公開するためのリポジトリを作成
1. 公開するページの作成（HTML, CSSファイル）
1. ローカル環境のファイルをリモートリポジトリにpush
1. GitHub Pagesの設定

## 0. GitHubアカウントの作成
GitHubアカウントがない方は、[GitHub](https://github.com/)からアカウントを作成しましょう。

## 1. 公開するためのリポジトリを作成
具体的なステップは以下です。それぞれ画像付きで解説します。
1. GitHubアイコンをクリックしてダッシュボードページに移動
1. Top repositoriesの横のNewをクリック
1. リポジトリ名を入力して、Create repositoriesをクリック
1. 画面が変わる

![スクリーンショット 2024-11-20 20.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/182dc66a-a108-0d27-2eee-ab9f7ca26e5a.png)
- ①GitHubアイコンをクリックしてダッシュボードページに移動
- ②Top repositoriesの横のNewをクリック

![スクリーンショット 2024-11-20 20.51.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/ab6d2f75-d67d-b649-01f3-89de4b49274e.png)

- リポジトリ名を入力して、Create repositoriesをクリック

![スクリーンショット 2024-11-20 21.55.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/d91461e8-84ad-1b8c-baeb-d630798c3e75.png)


- 上の画像の画面に遷移したらリポジトリ作成成功です
- 下記コードは後で使うのでコピーしといたら楽かも、上の画像の「←ここ後で使う」って書いてあるところです
```
git remote add origin https://github.com/<ユーザー名>/<リポジトリ名>.git
```

#### 公開するURLについて
- 「アカウント名.github.io」とした場合
公開URLは`https://アカウント名.github.io`
- 上記以外の場合
公開URLは`https://アカウント名.github.io/リポジトリ名`
今回の場合、リポジトリ名を「github_pages」としたため
`https://<アカウント名>.github.io/github_pages`となります。

## 2. 公開するページの作成（HTML, CSSファイル）
![スクリーンショット 2024-11-20 21.50.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/63d8bbd8-c9ae-39d6-6621-f36ac8a06465.png)
![スクリーンショット 2024-11-20 21.50.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/b1462fa4-b26d-66e0-f074-ae53e11e8bf4.png)
- HTML,CSSファイルを作成
※ファイル構成は一例


## 3. ローカル環境のファイルをリモートリポジトリにpush
ファイルが作成できたら
以下の順でターミナルに打ち込みましょう。
```
git init
git add .
git commit -m "コミットメッセージ"
git remote add origin <path>
// ↑後で使うと書いたコードです↑
git push origin main
```

## 4. GitHub Pagesの設定
![スクリーンショット 2024-11-20 20.53.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/385d3228-c320-9f90-d1ed-c0fdfde4ba50.png)
- settingsをクリック
- Pagesをクリック

![スクリーンショット 2024-11-20 22.49.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/e83258e2-a0a5-afd5-aac0-6d69b57ecd2e.png)

- ``Branch``のところを``main``に変更して``Save``をクリック

![スクリーンショット 2024-11-20 22.54.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/d3fe4c25-c895-8b6c-63bc-e4fc95b1e77b.png)
- Visit siteをクリックすると実際のページへ遷移します。
:::note warn
ページが見られるまで数分かかる場合があります。
:::

![スクリーンショット 2024-11-20 23.00.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/7e304250-5d4e-c892-ff47-42ff20590631.png)

:::note info
真ん中の画像がありませんが、Webページへの公開は成功しています。
:::
これが実際の公開されたサイトです。
あれ？なぜかローカル環境では表示されていたはずのルフィがいない...
※ルフィはbackground-imageで設定

### 解決方法を模索
結論以下の点が間違っている部分でした。
- ルフィの画像の相対パス

ということで、画像パスを変更しましょう

![スクリーンショット 2024-11-21 21.03.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/f91e5ff3-9f47-d205-05ff-4343da1cb4fa.png)

↓結果↓

![スクリーンショット 2024-11-21 21.15.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/f9d2e87b-a8eb-d058-f2f1-f7fa14a837c9.png)

しっかり表示されました。