1. はじめに
今までGitHubは使っていましたが、今回初めてGitHub Pagesを使用しました！
まだ使ったことがない人向けに使用方法をまとめますので、誰かのご参考になればいいなと思います。
2. GitHub Pagesとは
自分のPCで作成したWebページをどのようにインターネットで公開していますか？
いくつか公開方法はありますが、その１つとして無料で使えるGitHub Pagesがあります。
今から公開方法を説明していきます。
3. 公開までの流れ
GitHub Pagesで実際に作業をする前に流れを確認します。
-
準備物
-
HTMLファイル
-
CSSファイル
-
(必要であれば）画像
-
GitHubアカウント
-
流れ
- Webページを作成する(今回は割愛します)
- 作成したWebページを「GitHub」にアップロードする
- GitHub上でPagesの設定を行い公開する
4.GitHubのアカウントを作成する
今回は既にアカウントを作成したところから進めます。
5. リポジトリの作成
リポジトリとは1つのWebページやアプリケーションなどをGitHub上で管理するためのプロジェクトのようなものです。
リポジトリの作成方法は以下の順です。
1) Newボタンを押す
新規リポジトリの作成は緑のボタンから作成！
2) リポジトリの設定を実施
以下の画像の赤枠の部分を設定していきます。
-
任意のRepository nameの入力
※下にavailableと表示されればOK！
リポジトリ名は基本的に何でも大丈夫ですが、ここで設定したリポジトリ名によってこの後公開するWebページのURLが変わってくるため要注意！！
「アカウント名.github.io」とした場合
公開URLはhttps://アカウント名.github.ioとなります。
上記以外の場合
公開URLはhttps://アカウント名.github.io/リポジトリ名となります。
今回はリポジトリ名を「GitHub_pages」としたため、https://tsmog52.github.io/GitHub_pagesとなります。 -
Publicの選択
※PrivateではGitHub pagesの使用ができないため注意 -
緑のCreate repositoryボタンを選択
6. GitHubへHTMLファイルをアップロードする
以下のコマンドから手元のファイルとディレクトリをアップします
git init
git add <ファイル名>
git commit -m <コミットメッセージ>
git remote add origin <path>
git push origin main
7. GitHub Pagesの設定
GitHubにアップロードできたら、pagesを設定していきます。
手順
-
settingを押す -
Pagesを押す
※写真のような画面になります - Branchの編集
Noneからmainに変更してSaveボタンを押す
ここまでできたらGitHub PagesのURLが発行されます。
Visit siteボタンを押す
URL発行に10分程度時間がかかることがあります。
自分の作成したHTMLファイルとCSSが反映されていればOKです！
作成したtest用のページがネット上に公開できました〜〜！
GitHub Pagesの使い方に関する説明は以上です。
注意点
Q.Pagesが表示されない
こんな時はURLを確認してみましょう！！
公開URLはhttps://アカウント名.github.io/リポジトリ名です。
ディレクトリでGitHubにアップロードしているときはディレクトリ名の記載も必要です。
https://アカウント名.github.io/リポジトリ名/ディレクトリ名/となります。
Q.画像が表示されない
GitHubに画像をアップするとこの部分のパスが変わるので、変更する必要があるようです。
詳細は以下の記事をご参照ください。
https://promateblog.com/github-pages-images-display/
おわりに
今回はGitHub Pagesの使い方について解説してきました。
簡単ではありますが、最後まで読んでいただきありがとうございました。