GitHub Pagesを使ってWebページを公開する方法

GitHub Pages

GitHub Pagesは、GitHubが提供する無料のホスティングサービスでユーザが簡単に無料で(静的な)Webページをインターネット上に公開できるサービスです。

ページ公開の流れ

  1. GitHubで新規アカウント作成
  2. GitHubで新規リポジトリ作成
  3. ウェブサイトのファイルを作成しアップロード(プッシュ)
  4. GitHub Pagesの設定
  5. ウェブサイトの確認

手順

1 . GitHubで新規アカウント作成

初めに、GitHubアカウントを作成します。 既にアカウントを持っている場合は、次に進んでください。

2 .新しいリポジトリを作成

GitHubで自分のページへ遷移。
右上にあるプラスボタンからNew repositoryをクリック

new_repo

Create a new repository画面で、Repository nameを任意名称で入力します。
無料プランではPublicにしないとGitHub Pagesの設定ができないため、Publicのままにします。

create_repo

ページ下部にある、Create repositoryボタン(緑色)を押して、リポジトリを作成します。

その後、以下の画面へ遷移します。
赤枠で囲ってある部分のURLを後ほど使用します。

3 . ローカルで任意のフォルダを作成する。

$ mkdir test_web_dir

# 作成したフォルダ内に移動
$ cd test_web_dir

#リポジトリの初期セットアップ
$ git init

# git initの実行後に、.gitフォルダが作成される

4 . 新しくファイルを作成する

htmlファイルやcssファイルなどを作成する

5 . 作成したファイルをリポジトリにコミットする

$ git add .

$ git commit -m "first commit"

6 . リモートリポジトリにプッシュする

# 現在のローカルリポジトリに指定したリモートリポジトリを追加
# originの部分は好きな名称をつけて問題ない
$ git remote add origin https://github.com/ユーザ名/test_web.git

# masterブランチからmainへ名称変更
$ git branch -M main

$ git push -u origin main

7 . GitHubへアクセスして設定する

当該リポジトリでSettingsをクリックする

Pagesをクリック

mainブランチに変更し、Saveボタンをクリック

数分待ち、ページリロードするとアドレスが表示される

GitHub Pagesへアクセスして確認する
※エラーが出てページが見れない場合はURLにフォルダ名、htmlファイル名を指定すると確認可能になる。
ex) https://ユーザ名.github.io/test_web/index.html