HTMLファイルを 公開リンクにする
フォルダからそのまま
完成したHTML、CSS、JavaScript、画像のフォルダをアップロードし、HTTPSの公開リンク、プレビュー、独自ドメインにつなげられます。
HTMLはシンプルです。公開手順もシンプルであるべきです。
静的サイトでも、公開の基本は必要です
手書きのページ、授業課題、プロトタイプ、オンライン履歴書、AI生成HTMLサイトでも、ルートのindex.html、画像やCSSのパス、HTTPS、共有できるURLはきちんと確認する必要があります。
フレームワーク前提にしない
index.html、CSS、JavaScript、画像がそろっているなら、公開するためだけにGitリポジトリやビルドパイプラインを作る必要はありません。
完成したフォルダをそのまま使う
ローカルで開いていたフォルダをアップロードします。index.htmlをルートに置き、相対パスとサブフォルダを保ったまま公開できます。
公開に必要な基本を含める
HTTPS、静的ファイル配信、圧縮、安定したURL、独自ドメイン設定を用意し、単なるファイル共有ではなく公開ページとして扱える状態にします。
完成済みの静的プロジェクトに向いています
サイトはもうできていて、あとは正しく公開したい場合に使います。
手書きのHTMLページ
ランディングページ、授業課題、小規模な会社ページ、個人ホームページ、HTML/CSS/JavaScriptの実験。
書き出されたサイトフォルダ
デザインツール、ドキュメント生成、AIサイト生成、ノーコードツール、ビルドパイプラインから出力されたHTMLファイル。
共有したいプレビュー
クライアント確認、ポートフォリオ、デモ、オンライン履歴書など、ZIPではなくURLで見せたいページ。
アップロード前の確認
静的サイトの表示崩れは、ホスティングよりフォルダ構造が原因のことが多いです。
index.htmlをルートに置く
メインURLで開くために、最初のHTMLファイルはアップロードするフォルダの一番上に置きます。
出力フォルダを選ぶ
最終的なHTML、CSS、JS、画像、フォント、アセットが入ったフォルダを選びます。ビルドツールではdist、build、out、publicなどです。
相対パスを確認する
./styles.css、/assets/logo.png、assets/app.js などの参照が、アップロードするフォルダ構造と合っているか確認します。
サブページも開いてみる
about/index.html や docs/getting-started.html がある場合は、アップロード前にローカルで開いて不足ファイルを見つけます。
HTMLプロジェクトを3ステップで公開
公開用フォルダを準備
HTML、CSS、JavaScript、画像、フォント、アセットを一つのフォルダにまとめ、index.htmlをルートに置きます。
サイト全体をアップロード
フォルダをDeployPagesへドラッグします。サブフォルダを保ったままにすると、CSS、画像、ページのパスが合いやすくなります。
共有または独自ドメインへ
プレビューURLをすぐ共有し、公開用になったら独自ドメインとHTTPSを設定します。
アップロード後に起きること
ファイルツリーがURL構造になり、準備できたら独自ドメインへ移行できます。
すぐ使えるプレビューURL
生成されたURLで実際のブラウザ表示を確認し、チームやクライアントへ共有できます。
サブフォルダもそのまま開ける
/docs/index.html は /docs のように開け、/assets/app.js などのファイルも参照元のページから使えます。
準備できたら独自ドメインへ
後から自分のドメインを追加し、DNSを指定して、HTTPSの準備まで同じ流れで進められます。
公開後のページが崩れて見える場合
ホームページが404になる
index.htmlがアップロードしたフォルダのルートにあるか確認します。1階層下に入っていると開けないことがあります。
CSSや画像が読み込まれない
アセットのパスを確認します。ローカルのファイルパスで動いていても、公開URLでは違う階層を参照して失敗することがあります。
1ページだけしか開けない
サブページ用のフォルダやリンク先のHTMLファイルも、ホームページと一緒にアップロードされているか確認します。
JavaScriptの動きが違う
ブラウザコンソール、mixed content警告、moduleパス、file://環境を前提にしたコードを確認します。
HTMLホスティングのよくある質問
Q:静的HTMLサイトを無料で始められますか？
はい。軽い個人サイト、オンライン履歴書、シンプルなランディングページ、プロトタイプは無料プランから始められます。
Q:ホームページのファイル名はindex.htmlである必要がありますか？
はい。index.htmlにしておくと、静的サイトのメインURLで自然に開けます。
Q:サブフォルダや複数ページも使えますか？
はい。about/index.html のような構造も保持され、対応するURLパスで開けます。
Q:HTMLサイト公開にGitHubは必要ですか？
いいえ。継続開発にはGitが便利ですが、完成した静的フォルダは直接アップロードできます。
Q:AIで生成したサイトも公開できますか？
はい。出力がHTML、CSS、JavaScript、画像などの静的ファイルであれば、手書きのHTMLと同じようにアップロードできます。
Q:PHP、WordPress、データベース付きアプリも使えますか？
いいえ。このページはブラウザが直接読み込める静的ファイル向けです。サーバー実行、PHP、データベース、バックエンドAPIには別の実行環境が必要です。
Q:CLIやAPIで自動公開できますか？
はい。手動アップロードだけでなく、CIフローに静的公開を組み込みたいチーム向けの方法も用意しています。
Q:後から独自ドメインを接続できますか？
はい。公開後にコンソールでドメインを追加し、指定されたDNSへ向けると、解決後にHTTPSが自動で準備されます。