無料でWebページを公開する方法・GitHub Pages入門

ホームページを公開するおすすめの方法

学校でHTMLを習ったり、趣味でコードを書いたりしても、それが自分のパソコンの中だけで完結してしまうのは、ちょっともったいない

無料で、カンタンにWebページを公開できる方法を紹介します
それがGitHub Pagesというサービスです

📄 自分で作ったHTMLファイルをインターネットで公開できる
🌐 URL（アドレス）を持てるから、友達に見せられる
💰 完全に無料で使える（広告なし！）
🧪 JavaScriptを使ったちょっとしたプログラムも動かせる

パソコンとインターネットがあればOK！
特別なソフトをインストールしなくても、ブラウザだけで公開でます

まずは「GitHub」にアカウントを作ろう！

Webページを公開するには、Webページのファイルを置いておく場所（サーバー）が必要です
GitHubは、「ファイルを保存できる場所」を無料で提供してくれます

GitHubは、世界中のプログラマーが自分のコードを共有したり、チームで開発したりするために使われているサービスで英語だし複雑そうですが、難しいことをしなくても大丈夫😊
今回はそのGitHubを、Webページのファイルを置ける無料の棚（サーバー）として使います

たとえば：
あなたの作ったindex.htmlというファイルを、GitHubにアップロード
GitHubの機能の１つ「GitHub Pages」をつかう
すると、世界中どこからでも見られるURLがもらえる！

まずはそのGitHubに無料アカウントを作るところから始めます
メールアドレスが1つあればすぐに作れます

1まずは、次のリンクをクリックしてGitHubにアクセスします
👉 https://github.com

2トップページが開いたら、右上の「Sign up」ボタンをクリック

画像に alt 属性が指定されていません。ファイル名: github-account-creation-form-600x353.png
  • Email
    メールアドレスを入力、GmailなどでもOK
    確認メールが届くので注意！
  • Password
    15文字以上、または英小文字＋数字＋8文字以上
  • Username
    GitHubのURLにも使われます
    変更できないので慎重に！
    英数字とハイフンのみです
  • Your Country/Region
    特に理由がなければそのままでOK
  • Email preferences
    チェックを入れるとお知らせメールが届きますが、不要なら空欄でOKです
  1. 入力が終わったら右下の「Create account」をクリック
  2. 登録したメールアドレスに確認コードが届きます
  3. GitHubの画面が自動で「コード入力画面」に切り替わるので、メールに届いた確認コードを入力しましょう

🎉 これでGitHubのアカウント作成は完了！
確認コードを入力し終えると、自動的にGitHubにログイン（＝サインイン）された状態になります
もし自動でサインインされなかった場合は、トップページ（https://github.com/）にアクセスして、
右上の 「Sign in」ボタンからメールアドレスとパスワードを入力してログインしてみましょう！

GitHubにサインインするとこんな画面になります！
Home🏠で「ダッシュボード」と呼ばれる画面、左側がこれから作成するリポジトリの一覧になります
左の緑のボタン「Create repository」をクリックして、公開用のホームページを入れる箱（リポジトリ）を作ります

ダッシュボード

無料の棚（サーバー）に、これから箱（リポジトリ）を並べるイメージです

自分のページを入れる「箱」を作ろう（リポジトリって何？）

GitHubでは、「リポジトリ（repository）」という場所に、作ったWebページのファイル（HTMLや画像など）を入れて管理します

🧃 リポジトリは「作品を入れるためのフォルダ」のようなもの
1つの作品（Webページ）ごとに1つのリポジトリを作るイメージです

GitHub Pagesでは、Webページの公開方法が2種類あります
これは「どんな名前のリポジトリを作るか」で決まります

① ユーザーページ
「ユーザー名.github.io」という名前にすると、そのままWebページとして公開できます
たとえばユーザー名がabcなら、リポジトリ名は「abc.github.io」にする
公開されるURLも → https://abc.github.io/ のようにそのまま

これは自分のトップページやまとめサイトとして使うのにピッタリです

② プロジェクトページ（作品ページを増やしたいとき）
普通のリポジトリ名（例：my-button や hello-site など）で作る
公開URLは → https://ユーザー名.github.io/リポジトリ名/

これはたくさんのページを個別に公開したい人向けです。
例えば「作品集」や「小さな実験ページ」など、1つずつ分けて作れます

  • はじめてGitHub Pagesを使う
    ✅ ユーザーページから始めてみよう！
  • いろんなページを増やしていきたい
    ✅ プロジェクトページをどんどん作ろう！
  • まとめページやリンク集を作りたい
    ✅ ユーザーページは「ポータルサイト（入り口となるWebサイト）」にしよう！

