HTML ファイルを公開する

HTML ファイルを公開する手順

チェックとプレビューはこのページで完結し、公開はターミナル（またはコーディングエージェント）で 2 コマンドです。ここでファイルがアップロードされることはありません。チェックはあなたのブラウザで動くスクリプトです。

1. ファイルを開く。 .html ファイルを枠にドラッグするか、ファイル選択から開くか、HTML を貼り付けてください。FileReader でローカルに読み込み、サンドボックスの枠で描画するので、訪問者が見るものがそのまま見えます。
2. 公開不可の項目を消す。 指摘には必ず行番号が付きます。「公開不可」は、ドメインから HTTPS で配信された瞬間に挙動が変わるものです。自分のディスクへの参照、http:// のサブリソース、viewport やタイトルの欠落など。「要確認」は、誰かがリンクを張る前に足しておく価値のあるものです。
3. 公開する。 ファイルを index.html という名前でフォルダに入れ、clize claim で無料のハンドルを取り、そのフォルダに clize deploy を実行します。同じ 1 分のうちに HTTPS のアドレスが手に入り、同じフォルダは何度でも再デプロイできます。

ローカルを離れた瞬間に壊れるもの

file:///Users/you/Desktop/page.html で開いたファイルと、https://yourname.clize.app/ から配信された同じファイルは、同じ世界にいません。下の 4 つの違いが「ローカルでは大丈夫だったのに」のほとんどすべてを説明します。このページのチェックは、ファイルをどこにも送らずにそのすべてを見つけます。

気づいたときには手遅れになりがちな 2 つも報告します。<title> の欠落は、そのページに誰かが張るリンクの文字そのものになります。og:image の欠落は、チャットに貼ったときにプレビューカードが出ない理由です。公開するのではなく中身を見たいだけなら、HTML ビューアが同じ描画エンジンで、3 段階の幅と行番号つきの指摘だけを出します。

レンタルサーバーの常識と、静的ホスティングの違い

日本で「ホームページを公開する」というと、多くの人がまずレンタルサーバーの契約を思い浮かべます。エックスサーバー、さくらのレンタルサーバ、ロリポップ！——月額と初期費用を払い、コントロールパネルにログインし、FTP クライアントで public_html にファイルを転送する。この手順は今も正しく動きますが、その前提のほとんどは、1 枚の HTML を公開したいだけの人には必要のないものです。

最後の行が、いちばん大事な正直な線引きです。ここは静的ファイルを配るだけの場所で、PHP も CGI も .htaccess もデータベースもありません。お問い合わせフォームをサーバー側で受けたい、WordPress を動かしたい、という要件なら、レンタルサーバーのままが正解です。逆に、HTML と CSS と JavaScript だけで完結するページ——お店の 1 枚もの、資料、ポートフォリオ、生成したレポート——なら、月額を払ってサーバーを借りる理由はほぼ残りません。

それでも .htaccess でやっていた 2 つのことは、ここでは設定なしで済みます。/access/ のような末尾スラッシュの URL は /access/index.html をそのまま返します（リダイレクトを挟みません）。404 は、404.html を置けば本物の 404 を返し、置かなければ index.html に 200 で落ちます——後者はシングルページアプリのための挙動で、--not-found でどちらにも変えられます。

文字コードは公開前に片づけてください。 レンタルサーバー時代に書かれたページは Shift_JIS や EUC-JP で保存されていることが多く、<meta charset="Shift_JIS"> のまま UTF-8 前提の配信に乗せると、公開した瞬間に全文が文字化けします。nkf -w --overwrite page.html か iconv -f SHIFT_JIS -t UTF-8 で UTF-8 に変換し、meta も utf-8 に書き換えてください。上のチェックが見ているのは <meta charset> があるかどうかだけで、実際のエンコーディングは判定できません。そこは正直に書いておきます。

2 つのコマンドで、ファイルに URL がつく

公開はフォームではありません。一度インストールすれば、無料のハンドルを取るのも、公開するのも 1 コマンドずつです。「このページを公開して」とコーディングエージェントに頼んだときに実行されるのも、まったく同じ 2 つのコマンドです。同じ CLI だからです。

$ npm i -g @clize/clize && clize login
      
      $ clize claim tokiwa
      ✓ tokiwa.clize.app はあなたのものになりました。仮のページが公開済みです。
      
      $ clize deploy ./site --domain tokiwa.clize.app
      {
        "host": "tokiwa.clize.app",
        "url": "https://tokiwa.clize.app",
        "files": 2,
        "notFound": "spa (auto)",
        "geo": { "sitemap": "…/sitemap.xml", "llms": "…/llms.txt", "robots": "…/robots.txt" }
      }

ハンドルは先着順で、手放すまであなたのものです。clize deploy が取るのはフォルダなので、ファイルを 1 つフォルダに入れて index.html と名付けてください。「1 ファイルだけ公開する」の作法はそれだけです。clize init --handle tokiwa で一度ひも付ければ、以降のデプロイに --domain は要りません。コマンドの一覧はコマンドリファレンス（英語）にあります。

ここでいう「無料」の中身

無料なのはハンドルと証明書とデプロイで、期間限定のお試しではありません。何を打ち込む前に判断できるよう、範囲を全部書きます。

• 本物のアドレス。 yourname.clize.app を HTTPS で。証明書は自動発行です。あとから独自ドメインを向けても、ファイルを動かす必要はありません。
• 複数ファイルのサイトも。 フォルダの中身はそのまま上がります。ページ、CSS、画像、フォント。1 ファイル 90MB、1 サイト 5GB まで。
• 必要なら本物の 404。 404.html を置けば未知のパスは本物の 404 を返し、なければ index.html に 200 で落ちます。--not-found で上書きできます。
• きれいな URL。 /access/ は /access/index.html をそのまま返します。レスポンスは 5 分間の公開キャッシュです。
• 機械が読む面は自動生成。 デプロイのたびに、ファイル一覧から /sitemap.xml・/llms.txt・/robots.txt を返します。同名のファイルを自分で置けば、そちらが優先されます。
• 同じ名前のメールボックスも（任意）。 clize claim yourname --email を使うと support@yourname.clize.app で受信もできます。

ないもの: ビジュアルエディタはありません。あなたのページの手前に広告ページが挟まることもありません。HTML はあなたが書くか生成し（手書きでも、すでに使っているエージェントに頼んでも構いません）、デプロイはそのバイト列をそのまま公開します。

$ npm i -g @clize/clize && clize login
$ clize claim yourname
$ clize deploy ./site --domain yourname.clize.app