Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

🚀 靜態網站建置 SOP 手冊

基於 ming-travel-blog(travel.minglab.tw)和 ming-website(minglab.tw)的真實開發經驗 搭配 OpenCode AI 協作,一人 + AI 即可完成

目錄

序章

技術架構 — 一句話解釋

你的網站 = 純 HTML 檔案,放在全世界最快的 CDN 上

Astro v6(把內容編譯成超輕量 HTML)
  + Tailwind CSS v4(自動生成最小化的樣式)
  + Markdown(寫文章跟打 Word 一樣簡單)
  + Sveltia CMS(瀏覽器開後台,填表單就更新網站)
  + Cloudflare CDN(全球 330+ 城市都有伺服器)
  + GitHub Actions(照片上傳自動壓縮 90%)

結果:零伺服器、零資料庫、零月費、零維護、永遠不會被駭

跟其他方案比

我們的方案WordPressWix / Squarespace找人客製
建置費一次性一次性
月費$0$5-25$16-40$0
主機費$0$5-30/月內含$5-30/月
載入速度< 1 秒2-5 秒2-8 秒看品質
SEO 評分95+70-9060-80看品質
安全性無法被駭需定期更新平台負責需維護
備份GitHub 永久需外掛平台負責需自己來
搬家一鍵搬走可匯出困難困難
後台表單式直覺功能多但複雜拖拉式不一定
照片管理自動壓縮 90%需外掛自動不一定
專業信箱✅ 免費NT$200-300/月❌ 自費加購NT$200-300/月
監控告警✅ 免費需外掛平台內建需自行
自動化驗證✅ 一鍵 audit.sh
手機版自動適應(含上傳壓縮)看主題看品質
原始碼客戶擁有
被平台綁架完全沒有有一點嚴重沒有

14 大優勢

#優勢對客戶的意義
1永久零月費網站做好後永遠不用再付錢,唯一成本是網域年費
2全球極速Cloudflare CDN 330+ 城市有節點,載入 < 1 秒
3無法被駭無資料庫 = 無 SQL injection,無後端 = 無伺服器入侵
4SEO 天生高分純 HTML 網站 Google 最愛,載入快 + 結構乾淨
5客戶零門檻瀏覽器 → 後台 → 填表單 → 儲存 → 自動更新
6永遠不會壞無伺服器、無套件更新、無版本不相容
7原始碼是客戶的放在客戶自己的 GitHub 帳號下
8照片自動壓縮JPG 上傳 → 自動轉 WebP,檔案縮小 90%
9可以無限複製同一個架構快速生出多個不同主題的網站
10無平台綁架搬家只需把 HTML 丟到任何主機
11專業信箱內建info@你的網域,Cloudflare Email Routing 免費,不用買 Google Workspace
12網站掛了先知道UptimeRobot 每 5 分鐘監控,掛了寄 Email,比客戶早一步
13交付前自動驗證audit.sh 一鍵 5 階段檢查(dead link + sitemap + localhost + GitHub Pages + 全頁面 200),其他公司沒在做
14手機上傳零負擔瀏覽器自動壓縮大照片(>1MB),客戶不用裝任何 App,選照片直接傳

7 個限制(以及解法)

#限制影響解法
1更新延遲 2-3 分鐘儲存後不會秒更新CDN 全球同步正常時間
2無法做會員登入不適合帳號系統第三方服務即可
3無法做購物車不適合電商Shopify 更適合電商
4照片約 200-500 張長期大量需管理定期清理即可
5無法即時留言無內建留言板Disqus / Facebook Comments
6單人編輯一個編輯者共用 GitHub 帳號
7部分英文介面Sveltia CMS 按鈕是英文有完整中文使用說明

適合的客戶類型

客戶類型適合度說明
🧳 旅遊部落客⭐⭐⭐⭐⭐最完美方案,內建目的地管理、Lightbox
📸 攝影師作品集⭐⭐⭐⭐⭐Lightbox + 自動 WebP + 分類標籤
🏢 小型企業形象站⭐⭐⭐⭐關於我們、服務介紹、聯絡表單
✍️ 個人品牌 / KOL⭐⭐⭐⭐⭐部落格 + 社群連結 + 零維護
📚 知識庫 / 文件站⭐⭐⭐⭐Markdown 原生支援
🛒 電商沒有購物車和金流
👥 社群平台沒有會員系統
📊 SaaS 產品頁⭐⭐沒有後端 API

跟傳統網站公司比

客戶會問傳統網站公司我們
「做好多少錢?」NT$ 50,000-150,000NT$ 25,000-50,000
「以後還要付什麼?」主機費 NT$ 3,000-10,000/年 + 維護費$0
「我能不能自己更新?」工程師時薪 NT$ 1,200-2,500/小時自己開瀏覽器寫文章
「三年總成本?」NT$ 60,000-200,000+NT$ 25,000-50,000(一次性)
「不滿意可以搬家嗎?」困難隨時,原始碼是你的

量化指標

指標數據評價說明
原始碼大小~4 MB🟢不含 node_modules,極輕量
GitHub Repo~24 MB🟢佔免費 1GB 配額的 2.4%
頁面數量19 頁(含 RSS)🟢含首頁、部落格、目的地等
Build 時間< 1 秒🟢Astro 靜態生成
部署時間1-2 分鐘🟡Cloudflare CDN 同步
Lighthouse95+🟢靜態網站天生高分
圖片空間4 張 / 1.9 MB🟢Actions 自動轉 WebP
程式碼重複0🟢無冗餘
閒置檔案0🟢已清理乾淨

這是商業模版嗎?

是,而且是最理想的商業模版。 只需幾個步驟就可複製給新客戶:

要改的時間
config.yml — 調整 collection 欄位30 分
.astro 頁面 — 改配色、Logo 文字20 分
astro.config.mjs — 改 site URL1 分
內容 .md — 清空,填客戶自己的20 分

從零到上線:3-5 小時。

客戶溝通金句

「你的網站跟 Google、Facebook 跑在同一條高速公路上。」
「沒有伺服器 = 沒有月費 = 不會被駭。」
「三年後你只會付網域費,網站還是一樣快。」
「你寫文章,其他全部自動化。」
「這不是省錢,這是把錢花在對的地方。」

[[#table-of-contents|← 回目錄]]