1 ダッシュボードの左の緑のボタン「Create repository」をクリックします

  • リポジトリ名を上の「どんな名前のリポジトリを作るか」を参考に入力
    今回はユーザー名.github.io（ユーザーページ）にしました
  • Public / Private （公開か非公開か）
    「Public（公開）」を選びます
    ＊無料プランのユーザーが GitHub Pagesでページを公開するには、リポジトリが「Public（公開）」である必要があります
  • Add a README file
    チェックを入れておくと、最初に空っぽじゃない状態でスタートできます
    README（リードミー）ファイルは、「この作品の説明メモ」のようなも

2 右下の「Create repository（リポジトリを作成）」をクリック！

リポジトリができました〜😊
これが「リポジトリのトップページ」です

リポジトリのトップページ
  • README.md：このリポジトリの「説明メモ」です
    チェックをつけると自動で作成されます
  • 「＋」ボタンから「ファイルをアップロード」したり、「新しいファイルを作る」ことができます
  • main：メインの作業場所、公開もこの「main」ブランチの内容が使われます

READMEを作っていない場合など、まだファイルが1つもないリポジトリの初期画面です

⚠️ ファイルが1つもないと、このような画面になります
「creating a new file（新しいファイルを作る）」または
「uploading an existing file（ファイルをアップロードする）」から
index.htmlを作って始めましょう！

HTMLファイルをアップしてみよう！

今作った「リポジトリ」は、Webページを入れる「箱（フォルダ）」みたいなもの
この中に、Webページの中身となるHTMLファイル（例：index.html）を入れていくと、インターネットで見られるページになります！

1 ファイルを準備しよう
まず、自分のパソコンでindex.htmlという名前のHTMLファイルを作る

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのページ</title>
  </head>
  <body>
    <h1>こんにちは！</h1>
    <p>これは GitHub Pages で公開したページです。</p>
  </body>
</html>

HTMLファイルってどうやって作るの❓
Visual Studio Code（VS Code）などの「エディタ（テキストを書くアプリ）」がパソコンに入ってない人は、以下を参考にしてね！

🔸Windowsの場合
「メモ帳（Notepad）」でもOK！
ただし、保存するときに「拡張子」を .html にするのを忘れないでね
例：index.htmlとして保存（index.html.txtにならないよう注意）

🔸Macの場合
「テキストエディット」を使うときは
「フォーマット」メニュー → 「標準テキストにする」を選ぶのがポイント！
保存するときに「.html」をつけよう！

📌 補足：GitHub上で直接ファイルを作り、編集できます
エディタがなかったり、HTMLファイルの作り方がまだよくわからない人は、GitHubの画面から直接「新しいファイル」を作ってもOKです🙆‍♀️
👉 編集方法の詳しい説明は、後ほどのセクションで紹介します！
コードをコピペするなら、きっとこの方法の方が便利です

2 アップロードしよう！
GitHubのリポジトリ画面で、
「＋」ボタン⇨「Upload files」をクリック
＊または「uploading an existing file」をクリック
作成したindex.html ファイルをドラッグ＆ドロップまたは選択
「Commit changes」をクリック

「公開」しよう！

GitHubの機能「GitHub Pages」を使って、アップしたHTMLファイルを実際にWebサイトとして見られるようにします

  • リポジトリのトップページを開いて
  • 右上のタブにある「Settings」をクリックします
  • 左側のメニューの中から「Pages」をクリック
  • 「Deploy from a branch（ブランチから公開）」というところで、
    　- 「main」ブランチ
    　- 「/（root）」フォルダ
    　を選びます
  • 「Save（保存）」ボタンをクリック！
  • 公開できたか確認
    数秒〜数分後に再読み込み（ブラウザの🔄マークか、F5キーをクリック）すると、同じ画面の少し上にある「Your site is live at: ～」のところに、あなたのサイトのURLが表示されます
    「Visit site」をクリックしてみよう！

ページを直したいときは？（編集のやり方と注意点）

GitHubのページでファイルを編集するとき、ちょっと複雑に感じるかもしれません💦
GitHubの本来の目的は「変更の履歴を記録して、いつでも戻せるようにする」という「バージョン管理」の仕組みです

たとえば、こんなことができます：

  • 「ちょっと前の状態に戻したい！」
  • 「誰が何をいつ変えたのか見たい！」

