つくば AIまなびの広場T14 操作手順書

GitHub Pagesで公開する

確認日: 2026-10-14

この手順では、GitHubのWeb画面だけを使います。コマンド入力は不要です。

画面例はGitHub公式ドキュメントの実画面です。表示言語や更新時期により、ボタンの位置や表記が少し異なる場合があります。

完成するもの

0. 始める前の確認

無料アカウントでは、この講座で使うリポジトリをPublicにします。HTMLだけでなく、アップロードした画像や文章、変更履歴も公開されます。

1. 新しいリポジトリを作る

  1. ブラウザでGitHubの新規リポジトリ画面を開く。
  2. Ownerで自分のアカウントを選ぶ。
  3. Repository nameへ半角英数字で名前を入れる。例: my-first-site
  4. Descriptionは空欄でもよい。
  5. Publicを選ぶ。
  6. Add a README fileをオンにする。これでmainブランチが最初から作られる。
  7. Create repositoryを押す。

GitHubのRepository name入力欄

画面例1: Repository nameへサイト名を入力します。赤枠はGitHub公式画像の強調表示です。

ここで確認: 画面上部に自分のユーザー名 / my-first-siteが表示され、ファイル一覧にREADME.mdがあれば次へ進みます。

2. 公開ファイルを追加する

  1. リポジトリのファイル一覧でAdd fileを押す。
  2. Upload filesを選ぶ。
  3. index.htmlを追加する。
  4. 画像を使う場合は、HTMLに書かれた場所と同じ構成で画像も追加する。
  5. 画面下の変更内容にAdd website filesと入力する。
  6. 自分のリポジトリではCommit directly to the main branchを選ぶ。画面によってはこの選択がなく、そのままCommit changesを押す。
  7. Commit changesを押す。

GitHubのAdd fileメニューとUpload files

画面例2: ファイル一覧のAdd fileを開き、Upload filesへ進みます。

重要: index.htmlからassets/photo.jpgを参照しているなら、リポジトリにもassets/photo.jpgが必要です。PCではフォルダをドラッグして追加できます。スマートフォンで複数ファイルを扱うのが難しい場合は、講師と一緒にPCで行います。

ここで確認: ファイル一覧の一番上の階層にindex.htmlが見えれば次へ進みます。

3. GitHub Pagesを有効にする

  1. リポジトリ上部のSettingsを押す。見えない場合は上部メニューの…を開く。
  2. 左側のPagesを押す。
  3. Build and deploymentのSourceでDeploy from a branchを選ぶ。
  4. Branchでmainを選ぶ。
  5. Folderで/(root)を選ぶ。
  6. Saveを押す。
  7. 公開処理が終わるまで数分待つ。
  8. 同じPages画面に表示されるVisit siteを押す。

GitHub Pagesのブランチ選択

画面例3: Branchはmainを選びます。

GitHub Pagesの公開フォルダ選択

画面例4: Folderは/(root)を選び、Saveを押します。

公開URLは通常、https://ユーザー名.github.io/リポジトリ名/です。

4. 公開できたか検収する

  1. 公開URLをコピーする。
  2. シークレット画面、ログアウトしたブラウザ、または別端末で開く。
  3. 文字と画像が表示されることを確認する。
  4. リンクとボタンを1つずつ押す。
  5. 公開・更新記録へURLと結果を書く。

自分のGitHub画面ではなく、公開URLを確認します。リポジトリ内のindex.htmlが見えているだけでは公開完了ではありません。

5. 内容を更新する

  1. 更新前のindex.htmlを端末へ保存する。
  2. リポジトリでindex.htmlを開く。
  3. 鉛筆アイコンのEdit this fileを押す。完成済みファイルを入れ替える場合はAdd file > Upload filesを使う。
  4. 1点だけ修正する。
  5. 変更内容に例としてUpdate event dateと入力する。
  6. Commit changesを押す。
  7. 数分後、同じ公開URLを再読み込みする。
  8. シークレット画面または別端末でも再確認する。

6. 元へ戻す

初心者向けの確実な方法は、保存しておいた更新前のindex.htmlを再アップロードし、新しい変更として記録する方法です。問題が起きても、ファイルを削除せずに戻せます。

7. 公開を止める

Settings > Pagesを開き、公開元を無効にします。画面表示が変わっている場合は、公開URLを記録したうえで講師と一緒にPagesの公開設定を確認します。リポジトリを削除する必要はありません。

止まったとき

状況 確認する場所
Settingsがない 自分が所有するリポジトリか。上部の…内にないか
Branchにmainがない READMEまたはindex.htmlが保存され、ファイル一覧があるか
404になる index.htmlがリポジトリ直下にあるか。URL末尾にリポジトリ名があるか
画像だけ出ない ファイル名の大文字小文字、assets/の場所、拡張子を確認
修正が反映されない 数分待ち、再読み込みする。Actionsで処理結果を確認
アップロードできない ブラウザでは1ファイル25MiB以下、同時100ファイル以下にする

公式情報