rocky-engineer7の技術日記

webエンジニアを目指して奮闘中!!

【初学者向け】GitHub Pagesを使ってみよう！

Github Pages

はじめに

GitHub Pagesを使って簡単なホームページを作成してwebに公開しました。 備忘録も兼ねてやり方をまとめてみたいと思います。

resumeはこちら

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

GitHubアカウントは既に登録済みであるということを前提にして説明をしていきます。
またGitのコマンドの中でadd, commit, pull, push程度のコマンドは学習済みということを想定しています。

GitHub Pagesとは

GitHub Pagesは、GitHubの無料ホスティングサービスで、静的なウェブサイト（ユーザー操作で内容が変わらないサイトやJavaScriptを含むサイト）を公開することができます。動的サイトの公開は不可です。GitHubアカウントがあれば、レンタルサーバーなしで簡単にサイトを公開できます。

GitHub Pagesの公開までの流れ

1.GitHubのサイト上でリモートリポジトリの作成

2.リモートリポジトリ内に公開したいファイルを追加(アップロード)

3.GitHub Pagesでサイトの公開

上記の手順を行うことでGitHub Pagesで自身が作成したサイトを公開することができます。

公開までの手順

1. リモートリポジトリを作成

GitHubのアカウント作成,もしくはログインをしてサイト上部の➕ボタン押下して New repositoryを押下。


画面が遷移してリポジトリ作成画面が表示される。赤枠で囲った部分にリポジトリ名を入力する。
入力完了後、下にあるCreate repositoryを押下する。
Publicで作成しないとGitHub Pagesを使えません。


今回はtest1とリポジトリ名をつけて作成しました。
リポジトリを作成したら一番最初にこの画面が表示されます。


2.リモートリポジトリ内に公開したいファイルを追加(アップロード)する

今回は以下のようにVSCodeで作成したファイルを使用します。


ターミナルで下記のようにコマンド入力をしてリモートリポジトリにローカルリポジトリの内容をプッシュします。

$ git init

$ git add .

$ git commit -m "first commit"

$ git remote add origin git@github.com:rocky-engineer7/test1.git

$ git branch -M main

$ git push -u origin main

リモートリポジトリで内容が反映されているかを確認。


3.GitHub Pagesでサイトを公開する

1.リモートリポジトリで右上にある「Settings」をクリックします。

2.左側のメニューの「Pages」をクリックします。

3.Branchの部分が「None」になっているため「main」に変更します。

4.「Save」をクリックします。

5.しばらくすると以下のようにGitHub Pagesの部分にURLが発行されます。

6.「visit site」をクリックします。


GitHub Pagesで公開する際に躓いた部分について

README.mdが表示されてしまう

Github Pagesで公開でき「https://(アカウント名).github.io/(リポジトリ名)」にアクセスすると、README.mdの内容が表示されてしまいました。 調べたところGithub Pagesで公開する際に指定したリポジトリの直下にREADME.mdがある場合はそちらが優先的に公開されてしまうとのことでした。 こちらでも簡単に手順を記載いたします。

  1. 「.githubフォルダ（注:フォルダ名のドットを忘れずに）」を作成します。

  2. mvコマンドを使用して、README.mdを「.githubフォルダ」を移動させます。($ git mv README.md .github)

  3. 変更した内容をローカル→リモートへプッシュ

  4. 無事にWebページでindex.htmlが表示されるようになります。

404NotFoundが表示されたら

結論から言うと、URLのパスが抜けているからです。 GitHub Pagesで表示されているURLはrootの直下にあるindex.htmlはそのままでも表示できるみたいですが、今回はtest1のフォルダを作成しその中にindex.htmlのファイルを作成したのでパスを指定しないと表示できない！と言うのが答えです。

こちらが最初に作成されたURL
https://rocky-engineer7.github.io/test1

htmlのパスを指定(test1.html)したら表示される
https://rocky-engineer7.github.io/test1/test1.html

おわりに

学習の一環で「GitHub Pages」で簡単なサイトを公開するにあたり、HTMLの知識、GitとGithubの知識をインプットしてからアウトプットを行ったので、苦手意識が少し改善されました。
これからも、まだまだ色々な勉強や課題に取り組んでいくと思いますが、インプット→アウトプットの流れでガンガン出来るようになりたいです。