コードの種
プログラミング

AIで作ったHTMLを無料公開する方法｜Windows初心者向け

Windowsで作ったHTMLをGitHub Pagesで無料公開する手順。ブラウザーでのアップロード、公開設定、更新方法、404や画像・CSSが表示されない原因まで解説します。

執筆・編集：しおおにぎり

AIに作ってもらったHTMLが、自分のPCでは表示できた。次はURLを友人に送りたい。でも、アドレス欄の file:///C:/... を送っても、相手のPCにはそのファイルがありません。

この記事では、GitHub Pagesを使い、HTMLのページをインターネットへ公開します。 Windowsのエクスプローラーとブラウザーで進められる方法です。Gitのコマンドや、有料サーバーの契約は使いません。

公開先は https://アカウント名.github.io/リポジトリ名/ という形になります。自分のスマートフォンからそのURLを開けたら、最初の目標は達成です。

最初に確認：無料で公開できるものと公開範囲

GitHub Pagesは、HTML（ページの内容）・CSS（見た目の指定）・ブラウザーで動くJavaScriptなどを配信するサービスです。GitHub Freeでは、Public（公開）のリポジトリで利用できます。リポジトリは、ファイルと変更履歴を保存する場所です。GitHub公式：Pagesの概要

今回はGitHubが用意する github.io のURLを使うため、独自ドメインの購入も不要です。ただし、無料で非公開の保管庫が手に入るわけではありません。ページに使うコードや、アップロードしたファイル、変更履歴も他の人が見られます。

今あるもの この記事の方法で進められるか
自己紹介、学習ノート、作品紹介のHTML 進められます
HTMLと同じフォルダーにあるCSS・画像 一緒にアップロードします
ブラウザー内だけで動くクイズや計算ツール サーバーに処理を頼まない構成なら対象です
Reactの部品だけ、package.json を含む開発用フォルダー 公開用ファイルを作る別の手順が必要です
APIキーを使うAIチャット、ログイン、決済、WordPress本体 この記事の対象外です

GitHub Pagesには容量や用途の制限もあります。ネットショップや、有料でソフトウェアを提供するサービスなど、商取引を主な目的にするサービスの無料運営基盤としては使えません。今回は、用意したHTMLなどをそのまま配信する「静的なページ」を公開します。GitHub公式：利用制限

1．公開するファイルだけを用意する

Windowsで拡張子を表示する

Windows 11で Windows + E を押してエクスプローラーを開き、表示 → 表示 → ファイル名拡張子を有効にします。index.html.txt を、見た目だけで index.html だと思い込む失敗を防ぐためです。Microsoft公式：エクスプローラー

作業用に my-first-page フォルダーを作ります。最初のページは、小文字の index.html という名前にしてください。

1ファイルで完結するHTMLなら、必要なのは次の構成だけです。

my-first-page/
└─ index.html

CSSや画像を別ファイルにした場合は、HTMLから参照しているファイルも同じ関係でそろえます。

my-first-page/
├─ index.html
├─ style.css
└─ images/
   └─ cover.jpg

これは構成例です。画像を使わないページに、空の画像ファイルを用意する必要はありません。

まだHTMLがない場合の練習用コード

エディターで index.html を開き、次を保存すれば練習できます。文字の保存形式はUTF-8にします。タグの意味から確認したい場合は、はじめてのHTMLページを先に読んでください。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>わたしの学習ノート</title>
    <style>
      body {
        max-width: 680px;
        margin: 48px auto;
        padding: 0 20px;
        font-family: sans-serif;
        line-height: 1.8;
        color: #243329;
        background: #f7faf7;
      }
      h1 { font-size: 1.8rem; }
    </style>
  </head>
  <body>
    <main>
      <h1>わたしの学習ノート</h1>
      <p>HTMLで作ったページを公開する練習です。</p>
      <h2>今日できたこと</h2>
      <p>自分の文章をブラウザーに表示できました。</p>
    </main>
  </body>
</html>

AIの回答からコピーするときは、コードを囲む ```html や末尾の ``` をファイルへ入れません。保存した index.html をEdgeやChromeで開き、見出しと文章が表示されることを確かめます。

公開前に、中身を一度読む

次のものが、ファイル名・本文・コード内のコメントに残っていないか確認してください。

  • パスワード、APIキー、.env などの設定ファイル
  • 自宅の住所、学校の内部情報、実在する人の連絡先
  • 公開する許可のない画像や、仕事で預かった資料

