【初心者向け】GitHub Pages でWebページを公開する方法

はじめに

今回はGitHub Pagesを使ってWebページを公開する方法を学習しました。
備忘録を兼ねて手順をまとめます。

GitHub Pagesとは

GitHub Pagesとは自分で作ったWebページを無料で公開することのできるサービスです。 HTML/CSS/JSで作成したページを簡単に発信できます。

以下想定でページ公開方法の解説を進めていきます。

• GitHubのアカウント登録が完了していること
• ターミナルでgit の基本的なコマンドが使用できること

ページ公開までの流れ

1. GitHubでリモートリポジトリを作成する
2. 1で作成したリモートリポジトリに公開したいファイルをpushする
3. 2でpushしたファイルをGitHub Pagesで公開設定を行う

1. GitHubでリモートリポジトリを作成する

①. サイト右上部のプラスボタンを押下する
②. 「New repsitory」を押下する

new repsitoryの作成方法

③. Repository nameに任意のリポジトリ名を入力する
④. 他の項目は画面の内容通りとしCreate repositoryボタンを押下する

repository新規作成画面

2. 1で作成したリモートリポジトリに公開したいファイルをpushする

①. リポジトリ作成画面から遷移した画面のSSHのURLをコピーする

新規リポジトリ作成ボタン押下後の遷移画面

②. ターミナルにてgit clone コピーしたSSHのURLでローカルにリモートリポジトリのクローンを作成する

ターミナルでgit cloneを実行する

③. ②で作成されたフォルダ内に公開したいファイルを追加し以下コマンドでリモートリポジトリにpushする

git add .

git commit -m "任意のコミットメッセージ"

git push -u origin main

3. 2でpushしたファイルをGitHub Pagesで公開設定を行う

①. 作成したリモートリポジトリから「Settings」を押下する

Settingsを押下する

②. 画面左部の「Pages」を押下する

Pagesを押下する

③. Branchでmainを選択し「Save」を押下する。
④. 「Visit site」を押下する。

GitHub Pages の公開

⑤. 公開完了！

公開したWebページ

おわりに

以上GitHub PagesでWebページを公開する手順の解説でした。
サーバーなどの煩雑な設定不要で公開までできますので非常に便利です。
ご閲覧いただきありがとうございました。