学校でHTMLを習ったり、趣味でコードを書いたりしても、それが自分のパソコンの中だけで完結してしまうのは、ちょっともったいない。
無料で、カンタンにWebページが公開できるGitHub Pagesを紹介します。
GitHub Pagesをおすすめする理由
📄 大切なデータの「保管場所」にもなる。
🌐 サービス終了のリスクが低く、安定している。
💰 完全に無料で、広告も一切なし。
🧪 JavaScriptを使ったちょっとしたプログラムも動かせる。
パソコンとインターネットがあればOK！
特別なソフトをインストールしなくても、ブラウザだけで公開でます。
「GitHub」に無料アカウントを作ろう！
メールアドレスが1つあればすぐに作れます。
1まずは、次のリンクをクリックしてGitHubにアクセスします。
👉 https://github.com
2トップページが開いたら、右上の「Sign up」ボタンをクリック。
- Email
確認メールが届くので注意！ - Password
15文字以上、または英小文字＋数字＋8文字以上 - Username
GitHubのURLにも使われます
変更できないので慎重に！ - Your Country/Region
そのままでOK - Email preferences
チェックを入れるとお知らせメールが届きますが、不要なら空欄でOKです
- 入力が終わったら右下の「Create account」をクリック
- 登録したメールアドレスに確認コードが届きます
- GitHubの画面が自動で「コード入力画面」に切り替わるので、メールに届いた確認コードを入力しましょう
🎉 これでGitHubのアカウント作成は完了！
確認コードを入力し終えると、自動的にGitHubにサインイン状態になります。
もし自動でサインインされなかった場合は、トップページ（https://github.com/）にアクセスして、
右上の 「Sign in」ボタンからメールアドレスとパスワードを入力してサインインしましょう。
GitHubにサインインするとこんな画面になります！
「ダッシュボード」と呼ばれる画面、左側がこれから作成するリポジトリの一覧です。
無料の棚（サーバー）に、これから箱（リポジトリ）を並べるイメージです。
リポジトリって何？
リポジトリ（repository）とは、簡単に言うと「作品ごとの専用フォルダ」のことです。
GitHubでは、この「フォルダ（リポジトリ）」の中に、HTMLや画像などのファイルをひとまとめにして保管します。
🧃 1つの作品（Webページ）ごとに1つのリポジトリを作るイメージです
GitHub Pagesで選べる「2種類の公開方法」
GitHub Pagesには、用途に合わせて2つの公開スタイルがあります。
これは「リポジリにどんな名前を付けるか」で自動的に決まります。
① ユーザーページ（あなたの「メインの入り口」）
自分専用のメインサイトを作るための方法です。1人につき1つだけ作れます。
- ✅ リポジトリ名：
ユーザー名.github.io - ✅ 公開URL：
https://ユーザー名.github.io/ - 💡 おすすめ： 自己紹介サイト、ブログのトップページ、リンク集など
② プロジェクトページ（作品をどんどん増やしたいとき）
個別の作品や実験的なページを公開する方法です。いくつでも作れます。
- ✅ リポジトリ名： 好きな名前（例:
my-art,test-pageなど） - ✅ 公開URL：
https://ユーザー名.github.io/リポジトリ名/ - 💡 おすすめ： 制作した作品集、特定のプロジェクト専用ページ、動作テストなど
どっちを使えばいい？「逆引きガイド」
| やりたいこと | おすすめのタイプ |
|---|---|
| はじめてGitHub Pagesを使う | まずは ①ユーザーページ で自分の「拠点」を作ろう！ |
| ポートフォリオ（作品集）を作りたい | ①ユーザーページ を入り口にして、中身を充実させよう！ |
| 新しい作品を個別に公開したい | ②プロジェクトページ を作品の数だけ増やしていこう！ |
リポジトリを作成しよう
1 ダッシュボードの左の緑のボタン「Create repository」をクリックします
２ 「2種類の公開方法」を参考に「リポジリ名」を入力します。
⚙️ リポジトリ作成時の大事な設定
1. 公開設定（Public / Private）
👉 「Public（公開）」を選択してください。
GitHubの無料プランで「GitHub Pages（Web公開機能）」を使うには、リポジトリを公開（Public）に設定しておく必要があります。非公開（Private）にすると、ページが公開できないので注意しましょう。
2. Add a README file（説明書の作成）
👉 チェックを入れるのがおすすめです。
そのリポジトリが「どんなサイトなのか」を説明するためのメモ帳のようなファイルです。最初にチェックを入れておくと、リポジトリが空っぽの状態でスタートせずに済むので、初心者の方でもスムーズに作業を始められます。
3 右下の「Create repository（リポジトリを作成）」をクリック！
これでリポジトリが完成です😊
リポジトリのトップページの見方
ファイルがある時の画面
このリポジトリの「説明メモ」です。作成時にチェックを入れておくと自動で作られます。ここに書いた内容は、トップページの下の方に大きく表示されるので、サイトの紹介などを書いておくと便利です。
ここから「ファイルのアップロード（Upload files）」や「新しいファイルの作成（Create new file）」ができます。自分のパソコンで作ったHTMLや画像を、ポイッと追加するときに使います。
現在作業している「メインの場所」のことです。GitHub Pagesでは、この「main」の中にある内容がそのままWebページとして世界中に公開されます。
ファイルが１つもない時の画面
READMEを作成しなかった場合、このように設定の手順（英語）が並んだ画面が表示されますが、心配いりません！ 以下のどちらかのリンクをクリックして、作業をスタートしましょう。
ブラウザ上で直接コードを書いて、新しいファイルを作ります。
自分のパソコンですでに作ってあるファイルをアップロードします。
Webページとして公開するためには、最初のファイル名を必ず
index.html にして保存してください。これがWebサイトの「表紙（看板）」になります。
HTMLファイルをアップしてみよう！
リポジトリはWebページを入れる「箱」です。この中に、Webページの中身となる index.html を入れていきましょう！
1 ファイルを準備しよう
まずは、パソコンで index.html という名前のファイルを作ります。以下のコードをコピーして使ってみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは GitHub Pages で公開したページです。</p>
</body>
</html>
「メモ帳」でOK！保存時に .html にするのを忘れずに。（index.html.txtにならないよう注意！）
「テキストエディット」のメニューで 標準テキストにする を選んでから「.html」で保存してね！
エディタがよくわからない人は、GitHubの画面から直接「新しいファイル（Create new file）」を作ってもOKです！
2 アップロードしよう！
- GitHubのリポジトリ画面で 「➕ Add file」 ⇨ 「Upload files」 をクリック
- 作った index.html をドラッグ＆ドロップで放り込む！
- 画面下の 「Commit changes」（保存）ボタンをクリック
✨ これで世界中に公開する準備が整いました！
「公開」しよう！
ファイルをアップしただけでは、まだWebサイトとして公開されていません。最後に簡単な「公開スイッチ」を入れる設定を行いましょう。
1 設定画面を開く
リポジトリのトップページから、以下の順番でクリックしていきます。
- ❶ 右上のタブにある 「Settings（設定）」 をクリック
- ❷ 左側のメニューから 「Pages」 をクリック
2 公開する場所を指定する
「Build and deployment」 という項目を確認し、以下のように設定します。
- ✅ Branch： 「main」 を選択
- ✅ Folder： 「/ (root)」 を選択
最後に 「Save（保存）」 ボタンを忘れずにクリックしましょう！
3 公開されたか確認しよう！
設定が終わってから数秒〜数分待って、ページを再読み込み（F5キーなど）してください。
✅ Your site is live at: [URL]
というメッセージが表示されたら成功です！ 「Visit site」 ボタンをクリックして、自分のサイトを見てみましょう！
※反映に時間がかかることがあります。なかなか表示されない場合は、少し時間を置いてから再度チェックしてみてくださいね。
ファイルを作成したり、編集する時は？
新しいファイルを作成する
GitHubの画面上で直接ファイルを作る手順は以下の通りです。
自分のリポジトリ名をクリックして、メイン画面に戻ります。
（※READMEがない場合は「creating a new file」のリンクでもOK）
上の入力欄に「index.html」などと入力します。
画面右上の青いボタンを押すと、保存の設定画面が開きます。
確認画面（ポップアップ）が出てくるので、そのまま下の青い「Commit changes」ボタンをクリックしましょう。これで保存完了です！🙆♀️
📄 ポップアップ画面の入力ガイド
「Update index.html」など自動で入力されています。そのままでも、日本語で「タイトル修正」などと書き換えてもOKです。
空欄で大丈夫です！自分があとで見返して、詳しく残しておきたい時だけ使いましょう。
下にある選択肢は、必ず 「Commit directly to the main branch」 を選んでください。新しいブランチ（Create a new branch）は使いません。今は「main」一本道で進むのが一番シンプルです！
✍️ 「コミットメッセージ」って結局なに？
保存ボタンを押したときに出てくる入力欄。これは「今回の作業内容をひとことで書くメモ帳」のようなものです。
GitHubは、いわば「タイムトラベルができるアルバム」です。
あとで過去の自分を振り返ったときに、
「このときはタイトルを直したんだな」
「このときは色を変えてみたんだな」
と一目でわかるように、写真の裏にメモを書き添えるイメージですね。
- 空欄でも大丈夫！（GitHubが勝手に「Update…」と入れてくれます）
- 日本語でOK！（例：タイトル修正、など）
- あとで自分が見てわかれば100点！
「かっこいい英語で書かなきゃ！」なんて思わなくて大丈夫ですよ🙆♀️
⚠️ ファイル名の注意点
Webページの最初のファイルは index.htmlにするのが基本
拡張子（.html や .css）は忘れずに
スペースや全角文字は使わず、英数字＋ハイフンやアンダースコアが無難（例：about-me.html）
ページを修正・更新する方法
一度作ったページの内容を書き換えたいときは、以下の手順で行います。
- リポジトリのトップページで、編集したいファイル名（例：index.html）をクリックします。
- ファイルの中身が表示されたら、右上の 鉛筆マーク（Edit this file） をクリック！
- 編集画面で内容を書き換え、右上の 「Commit changes…」 をクリックします。
- 確認のポップアップが出るので、もう一度 「Commit changes」 を押せば保存完了です。
⚠️ 変更が反映されない？そんな時は
保存したはずなのに画面が変わらない場合、ブラウザが古いデータを覚えている（キャッシュ）のが原因かもしれません。その場合は、以下のショートカットで「強制リロード」を試してみましょう。
| Windows (Chrome等) | Ctrl + F5 |
| Mac (Chrome等) | Cmd + Shift + R |
| Mac (Safari) | Cmd + Opt + R |
CSSなどの読み込みコードの後ろに ?v=1 のような番号をつけておくと、この番号を変えるだけで「新しいファイル」としてブラウザに認識させることができます。
※ファイル名は style.css のままで大丈夫です！番号を書き換えるだけで、強制的に最新の状態を読み込ませることができます。
いらなくなったファイルやリポジトリの削除
🗑️ ファイルを削除する方法
特定のファイルだけを消したいときは、以下の手順で行います。
- リポジトリのトップページで、消したいファイル名をクリックします。
- ファイル画面の右上にある「…（3点ドット）」アイコンをクリックし、「Delete file」を選択します。
- 右上の青い 「Commit changes…」 をクリックします。
- ポップアップ画面で再度 「Commit changes」 を押せば削除完了です！🙆♀️
⚠️ リポジトリをまるごと削除する場合
※一度削除すると復元はできません。公開していたWebページも見られなくなるので、慎重に行いましょう。
- リポジトリのトップページ上部にある 「Settings」 タブをクリックします。
- 一番下までスクロールし、赤いエリアの 「Danger Zone」 を探します。
- 「Delete this repository」 をクリックします。
- 確認画面でリポジトリ名を入力し、一番下の長いボタン（I understand the consequences…）をクリックすれば完了です。
【発展編】ViteやReactで作ったサイトを公開するには？
普通のHTML/CSSならファイルを置くだけですが、ViteやReactなどのモダンな開発環境では『ビルド（翻訳・梱包）』という工程が必要です。手動でやるのは大変なので、gh-pages というツールで自動化しましょう！
gh-pagesはビルドした dist フォルダの中身だけを、GitHubの特定の場所（gh-pagesブランチ）にアップロードしてくれる
npm install gh-pages --save-devvite.config.js を修正する
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
// ↓↓↓ ここを追加！（前後のスラッシュ必須）
base: '/リポジトリ名/',
})package.json を修正：2箇所追記
//一番上の方（"name"や"version"があるあたり）
"homepage": "https://あなたのアカウント名.github.io/リポジトリ名/",
//"scripts" の中に以下を追加
"scripts": {
"dev": "vite",
"build": "vite build",
// ↓↓↓ この2行を追加
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"lint": "eslint .",
"preview": "vite preview"
},通常のGitHubにソースコードがアップ後に、npm run deploy
これでビルドが走り、dist が生成され、公開用ブランチが作成さるます。
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/あなたのアカウント名/リポジトリ名.git
git push -u origin main # ← ここで初めてGitHubにソースコードがアップされます
npm run deployWebサイトの更新時は、git pushした後に、git run deployする
- git add . → git commit → git push （保存：行き先はmainブランチ。）
- npm run deploy （公開：行き先はgh-pagesブランチ）
⚠️ハマりポイントの確認
- srcフォルダ・HTML
Viteがビルド時に、vite.config.js の設定（/リポジトリ名/）に合わせて自動でリンクを修正してくれます。 - publicフォルダ（画像・動画・3Dモデル）
Viteは中身を書き換えません。「ブラウザが画面を開いた時」に読み込まれるため、絶対パス（/）で書くとドメイン直下を探しに行って迷子になります。
//パスの書き方
'/hogehoge.jpg' //NG
'hogehoge.jpg' //OK
`${import.meta.env.BASE_URL}hogehoge.jpg` //ベストプラクティス