零成本！實體小店3天架好官網：用Hugo+Cloudflare永久免主機費

前言：

身為實體店家，我們深知流量固然重要，但真正能將潛在顧客導進店裡的資訊才是核心。因此，這篇文章不追求譁眾取寵，而是以實體店家的角度，分享如何以最低成本、最短時間，打造一個能有效傳達資訊的網站。告別複雜的技術細節，讓您專注於經營本業，同時擁有一個專業的網路門面。

為什麼選擇 Hugo + Cloudflare？

在AI時代，架站不再是技術門檻高的任務。透過Hugo這個靜態網站產生器，搭配Cloudflare的免費服務，我們成功打造出一個功能完善、易於維護的網站。相較於其他架站方式，Hugo + Cloudflare的優勢在於：

低成本： 除了域名費用，架站本身完全免費。
快速： 網站生成速度快，更新部署也十分便捷。
易維護： 採用Markdown語法撰寫內容，簡單易學。
安全性： Cloudflare提供DDoS保護等安全功能。
SEO友好： 靜態網站結構有助於搜尋引擎優化。

3天完工實操流程（避坑指南） #

Day 1️⃣ 裝工具+本地建站

# 1. 裝Hugo（選extended版！windows記得設定環境變數。）
https://gohugo.io/installation/

# 2. 一鍵生成網站框架（命令行執行）
hugo new site my_shop  # 創建文件夾
cd my_shop  # 進入目錄

# 3. 安裝主題（關鍵！避開版本衝突）
# 改用穩定主題Ananke（兼容新版Hugo）
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

# 4. 本地預覽
hugo server -D  # 瀏覽器打開 http://localhost:1313

⚠️ 注意

避坑重點：

注意 theme 對 hugo 版本的需求，我在這裡浪費了不少時間。
用hugo version檢查版本，Cloudflare需同步設置（後述）

Day 2️⃣ 極簡改造：讓AI幫你改版型，傳說中的 vibe coding
不需要懂CSS！只需把需求告訴AI即可。改完後儲存即可看到網站跟著變動，來回修改到滿意為止。

Day 3️⃣ 部署到Github

# 1. 注冊GitHub賬號 > 新建倉庫（如 my_shop_site）
# 2. 本地文件推上GitHub（命令行執行）
git init
git add .
git commit -m "第一次上傳"
git branch -M main
git remote add origin https://github.com/你的賬號/my_shop_site.git
git push -u origin main

最後一步：綁定Cloudflare

登入Cloudflare > Workers & Pages
選 pages > 建立 > 連GitHub選倉庫 > 構建設置：
- Framework preset: Hugo
- Environment variables (高級) 加:
  HUGO_VERSION = 你本地用的版本（如 0.125.3）
部署完成！獲得 你的店名.pages.dev 免費網址

❝

🔑 綁定自有域名：到 自訂網域 添加域名 → 按提示改DNS
官方文件）

日常更新：像寫筆記一樣簡單 #

打開/content/posts/文件夾
新建促銷活動.md，開頭寫：

---
title: "6月新品上市！好久不見!焦糖瑪奇朵!"
date: 2025-06-11
---
即日起，菜單上出現了許久不見的焦糖瑪奇朵！
巫師自製熬煮的特製焦糖醬陪你過個甜滋滋的暑假!  
👉 營業時間：每日15:00-19:00

執行：

git add .
git commit -m "更新促銷活動"
git push

✅ 3分鐘後網站自動更新

💡 為什麼實體店該用靜態站？

成本歸零：無需月費主機，抵禦流量波動
拒絕維護焦慮：無資料庫/外掛，永不中毒
專注生意本質：官網是資訊板，不用技術競賽

ℹ️ 提示

花3天建站，省下每年$200+主機費，
把時間留給產品研發和顧客服務。

結論：

Hugo + Cloudflare架站流程簡化到最低技術含量，讓小型創業者也能在短時間內擁有一個專業的網路門面。將時間和精力投入在產品開發和深度內容撰寫上，才是更重要的任務。

免責聲明：

本文僅提供架站流程參考，實際操作可能因環境設定而有所差異。請根據自身情況調整操作步驟。