ごま日記

プログラミング初学者です。

GitHub Pagesの使い方

最近、GitHub Pagesを学習の一環として利用させていただきまして、結構色々引っかかって数日停滞してしまったので、備忘録としてブログに残したいと思います。

GitHub Pages とは

GitHub Pagesは静的サイト(HTML, CSS, JavaScript等で作成)のホスティングサービスです。自分でサーバを用意したりすることなく、従来より非常に簡単にWebページを公開することができる点でとても初学者に優しい魅力的なサービスとなっています。

記事の公開方法

記事の公開方法は以下のProgateのサイトが本当にわかりやすかったのでまずはこちらを参照ください。

prog-8.com

基本的にGitHubへPushした後、該当リポジトリのSetting→PagesにてBranchの項目で公開したいブランチを選択し、Saveするというのが基本的な流れになります。

「Branch」の項目が「None」となっていると思いますので、これをデフォルトブランチ(リポジトリが作成された時期に応じて、「master」または「main」)に変更して「Save」ボタンを押すことでURLが表示されます。

Saveを押しても私の場合はURLが表示されませんでした。URLが表示されるのには少しタイムラグがあるようなので焦って何度もやらなくてもOKです!!!私はここで何度もやり直しましたが…

公開してみたサイト

yrdwsn.github.io

上記がGitHub Pagesを用いて私が公開した静的サイトです。まだまだ作成途中ですが、適宜更新して完成させていきたいと思います。

引っかかった部分

最も躓いたのは、TOPページ以外の表示の仕方がわからなかった点です。READMEが表示されたため、間違ったページをアップロードしてしまったのだと勘違いして何度もデプロイを試みたり、時間を空けてみたりしましたが、間違っているわけではないためエラーメッセージすら出ず、途方に暮れていました。

https://yrdwsn.github.io/resume/startbootstrap-resume-gh-pages/index.html

結果として、URLをディレクトリ構成そのままに入力したところ、目的のindex.htmlを表示することができました。上記のURLが表示したかったページのURLなんですが、これに辿り着くまでに微妙に時間がかかりました。 本当に単純な問題だったのですが、初学者にとってはこんな簡単な問題を解決するのにも意外と時間を浪費してしまうんですよね…

間違っている情報

  • ファイル名がindex.htmlでないと公開できない

簡単な問題が解決できなかった理由として、間違った情報を見つけてしまったからという問題もありました。 最初ファイル名を別の名称にしていたので、どこかのWebサイトでこれが書かれていたときはこれだ!と思ってファイル名を変更したのですが、ファイル名、リポジトリ名等はなんでも大丈夫みたいです。

まとめ

GitHub Pagesは無料で始めることが出来て、とてもシンプルな操作のみで自分の作ったサイトを公開できるので本当におすすめです。焦ってたくさん失敗もしましたが、すごく勉強になりました。