APIキーは、外部サービスを利用するときの認証などに使う文字列です。ブラウザーへ渡すHTMLやJavaScriptに、秘密のAPIキーを安全に隠すことはできません。すでにGitHubへ送ってしまったキーは、ファイルから消すだけでなく、発行元で無効化・再発行が必要です。

AIへの確認を頼む場合も、秘密情報を貼る前に自分で取り除きます。例えば、次のように条件を伝えます。

このHTMLを、学習用の静的サイトとして公開したいです。外部APIへの通信、秘密情報、PC内の絶対パス、実在する人の個人情報が残っていないか、確認する場所を教えてください。新しい機能は追加しないでください。

AIの返答だけで公開可否を決めず、指摘された箇所を自分でも見ます。AIが書いたコードの確認手順も参考になります。

2．GitHubに公開用の置き場所を作る

GitHubに自分のアカウントでログインします。まだアカウントがなければ登録し、メールアドレスの確認まで済ませてください。

右上の ＋ → New repository から、新しいリポジトリを作ります。この記事では、次の設定を使います。

項目 設定する内容
Owner 自分のアカウント
Repository name my-first-page。同名があれば別の名前
Visibility Public
Add README オン

内容を確認して Create repository を押します。READMEはGitHub上の説明用ファイルで、あとから置く index.html がサイトの入口になります。GitHub公式：サイトの作成

既存の仕事用・非公開リポジトリをPublicへ変更するのではなく、今回の練習用に空のものを作りましょう。GitHubの画面は更新されるため、表示名が日本語になっている場合も、同じ意味の項目を選びます。

3．ブラウザーからファイルをアップロードする

作成したリポジトリの Code 画面で、Add file → Upload files を開きます。

ここでは、変更履歴を管理する系列である「ブランチ」の main を使います。Commit changes は、変更を履歴として保存する操作です。

  1. エクスプローラーで my-first-page フォルダーの中を開きます。
  2. index.html と、必要なCSS・画像フォルダーを選びます。
  3. GitHubのアップロード欄へドラッグします。
  4. アップロード対象の一覧に、不要なファイルがないか確認します。
  5. 変更の説明に「最初のページを追加」などと入力し、main ブランチへ Commit changes で保存します。

ポイントは、外側の my-first-page フォルダーではなく、その中身を置くことです。Code画面へ戻ったとき、READMEと同じ階層に index.html が見えれば、今回の公開設定に合っています。

GitHubのリポジトリ直下
├─ README.md
├─ index.html
├─ style.css      ← 使っている場合
└─ images/        ← 使っている場合

ZIPをそのまま置いても、Webページのファイルとして自動展開されません。ブラウザーからのアップロードは1回100ファイルまで、1ファイル25MiBまでなので、この練習では小さなHTMLと画像に絞ります。GitHub公式：ファイルの追加

4．GitHub Pagesの公開元を設定する

リポジトリの Settings → Pages を開きます。ここで選ぶのは「どのファイルをサイトとして公開するか」です。

Build and deployment の各項目を次のように設定します。

項目 選ぶ値
Source Deploy from a branch
Branch main
フォルダー /(root)

Save を押すと、公開処理が始まります。ブランチ名が main 以外なら、先ほど index.html を保存したブランチを選んでください。/(root) は、そのブランチの一番上の階層という意味です。GitHub公式：公開元の設定

しばらくしてから同じPages画面を更新し、公開URLまたは Visit site が表示されたら開きます。反映に最大10分程度かかる場合があるため、すぐに「404（ページが見つからない）」が出ても設定を何度も変えず、まず Actions で公開処理が完了したか見てください。Actionsは、自動処理の進み具合や実行結果を確認する画面です。

共有するのは、Code画面の github.com/... ではなく、Pagesに表示された https://...github.io/.../ のURLです。github.io のサイトはHTTPSで提供されます。GitHub公式：HTTPS

5．スマートフォンでも確認する

PCで開けたら、公開URLを自分のスマートフォンでも開きます。次の4点を見てください。

  • GitHubへのログインを求められず、ページを読めるか
  • 見出しと文章が、意図した内容になっているか
  • CSSと画像が表示され、リンク先も開くか
  • 横へはみ出す文字や、押せないボタンがないか

この確認で見ているのは、実際に公開したファイルです。自分のPCの index.html を開き直すだけでは、アップロード漏れに気づけません。

URLを開けることと、Google検索で見つかることは別です。 公開できた直後から検索に出るとは限りません。最初はPages画面のURLで表示を確かめましょう。

