招商網站範本:靜態站也能有後台、表單,和一道隱私防火牆
替停車場委託經營公司做的招商網站範本——零月費後台、一支函式處理表單,以及一個把「客戶搜不到業主」寫進建置流程的設計。給每一個「有領域、有客戶、沒工程」的中小企業參考。
這是一個招商網站的範本:停車場委託經營公司要說服地主「把閒置土地交給我們,每月領固定租金」。品牌是虛構的,案例是示意的,但整套工程是真的,而且跑在線上:示範站。
需求方給的條件很典型——手機為主的客群、要好搜尋、要有後台自己發案例和消息、要有聯絡表單,而且不能有月費。以下是我們怎麼在這些條件下做決定。
靜態站,但不犧牲後台與表單
框架選 Astro:靜態輸出、預設零 JavaScript,SEO 與手機效能天生就好;內容集合(Content Collections)自帶 schema 驗證——後面會看到,這是隱私防火牆的技術基礎。
後台用 git-based CMS:編輯器跑在瀏覽器,按存檔就是一個 commit,圖片直接進版本庫,零伺服器、零月費。表單是整站唯一需要「後端」的地方,用託管平台的一支 Function 接收、交給郵件服務寄出,免費額度一個月三千封,綽綽有餘。驗收用 Playwright 煙霧測試加 Lighthouse CI,四種螢幕寬度整頁截圖交人工 UI 驗收。
一個小決定值得一提:中文字型用系統字型堆疊,不載網頁字型。CJK 網頁字型單一字重就要 4–8 MB,會直接拖垮手機的最大內容繪製時間(LCP)——為了品牌感犧牲首屏速度,對一個以手機地主為客群的招商站,不划算。
隱私防火牆:靠「資料不存在」,不靠「藏起來」
需求書第七點:客戶不能從成功案例搜尋到業主是誰。這條規則如果只靠發文者自律,遲早會破。我們把它做進建置流程,分三層:
- Schema 根本沒有識別欄位。案例的資料結構只有縣市與行政區、業主化名(正規表示式限制格式,「王先生」「某製造業公司」可以,全名不行)、坪數、席數;schema 設為嚴格模式,任何人多加一個
ownerName之類的欄位,建置直接失敗。 - 發布前文字掃描。一支腳本掃過所有內容,出現街道門牌、地號地段、電話、Email、LINE ID、地圖連結就中止建置——公司自己的聯絡方式在白名單裡。這支腳本掛在
build指令前面,本機和 CI 都跑,繞不過。 - 圖片中繼資料。CMS 上傳時轉 WebP 並移除 EXIF;檢查腳本再驗一次 GPS 與作者欄位,可以自動修復。
然後我們把這件事寫在案例頁、頁尾和「關於我們」——保護業主本身就是招商的賣點。工程上的一條約束,變成了行銷上的一句承諾。
收益試算器:十秒鐘給地主一個直覺
落地頁最強的互動誘因,是讓地主輸入坪數和縣市,立刻看到「大概每月能領多少」的區間。純前端、無框架、數字明確標示僅供參考。你會發現這和我們官網上的分潤試算機是同一個想法:與其說服,不如讓對方自己算。
踩過的坑:兩組 CSP 取交集
安全標頭收得很緊——整站沒有外部腳本,內容安全政策(CSP)可以幾乎鎖死。但後台頁面要載入 CMS 套件、呼叫 GitHub API,需要另一組較寬的 CSP。上線後後台一片空白。
原因是託管平台會把 /* 與 /admin/* 的標頭合併,兩個 CSP 同時存在時瀏覽器取交集,結果比兩者都嚴。解法是在後台路徑先明確卸除全站的 CSP,再重新指定一組。這種坑沒有錯誤訊息,只有一片空白;我們把原因寫進設定檔的註解,留給下一個人。
另一個小紀律:CI 在沒有設定部署機密時會直接略過部署工作,而不是失敗——讓任何人 fork 這個範本都能拿到綠燈,不必先有帳號。
誠實的現況
這是一個範本與示範站:品牌虛構、案例示意、一天完成初版。它的價值不在內容,在於一套可以複用的做法——靜態、零月費、有後台、有表單、隱私由建置流程保證。對於很多「有領域專業、有客戶、但沒有工程團隊」的中小企業與創作者,官網該有的樣子,大概就是這樣。
想聊聊你的產品想法,歡迎來信。