// 免費工具 · HTML 檔案 → 真的連結

HTML 檔案上線

把 .html 檔案丟進來，它會用瀏覽器真正的方式畫給你看，旁邊列出這個檔案一離開你的電腦就會失效的每一項。接著用一個真正的 HTTPS 網址免費發佈：兩行指令、不用註冊，而這個頁面不會把你的檔案送去任何地方。

免費即時免註冊在瀏覽器裡執行

其他語言：EnglishDeutschEspañolFrançais日本語Português (Brasil)繁體中文

index.html · 上線前檢查
開啟檔案

把 .html 檔案拖進來，或選一個。用 FileReader 在本機讀取，不會離開這個分頁。

你一邊打字它一邊檢查。預覽會在你停手約三分之一秒後重畫。

上線前先處理
    實際長這樣

    在沙箱框裡繪製：允許執行腳本，但碰不到這個頁面。你自己資料夾裡的檔案在這裡解析不到；等它們跟頁面一起部署上去就會解析得到。

    發佈者： dk · Clize · 更新日期：

    HTML 檔案上線的三個步驟

    檢查與預覽都在這個頁面完成；發佈是終端機（或你的 coding agent）裡的兩行指令。這裡不會上傳任何東西 —— 檢查器是跑在你自己瀏覽器裡的一段腳本。

    1. 開啟檔案。 把 .html 拖到方框上、用檔案選擇器開啟，或直接貼上原始碼。它會用 FileReader 在本機讀取，並在沙箱框裡繪製，所以你看到的就是訪客會看到的。
    2. 清掉會擋住上線的項目。 每一則都帶行號。「會擋住上線」指的是檔案改由網域以 HTTPS 提供之後行為就會不同的東西：指向自己硬碟的引用、http:// 的子資源、少了 viewport 或標題。「待確認」則是在有人開始連你這頁之前值得補上的。
    3. 發佈。 把檔案放進一個資料夾並命名為 index.html，用 clize claim 取一個免費 handle，再對那個資料夾執行 clize deploy。同一分鐘之內就會有 HTTPS 網址，而同一個資料夾要重新部署幾次都可以。

    檔案離開你的電腦之後會壞掉的東西

    從 file:///Users/you/Desktop/page.html 打開的檔案，跟同一份檔案由 https://yourname.clize.app/ 提供，並不在同一個世界裡。下面四項差異解釋了幾乎所有「在本機明明好好的」，而這個頁面的檢查器不用把檔案送去任何地方就能全部找出來。

    檔案裡寫的本機上線之後
    src="file:///Users/you/…"圖出得來除了你以外對所有人都是壞的 —— 那個路徑在你電腦裡
    src="http://cdn…"載得到在 HTTPS 頁面被當成混合內容擋掉，而且不會顯示錯誤
    href="style.css"、src="img/hero.png"從資料夾載入只有那些檔案一起部署上去才載得到
    沒有 <meta name="viewport">沒人會發現每一支手機都用桌機寬度繪製，再整頁縮小

    還有兩項會一直看不見、等發現時已經太遲：少了 <title>，那是往後任何人連到這一頁時的連結文字；少了 og:image，這就是為什麼有些連結貼進聊天室會有預覽卡片，你的沒有。如果你只是想看看這個檔案而不是要發佈它，HTML 檢視器用同一套繪製方式，提供三種寬度，不談上線的事。

    繁中頁面上線後，字型與 CDN 還跑不跑得動

    繁中網頁上線後最常掉的其實不是圖片，是字型。原因很單純：你在本機看到的字，是你電腦裡裝的字。macOS 有蘋方（PingFang TC），Windows 有微軟正黑體。你的訪客不一定有——尤其是 Android 手機，系統內建的是 Noto Sans CJK TC，字重、字距、標點的位置都不一樣。如果你的 CSS 直接寫死 font-family: "微軟正黑體"，在那些裝置上就整個掉回系統預設，你排好的行高與版面跟著跑掉。

    於是很多人改用網頁字型，而這裡是第二個坑：一套繁中字型的完整字集，壓成 woff2 之後仍然是以 MB 計的，因為它要涵蓋上萬個字，而不是拉丁字母那幾十個。Google Fonts 用 unicode-range 把中日韓字型自動切成上百個分片，只送出頁面真正用到的那幾片，所以實際下載量遠小於整包——但這一切的前提是 fonts.googleapis.com 連得到。

    對繁中站來說，這個前提不是理所當然的。如果你的讀者有一部分在中國大陸，Google Fonts 與部分公用 CDN 對他們而言可能連不上；瀏覽器會等到逾時才放棄，於是那段時間頁面要嘛沒有文字，要嘛用預設字型先顯示再跳一次。這也是為什麼上面那條「會向 N 個外部主機取用資源」的提示對繁中站特別有用：那份帶行號的清單，就是你上線後可能連不到的東西的清單。

    能做的事有三件，由淺到深：

    • 先把備援字型堆寫對。 font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; —— 讓每個平台都落在一個像樣的字上，而不是掉到最後的預設。
    • 加上 font-display: swap。 文字先用系統字型顯示，網頁字型載到了再換。載不到的時候，讀者至少讀得到內容。
    • 需要指定字型時，就把字型檔一起帶上線。 用子集化工具只保留頁面真正用到的字，把 woff2 放進同一個資料夾，一起 clize deploy。單一檔案 90MB、整站 5GB 的額度放得下，而且從此不再依賴別人的 CDN。

    一句誠實話：我們不做字型子集化，也不代管字型。 這個工具只把外部主機連同行號列出來，決定與動手都在你這邊。

    兩行指令，這個檔案就有網址了

    發佈不是填表單。安裝一次之後，取一個免費名字跟發佈各是一行指令 —— 你叫 coding agent「把這頁放上線」時，它跑的也是同樣這兩行，因為那是同一套 CLI。

    $ npm i -g @clize/clize && clize login
      
      $ clize claim evergreen
      ✓ evergreen.clize.app 是你的了，預設頁面已經上線。
      
      $ clize deploy ./site --domain evergreen.clize.app
      {
        "host": "evergreen.clize.app",
        "url": "https://evergreen.clize.app",
        "files": 2,
        "notFound": "spa (auto)",
        "geo": { "sitemap": "…/sitemap.xml", "llms": "…/llms.txt", "robots": "…/robots.txt" }
      }

    handle 先搶先贏，在你釋出之前都是你的。clize deploy 接受的是資料夾，所以把你的檔案放進一個資料夾並命名為 index.html —— 所謂「單檔上線」的全部儀式就是這樣。用 clize init --handle evergreen 綁定一次之後，後續部署連 --domain 都不用打。所有指令列在指令參考（英文）。

    這裡說的「免費 HTML 空間」到底包含什麼

    免費指的是 handle、憑證與部署本身，不是試用期。整個範圍列在下面，讓你在動手打字之前就能決定：

    • 一個真正的網址。 yourname.clize.app，走 HTTPS，憑證自動簽發。之後要把自己的網域指過來，也不必搬動檔案。
    • 可以是多檔網站，不只一頁。 資料夾裡有什麼就上去什麼：網頁、CSS、圖片、字型。單檔上限 90MB，整站 5GB —— 自帶繁中字型子集也放得下。
    • 需要時給你真正的 404。 放一個 404.html，未知路徑就回傳真正的 404；沒放的話會退回 index.html 並回 200，這正是單頁應用要的行為。--not-found 兩邊都能覆寫。
    • 乾淨的網址。 /course/ 直接提供 /course/index.html，中間不轉址。回應會公開快取五分鐘。
    • 機器讀的那一面自動生成。 每次部署都會依檔案清單回應 /sitemap.xml、/llms.txt 與 /robots.txt；你自己放同名檔案的話，以你的為準。
    • 同名信箱（可選）。 clize claim yourname --email 會一併開啟 support@yourname.clize.app 收信。

    沒有的東西：沒有視覺化編輯器，你的頁面前面也不會插一頁廣告。HTML 由你自己寫或生成 —— 手寫，或是叫你本來就在用的 agent 寫 —— 部署就把那些位元組原封不動發佈出去。

    // 常見問題

    要怎麼把 HTML 檔案放上線？

    把檔案放進一個資料夾並命名為 index.html，然後發佈那個資料夾。用 Clize 是兩行指令：clize claim yourname 取得免費的 yourname.clize.app，clize deploy ./folder --domain yourname.clize.app 把檔案放到它後面並走 HTTPS。動手之前先把檔案丟進這頁的檢查器，它會找出那些只在你自己電腦上才成立的引用。

    這裡的免費 HTML 空間真的免費嗎？

    是。yourname.clize.app 這個名字、HTTPS 憑證與部署都不用錢，也不用綁卡。你需要一個 Clize 帳號來擁有這個名字，這是為了避免兩個人搶同一個 handle。只有在你要求的東西本來就要花錢時才會付費，例如註冊自己的網域 —— 而且會先報價、先確認，才會扣款。

    只有一個 .html 檔也可以嗎？還是一定要整個網站？

    一個檔就夠了。部署指令接受的是目錄而不是檔案，所以把你唯一那個檔案放進資料夾、命名為 index.html 即可。那個資料夾裡的其他東西會一起上去，之後要加樣式表或圖片也不必更動網址。

    為什麼頁面上線後字型跑掉了？

    因為你在本機看到的字是你電腦裡裝的字。訪客的 Android 手機沒有蘋方或微軟正黑體，如果 CSS 直接寫死這些名稱就會掉回系統預設。把備援字型堆寫完整、加上 font-display: swap，需要指定字型時就把子集化過的 woff2 放進同一個資料夾一起部署。我們不代做字型子集化，工具只會把外部主機列出來。

    用 Google Fonts 載繁中字型會有問題嗎？

    Google Fonts 會用 unicode-range 把中日韓字型切成上百個分片，只送頁面用到的那幾片，所以下載量其實不大。真正的風險是連不連得到：如果你的讀者有一部分在中國大陸，那個網域可能連不上，瀏覽器會等到逾時。檢查器會把每一個外部主機連同行號列出來，那份清單就是你的依賴清單。

    把檔案放進這個檢查器，會被上傳嗎？

    不會。檔案是在你的瀏覽器裡用 FileReader 讀取，並在同一頁的沙箱 iframe 裡繪製。沒有東西送到伺服器，不需要帳號，而且頁面載入之後就算斷網也還能用。

    可以用自己的網域取代免費的 handle 嗎？

    可以。用 clize domain 購買或匯入網域，再用 --domain yourdomain.com 部署上去，DNS 記錄與憑證會在這個流程裡一併設定好。免費的 handle 仍然有效，所以你可以先發佈、之後再決定名字。

    clize claim + clize deploy —— handle 與 HTTPS 都免費

    給這個檔案一個它留得住的網址。

    裝一次、取一個名字、部署一次。handle 在你釋出前都是你的，憑證自動簽發，同一個資料夾要重新發佈幾次都行。

    $ npm i -g @clize/clize && clize login
$ clize claim yourname
$ clize deploy ./site --domain yourname.clize.app
    [ 開始使用 Clize → ]
    延伸閱讀 —— 從桌上的檔案，到別人打得開的東西
    • HTML 檢視器同一套繪製方式，手機、平板、桌機三種寬度；只想看看檔案時用這個。
    • hreflang 產生器等這一頁分成繁中版與英文版時，告訴搜尋引擎哪一版給誰。
    • llms.txt 檢查工具同一個網站給機器讀的那一面，照規格檢查一遍。
    • Sites by Clizeagent 把頁面寫進你的儲存庫，一行部署讓它上線（英文）。
    • Clize 繁體中文網域、電子郵件、部署、收款、媒體生成 —— 給 AI agent 一雙真正的手。