公開後に文章を更新する方法

更新するときも、作業は同じです。

  1. PCの index.html を編集し、保存します。
  2. ローカルのブラウザーで変更を確認します。
  3. GitHubの同じリポジトリで Add file → Upload files を開きます。
  4. 変更したファイルを、前回と同じ場所・同じ名前でアップロードします。
  5. 変更の説明を付けて Commit changes を押します。
  6. 公開処理の完了後、公開URLを更新して変更を確認します。

例えば本文を「HTMLで作ったページを公開できました。」へ変え、PCとスマートフォンの両方に反映されたか試してみてください。画像だけ変えた場合は、画像ファイルもアップロードします。ファイル名を変えた場合は、HTMLの参照先もそろえます。

慣れてきたら、手動アップロードの代わりにGitHubへpushする方法を使えます。その場合は既存リポジトリを手元へ複製してから作業し、GitHub上とPC内に別々の履歴を作らないようにします。

404・画像・CSSのトラブルを直す

404でページが開かない

確認する順番は、公開処理、ファイル名、置き場所です。

確認すること 正しい状態
Actionsの最新の公開処理 実行中や失敗ではなく、成功している
最初のファイル名 小文字の index.html。Index.html や index.html.txt ではない
ファイルの階層 今回はリポジトリ直下にある
Pagesの公開元 ファイルを置いたブランチと /(root)
開いているURL Pages画面に表示されたURL。リポジトリ名の部分を省かない

これらはGitHub公式の404確認項目でも案内されています。READMEの説明だけが表示される場合も、index.html の名前と場所を見直してください。

Pagesにアップグレードの案内が出る場合は、練習用リポジトリがPrivateになっていないか確認します。中身を確認せず、既存リポジトリを公開に切り替えないでください。

画像やCSSだけ表示されない

index.html と同じ階層のCSSや、その下の画像を読む場合は、例えば次のように書きます。

<link rel="stylesheet" href="./style.css" />
<img src="./images/cover.jpg" alt="学習ノートの表紙" />

今回のようにURLにリポジトリ名が入るサイトでは、先頭の / に注意します。

表示中のURL： https://アカウント名.github.io/my-first-page/

./style.css → /my-first-page/style.css を探す
/style.css  → /style.css を探す

C:\Users\...\cover.jpg や file:///... は、自分のPCの場所です。画像を公開用フォルダーへコピーし、その場所に合う相対パスへ直します。Cover.jpg と cover.jpg のような大文字・小文字の違いもそろえてください。

外部の画像やスクリプトを http:// で読み込んでいる場合は、HTTPSのページで読み込みが制限されることもあります。提供元のHTTPS対応を確認します。

AIが作った画面が真っ白になる

最初に、アップロードしたものが完成したHTMLなのか、開発用のファイルなのかを見ます。.jsx や .tsx の部品を index.html へ名前変更しても、完成したWebページにはなりません。

ViteやReactのプロジェクトなら、ビルドして公開用ファイルを作り、公開先に合わせたパス設定も必要です。まず1枚で練習したい場合は、AIへ「ビルド不要で、HTMLとCSSだけを含む1つの index.html にして」と依頼すると、この記事の範囲に戻せます。ただし、元のアプリにあったサーバー機能まで再現できるわけではありません。

WordPressや有料サーバーを考えるのはどんなとき？

今回のような学習ページは、HTMLを直して更新できます。記事が増え、ブラウザーの管理画面から下書き・投稿・カテゴリ整理をしたくなったら、WordPressなどの仕組みを検討する理由が出てきます。

通常のWordPress本体は、サーバー側で処理するPHPと、記事などを保存するデータベースを動かす環境が必要です。GitHub Pagesへファイルを置くだけでは動きません。WordPressでブログを運営する方針が決まったら、レンタルサーバー4社の料金・バックアップ比較で、初回だけでなく更新後の費用も確認してください。

まだ文章と見た目を練習している段階なら、今作ったページを更新しながら学べます。CSSで色・余白・横並びを整える練習や、スマートフォンに合わせるレイアウトの基本へ進んでみましょう。

この記事で確認したこと

GitHub・Microsoftの公式資料を2026年9月20日に確認し、GitHubのファイル追加画面とPages設定画面の表示も参照しています。コード例はこの記事用の学習用サンプルです。無料枠や画面の表示は変更されることがあるため、実際のアカウントに表示される条件を確認してください。

← 記事一覧へ戻る