GitHub Pagesで記事を公開してみたときの備忘録

GitHub Pagesを使ってウェブサイトを公開する機会があったのでその時に使った方法を書いておきます

GitHub Pagesの良いところ

ドメインの取得、維持費を考えずに無料で全世界に自分の書いたコードそのままでサイトを公開できます。GitHubのアカウント登録などいくつか準備が必要ですが初心者の私でも簡単に公開できました。

GitHubにログイン

GitHubにアカウント登録してない場合はアカウントを作ります。アカウントの作成は他ブログなどで詳しく書かれているのでここでは省きます。

リポジトリを作る

自分のアカウントのプロフィールページからRepositoryの文字をクリック。 NewをクリックしCreate a new repositoryを編集します。 Repository nameにリポジトリの名前を書きます。日本語を入れても作れるのですがエラーの原因になることがあるので英語のみで書くと良いようです。また、リポジトリ名の一部が公開時のurlになるため個人情報は入れないようにします。最後に下にスクロールしてCreate Ripositoryをクリックすると完成です。

リポジトリに必要なファイルをCommitする

作ったリポジトリのAdd fileをクリックします Create New Fileを選びます。nameをHTMLならindex.htmlに、CSSはstyle.cssにします。この名前にすることでファイルの種類を区別しやすいだけではなく予期せぬエラーを避けることができます。名前を付けたら本文の部分にvscodeなど自身で書いたコードをコピー＆ペーストで貼り付けます。Windowsの場合Ctrl+aで全文選択、Ctrl+cでコピー、Ctrl+vで貼り付けできます。

保存とコミットメッセージ

貼り付けができたらCommit Changesをクリックしてファイルを保存します。このとき、Commit Messageが編集できます。そのままでも良いのですがFirst Commitなどにしておくといつのものなのか見分けやすくなります。

画像のアップロード

画像があるサイトの場合、Add fileをクリックし、Uplode Filesを選ぶと自分のPCからドラック＆ドロップで画像をアップロードできます。この時、画像のパスが変わっても表示できるようimgフォルダごとドロップし、事前にHTML本文に./など相対パスで記述すると後々画像が表示されないということが起きにくいです。

GitHub Pagesの公開設定

GitHubにファイルをアップロードしただけでは公開できないので設定を変えます。Settingsを開き左にあるPagesをクリック。 ここでnoneになっている項目をプルダウンよりmainに変えsaveをクリックします。Pagesを再度読み込みするとVisit siteという表示が現れます。ここをクリックするとサイトが表示されるはずです！

うまく表示されないとき

手順通りにやってもウェブサイトのページが乱れることもあります。 私は画像が表示されないことがあったのですがその時は画像のパスが絶対パスで自分のパソコンのデスクトップになっていました。HTMLのパスが参照する場所があっているか確かめましょう。 また、GitHubにCommitしてからミスに気付いて変更をしても変更が反映されるまで時間がかかります。私は2時間経っても変わらず一晩寝て起きたら反映されていたことがあります。一晩経っても変わらないときはまだコードのミスがあると思われるので慎重に探しましょう。どうしてもわからなくなったらリポジトリから作り直すのも手です。