こういった管理ができるように、GitHubではファイルを少し変えるだけでも「変更理由（Commit message）」を入力してから保存するようになっています
これはチーム開発やプログラミングを本格的にやる人向けの設計で、本格的にGitを使うようになったら、GitHub上で直接編集することはあまりしません

でも、今回は「Webページを公開する」という目的なので、
気にせずにGitHub上でファイルを作ったり編集したりしてOKです🙆‍♀️

新しいファイルを作るとき

  1. リポジトリのトップページにアクセス
    →リポジトリ名をクリックすればOK！
  2. トップページ右上の「＋」 → 「Create new file」 をクリック
    ＊または「creating a new file」をクリック
  3. 上の入力欄にファイル名を入力（例：index.html）
  4. 下の大きな欄にファイルの中身（HTMLなどのコード）を入力し、右上の「Commit changes」をクリック
  5. ポプアップ画面で「Commit changes」ボタンを押せば、作成されます🙆‍♀️
ポプアップ画面
  • Commit message：どんな変更をしたかを簡単に書く
    自動で入力されている（例：「Update index.html」）のでそのままでも編集してもOK
  • Extended description：空欄でも大丈夫！必要なら詳しい説明を書いてもOK
  • ◉ そのまま「main branch」に保存！
    新しいブランチ（Create a new branch）は使わない❗️
    ブランチを使い分けるのは、チーム開発や実験用のときが多いですが、今は「main」だけ使えばOK！

⚠️ ファイル名の注意点
Webページの最初のファイルは index.htmlにするのが基本
拡張子（.html や .css）は忘れずに
スペースや全角文字は使わず、英数字＋ハイフンやアンダースコアが無難（例：about-me.html）

既存のファイルを編集したいとき

  1. リポジトリのトップページにアクセス
    →リポジトリ名（例：korokoro777.github.io）をクリックすればOK！
  2. 編集したいファイル名（例：index.html）をクリック
    → リポジトリのトップページにある、ファイル一覧の「左端のファイル名」をクリック
  3. ファイルの中身が表示されたら、右上にある 「鉛筆マーク（Edit this file）」 をクリック
  4. 編集画面になるので、自由に内容を変更して、右上の「Commit changes」をクリック
  5. ポプアップ画面で「Commit changes」ボタンを押せば、保存されます🙆‍♀️

⚠️ 注意点：変更がすぐに表示されないことがあります！
ページを更新したのに、「なんだか反映されてないな…」と思ったら、ブラウザのキャッシュが原因かもしれません
＊キャッシュとは、前に読み込んだページのデータをブラウザが一時的に保存しておくしくみで、せっかく直したのに古いCSSやJavaScriptが使われたままになることがあります

✅ そんなときは「Shift + 再読み込み」！
変更をすぐに反映させたいときは、以下のように「強制リロード」してみてください👇
▲Windows（Chromeなど）： Ctrl + F5 または Shift + F5
▲Mac（Chromeなど）： Command + Shift + R
▲Safari： Command + Option + R

✅ 裏ワザ：クエリ（?v=1）をつける方法も
CSSやJSの読み込みタグにこんな風に「バージョン番号」をつけておくと、変更したときにその番号を変えるだけで、キャッシュ（古いファイル）を避けて最新の内容を読み込むことができます
ファイル名はそのままで大丈夫です😊

<link rel="stylesheet" href="style.css?v=1">
<script src="index.js?v=1"></script>

いらなくなったファイルやリポジトリはどうすればいいの？

ファイルを削除する方法

  1. リポジトリのトップページを開く
  2. 削除したいファイル名（例：index.html）をクリック
  3. ファイルの中身が表示されたら、右上3点ドットのアイコンをクリックして「Delete file」をクリック
  4. 右上の「Commit changes」をクリック
  5. ポプアップ画面で「Commit changes」ボタンを押せば、削除されます🙆‍♀️

リポジトリごと削除する方法

もし、「もうこのWebページはいらない！」「リポジトリをまるごと削除したい」という場合は、リポジトリごと削除することもできます

⚠️ 一度削除すると、復元できません（慎重に）
⚠️ リポジトリを削除すると、GitHub Pagesで公開していたWebページも見られなくなります

  • リポジトリのトップページで、上のタブから「Settings」をクリック
  • 一番下までスクロールしていくと、「Danger Zone」という赤いエリアがあります
  • 「Delete this repository」をクリック
  • 確認画面が出たら、リポジトリ名を入力して「I understand the consequences, delete this repository」をクリック