GitHub Pagesを初めて使ってみた

【初心者】GitHub Pagesの使い方

アウトプット用です。

GitHub Pagesって何？

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

何が必要？

GitHub Pagesを使ってWebサイトを公開するまでに必要なものは以下になります。

1. GitHubアカウントの作成
2. 公開するためのリポジトリを作成
3. 公開するページの作成（HTML, CSSファイル）
4. ローカル環境のファイルをリモートリポジトリにpush
5. GitHub Pagesの設定

0. GitHubアカウントの作成

GitHubアカウントがない方は、GitHubからアカウントを作成しましょう。

1. 公開するためのリポジトリを作成

具体的なステップは以下です。それぞれ画像付きで解説します。

1. GitHubアイコンをクリックしてダッシュボードページに移動
2. Top repositoriesの横のNewをクリック
3. リポジトリ名を入力して、Create repositoriesをクリック
4. 画面が変わる

• ①GitHubアイコンをクリックしてダッシュボードページに移動
• ②Top repositoriesの横のNewをクリック

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

• 上の画像の画面に遷移したらリポジトリ作成成功です
• 下記コードは後で使うのでコピーしといたら楽かも、上の画像の「←ここ後で使う」って書いてあるところです

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ファイル）

• HTML,CSSファイルを作成
  ※ファイル構成は一例

3. ローカル環境のファイルをリモートリポジトリにpush

ファイルが作成できたら
以下の順でターミナルに打ち込みましょう。

git init
git add .
git commit -m "コミットメッセージ"
git remote add origin <path>
// ↑後で使うと書いたコードです↑
git push origin main

4. GitHub Pagesの設定

• settingsをクリック
• Pagesをクリック

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

• Visit siteをクリックすると実際のページへ遷移します。

ページが見られるまで数分かかる場合があります。

真ん中の画像がありませんが、Webページへの公開は成功しています。

これが実際の公開されたサイトです。
あれ？なぜかローカル環境では表示されていたはずのルフィがいない...
※ルフィはbackground-imageで設定

解決方法を模索

結論以下の点が間違っている部分でした。

• ルフィの画像の相対パス

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

↓結果↓

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