用 Astro + Cloudflare 免費架設個人部落格：從零到自訂網域

想做一個自己的部落格或官方網站，條件很簡單：載入要快、不怕流量突然變多、內容握在自己手上，而且成本越低越好。試過幾種做法之後，我選了 Astro 加上 Cloudflare。這篇文章把整個流程記下來，從寫第一篇文章到綁定網域，也包含一些應注意的小細節。網站上線之後怎麼讓搜尋引擎找到它，也就是SEO的部份，我另外寫成了一篇，文末有連結。

這個架構怎麼運作

整個網站其實就是一堆事先做好的靜態 HTML 檔案。在電腦上用 Markdown 寫文章，Astro 把它們轉成網頁，再用 Cloudflare 的工具上傳，讀者打開網址時，看到的就是這些現成的檔案。

從寫 Markdown、建置、部署到 Cloudflare 全球節點與讀者的流程圖

這樣的好處是沒有資料庫、也沒有後端程式要維護，另外，Cloudflare 官方文件寫明靜態資源的請求是免費且不限量的，沒有流量費用，所以就算某一篇文章突然被很多人看到，也不會被限速或多收費。

值得留意：沒有網頁後台，寫完文章要在自己的電腦上執行指令才會更新。對會寫程式的人來說這很自然，但如果你習慣在瀏覽器裡直接發文，會需要稍微學習一下。

事前準備

Node.js 20.3 以上：Astro 需要，到官網下載 LTS 版本安裝即可。
一個免費的 Cloudflare 帳號。
一個網域：選用。沒有的話，Cloudflare 會給你一個免費的 workers.dev 網址，可以先上線測試。

本篇使用的是 Windows系統，如果第一次在 PowerShell 輸入 npm install 時，直接出現「無法辨識 npm」。原因是還沒安裝 Node.js；或是剛裝完，卻沒有關掉舊的終端機視窗重新開啟，所以系統還讀不到新的設定，裝完之後一定要重開終端機，再用下面兩行確認：

node -v
npm -v

專案結構

用 Astro 建好專案之後，真正需要認得的位置只有幾個：

專案資料夾裡文章、頁面、public、設定檔與 dist 各自的用途

其中最重要的是 src/content/posts/：每一篇文章就是一個 .md 檔，開頭用 frontmatter 寫標題、摘要、日期與分類，大概長這樣。

---
title: 標題
description: 摘要
pubDate: 2026-10-31
tags: [Astro, 架站]
draft: false
---

內文。

Astro 的 Content Collections 可以替這些欄位設定格式檢查。如果日期寫錯或漏了標題，建置時就會直接報錯，不會等上線後才發現。

寫完之後，在專案資料夾執行下面預覽的指令，就能在 http://localhost:4321 即時預覽：

npm run dev

部署到 Cloudflare

Cloudflare 現在建議新專案使用 Workers 的靜態資源（Static Assets） 來放靜態網站，可以用 Wrangler 直接從電腦上傳，不需要把原始碼放到 GitHub。設定只要一個 wrangler.jsonc：

{
  "name": "my-blog",
  "compatibility_date": "2026-10-29",
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

第一次部署先登入，之後每次更新只要一行：

npx wrangler login
npm run deploy

npm run deploy 在我的專案裡是「先 astro build 建置，再 wrangler deploy 上傳」，大約一分鐘就會更新。

這裡有個很容易搞混的地方：第一次部署時 Wrangler 會請你註冊一個 workers.dev 的子網域，但網站的完整網址是「專案名稱」加上「子網域」，也就是 專案名稱.你的子網域.workers.dev。只打開子網域本身，會看到錯誤頁。

綁定自訂網域

我的網域買在 Cloudflare，因為 DNS 和憑證都在同一個地方，綁定省事。更方便的是，網域設定可以直接寫在 wrangler.jsonc 裡，部署時自動完成：

"routes": [
  { "pattern": "thehoblog.com", "custom_domain": true }
]

重新執行 npm run deploy，終端機會顯示網域已綁定，Cloudflare 會自動建立 DNS 紀錄與 SSL 憑證。第一次可能要等幾分鐘，憑證簽發前瀏覽器會警告連線不安全，稍等再重新整理就好。

加了 routes 之後，Wrangler 會跳出兩個警告，說 workers.dev 網址與預覽網址被停用了，這不是錯誤，只是因為綁了自訂網域，預設改成只留一個入口。對 SEO 反而有利，因為網站只剩一個網址，不會出現重複內容。

處理 www 的轉址

一般使用者習慣在網址前輸入 www，如果沒處理，這個新網址會打不開。做法是另外部署一支很小的 Worker，只負責把 www 用 301 永久轉址到主網域：

thehoblog.com 直接提供網站，www 版本經由轉址 Worker 導回主網域

export default {
  fetch(request) {
    const url = new URL(request.url);
    url.protocol = 'https:';
    url.hostname = 'thehoblog.com';
    url.port = '';
    return Response.redirect(url.toString(), 301);
  },
};

主網站依然是純靜態，不經過任何程式；只有 www 的流量會走這支小 Worker，所以不會占用主網站的額度。

接下來：讓搜尋引擎找到你

網站能打開，只代表讀者「知道網址」的時候看得到。要讓人透過搜尋找到你，還需要設定 sitemap、結構化資料，並到 Google Search Console 驗證網站、提交收錄。這部分步驟比較多，我另外整理成一篇：Astro 部落格的 SEO 設定與 Google Search Console 教學。

容易出錯的細節整理

npm 無法辨識：沒安裝 Node.js，或安裝後沒有重開終端機。
網站打不開：workers.dev 的完整網址要有專案名稱，不只是子網域。
Wrangler 的兩個警告：綁定自訂網域後的正常現象，不是錯誤。
www 打不開：需要另外處理轉址。

SEO 與 Search Console 的部份：另外整理在這一篇。

這套做法適合誰

如果你會用終端機、想要速度快又幾乎不花錢、而且希望內容完全握在自己手上，這套很適合。缺點也很明確：沒有網頁後台，發文要在電腦上操作，網站也不會自動幫你處理留言或搜尋，這些都得自己再加。

# Astro # Cloudflare # 架站