皆様こんにちは、Amiaです。
近頃「GitHub Pages」を使用して自身が作成したWebページを公開する機会がありました。
ですので今回は、「GitHub Pages」を使用して自身が作成したWebページを公開する方法を復習も兼ねて記事にしてみようと思います。
※GitHubアカウントは既に登録済みであるということを前提にして説明をしていきます。
またGitのコマンドの中でadd, commit, pull, push程度のコマンドは学習済みということを想定しています。
⚫︎そもそもGithub Pagesとは
GitHubから提供されている、静的サイトのホスティングサービスのことを言います。
静的サイトとは、ユーザー操作でページ内容が変わらない、HTML・CSS等で構築されたサイトのことです。（JavaScriptを使ったアニメーション含むサイトも公開可能です。）
※PHPで動くWordPressのような動的サイト（ユーザーの操作でページ内容が変化する）の公開はできません。
これを使えばレンタルサーバーを契約しなくても気軽にウェブサイトを公開できます。
GitHubのアカウントを持っていれば無料で静的なウェブサイトを公開することができます。
GitHub Pagesを使うことで、自分が作成したWebページを外部に公開することができます。GitHubに上げているソースを元にWebページが作成可能なのでとても便利です。
⚫︎GitHub Pagesの公開までの手順全体像
1.GitHubのサイト上でリモートリポジトリの作成
2.リモートリポジトリ内に公開したいファイルを追加(アップロード)
3.GitHub Pagesでサイトの公開
上記の手順を行うことでGitHub Pagesで自身が作成したサイトを公開することができます。意外と工数的には多くないと思います。
それでは実際に画像を用いて手順の説明をしていきたいと思います。
1.GitHubのサイト上でリモートリポジトリを作成する
①GitHubのTOPページを開きます。
②TOPページ右上の「+」をクリックします。
③「New Repository」をクリックします。
④「Repository name」の部分に任意のリポジトリ名を入力します。
今回は「githubpages_testrepository」というリポジトリ名としました。
※リポジトリ名は基本的にどのようなものでも問題ありませんが、ここで設定したリポジトリ名によって下記のようにこの後公開するWebページのURLのリポジトリ名の部分が変わります。
https://(アカウント名).github.io/(リポジトリ名)
⑤「Public」を選択します。
⑦「Create repository」をクリックします。
⑧無事にリポジトリが作成されると以下のような画面に切り替わります。
2.リモートリポジトリ内に公開したいファイルを追加(アップロード)する
今回は以下のようにVSCodeで作成したファイルを使用します。
①ターミナルで下記のようにコマンド入力をしてリモートリポジトリにローカルリポジトリの内容をプッシュします。
$ git init $ git add . $ git commit -m "githubpages_testrepository" $ git remote add origin origin https://github.com/mm-da-if-kun/githubpages_testrepository.git $ git branch -M main $ git push -u origin main
②リモートリポジトリで内容に問題がないことを確認します。
3.GitHub Pagesでサイトを公開する
①リモートリポジトリで右上にある「Settings」をクリックします。
②左側のメニューの「Pages」をクリックします。
③Branchの部分が「None」になっているため「main」に変更します。
④「Save」をクリックします。
⑤しばらくすると以下のようにGitHub Pagesの部分にURLが発行されます。
⑥「visit site」をクリックします。
⑦無事にWebサイトを公開することができました。
⚫︎私がGitHub Pagesで公開する際に躓いた部分について
・README.mdが表示されてしまう
Github Pagesで公開でき「https://(アカウント名).github.io/(リポジトリ名)」にアクセスすると、README.mdの内容が表示されてしまいました。
調べたところGithub Pagesで公開する際に指定したリポジトリの直下にREADME.mdがある場合はそちらが優先的に公開されてしまうとのことでした。以下の記事を参考にして対応しました。
こちらでも簡単に手順を記載いたします。
①.githubフォルダ（注:フォルダ名のドットを忘れずに）を作成します。
②mvコマンドを使用して「.githubフォルダ」を移動させます。(git mv .github 移動先ディレクトリ名)
③無事にWebページでindex.htmlが表示されるようになります。
・cssが適用されない
上記の方法で無事にWebページでindex.htmlが表示されるようになったと思います。しかし別の問題が発生してしまいました。なんとcssが全く適用されていなかったのです。もちろんローカルで作業をしていた時には適用されていたことを何度も確認しています。以下の記事を参考にして対応しました。
「」のような相対パスではなく、「」のように絶対パスで指定する必要があるようです。
①相対パスで指定されている部分を絶対パスに変更します。
②git commitコマンドを使用して最新の状態にコミットします。
③git pushコマンドでGitHubのリポジトリにプッシュします。
・画像が表示されない
上記の方法で無事にWebページでcssが適用されたindex.htmlが表示されるようになったと思います。しかしまたここで問題が発生してしまいました。画像が表示されないのです。こちらもローカルで作業をしていた時には適用されていたことを何度も確認しています。以下の記事を参考にして対応しました。
GitHub Pagesにアップロードした画像を表示させるためには、Github上での正しいパスを記載する必要があるそうです。アップロードした画像のパスはGitHub独自の形式に変わるようで、そのパスに変更すれば問題ないようです。
今回私が躓いた部分について記載してきましたが、3点とも共通して対応を行ってから数分間は適用されないものと考えた方がよいです。
私も始めはすぐに適用されずに焦りましたが10分後ぐらいには適用されていました。
これで無事にGitHub Pagesで公開することができました。
⚫︎最後に
私は「GitHub Pages」というものを知りませんでした。それでも無事にWebサイトを公開することができました。
GitHubについては学習してというもの苦手意識がありました。まだ少しあります。
しかし使用していくうちに慣れていくとものだということを実感しました。これからもどんどん使用して慣れていきたいと思います。
