1時間で作る“超軽量”個人サイト：無料ホスティング3択と最短公開手順【2025年版】

公開日: 2025-11-18 / 更新日: 2025-11-18 入門Web制作ホスティング

この記事のゴール：
① 最小の index.html を用意 → ② GitHub Pages / Cloudflare Pages / Netlify のどれかで公開 → ③（任意）独自ドメインをつなぐ。
PC1台・無料で 60分以内に「人に見せられる」個人サイト を作ります。

準備（所要10分）

GitHub または Google アカウント（Cloudflare/Netlifyもソーシャル連携でOK）
エディタ（メモ帳で可）
コマンドは不要ですが、可能なら git を入れておくと速いです

まずは最小テンプレ（コピペOK / 30秒）

このまま公開しても見栄えする“超軽量”テンプレです。画像もフォントも外部依存なし。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>My site</title>
  <style>
    :root{--bg:#0a0f12;--ink:#d7ffe8;--acc:#74ffcf;--mute:#89bfa6}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-monospace,Consolas,monospace}
    .wrap{max-width:900px;margin:auto;padding:24px}
    h1{color:var(--acc);font-size:22px;margin:8px 0}
    p{color:var(--mute);line-height:1.9}
    a{color:#4dabff}
    .card{border:1px solid rgba(116,255,207,.35);border-radius:12px;padding:14px;background:rgba(12,24,28,.85)}
  </style>
</head>
<body>
  <div class="wrap">
    <h1>Hello, world!</h1>
    <div class="card">最初の1ページが公開できました。</div>
  </div>
</body>
</html>

公開の方法は3通り（どれか1つでOK）

A) GitHub Pages（無料・早い）

GitHubでリポジトリ作成（Public / 例: my-site）。
ローカルでフォルダを作り、index.html を保存。
下のコマンドを実行（WindowsはPowerShellでOK）。

git init
git add index.html
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<YOUR_NAME>/my-site.git
git push -u origin main

GitHubリポジトリ → Settings > Pages → Build and deployment: Deploy from a branch → Branch: main / Folder: /root → Save。
数分で https://<YOUR_NAME>.github.io/my-site/ が公開。

Jekyllを使わない素のHTMLなら、ルートに .nojekyll（空ファイル）を置いてもOK。

B) Cloudflare Pages（無料・速い・独自ドメイン簡単）

Cloudflare Pagesにログイン → Create a project → GitHub連携で my-site を選択。
Build command: None / Output directory: /（ビルド不要）。
デプロイ完了後、Custom domains で独自ドメインを追加（DNSがCloudflareなら一発反映）。

C) Netlify（ドラッグ&ドロップで即公開）

Netlifyにログイン → Sites → Drop にフォルダ（index.htmlのみ）をドラッグ。
ランダムURLで即公開。Site settings > Domain managementから独自ドメインも可。

独自ドメインを付ける（任意 / 15分）

GitHub Pages：リポジトリの Settings > Pages でカスタムドメインを設定 → DNSで username.github.io へCNAME。
Cloudflare Pages：Custom domains にドメイン追加 → DNSは自動。
Netlify：Domain management でカスタムドメイン追加 → CNAMEで your-site.netlify.app へ。

どのサービスもHTTPSは自動発行。反映に数分〜最大1時間程度かかることがあります。

公開直後にやる“品質チェック”（5分）

モバイルで確認（ズーム不要で読めるか、行間は十分か）。
<meta name="viewport"> が入っているか。
ページのタイトル/説明（検索結果での見え方）を簡潔に。
画像を置く場合は alt をつけ、サイズを最適化。
リンク切れがないか（外部は新しいタブ推奨）。

次の一歩（任意）

ページ分割：/about、/contact を追加。
問い合わせフォーム：最初は mailto: でOK。後でWebhookやサーバレスに移行。
簡易ブログ：フォルダを作り、/blog/記事-slug/index.html を積む方式（本サイトと同じ）。