[{"data":1,"prerenderedAt":19},["ShallowReactive",2],{"post-building-this-site-with-nuxt":3},{"post":4},{"slug":5,"title":6,"date":7,"description":8,"tags":9,"author":13,"cover":14,"draft":15,"readingTime":16,"body":17,"html":18},"building-this-site-with-nuxt","這個網站怎麼做的：Nuxt + 檔案式內容，不用資料庫也能很完整","2026-06-28T10:30:00.000Z","拆解 HiHi Digital 官網的技術選擇——為什麼用 Nuxt SSR、為什麼部落格走 Markdown 檔案、聯絡表單怎麼不靠資料庫就通知到我。",[10,11,12],"Nuxt","網頁開發","SEO","HiHi Digital",null,false,2,"\n既然要重做官網，乾脆把過程也寫成一篇文章。這個站的技術選擇其實處處藏著「一人公司」的務實考量：**好維護、好部署、SEO 友善，而且不養多餘的基礎設施**。\n\n## 為什麼是 Nuxt\n\n我需要 SEO，所以純前端 SPA 直接出局——爬蟲看到一片空白可不行。Nuxt 的 SSR \u002F SSG 讓每個頁面都回傳完整 HTML，搜尋引擎和分享預覽都吃得到。\n\n行銷頁（首頁、服務、關於）走預渲染（prerender），純靜態、快到不行；部落格和作品集則用 SSR，新文章一發布就看得到，不用重新建置。\n\n## 不用資料庫，用檔案\n\n對一個內容量不大的官網來說，資料庫是過度設計。所以：\n\n- **部落格**：每篇文章就是一個 Markdown 檔，YAML front matter 放標題、日期、標籤。\n- **作品集**：同樣是 Markdown，多了 `tech`、`links` 等欄位。\n- 一組 **CRUD API** 讓我可以用程式新增／修改文章，但檔案本身永遠是唯一的真相來源。\n\n```bash\n# 新增一篇文章，就這麼簡單\ncurl -X POST https:\u002F\u002Fhihi.digital\u002Fapi\u002Fblog \\\n  -H \"Authorization: Bearer $TOKEN\" \\\n  -d '{ \"title\": \"新文章\", \"body\": \"# 嗨\" }'\n```\n\n## 聯絡表單：收到就通知我\n\n沒有資料庫，那表單資料存哪？答案是——**不存**。表單送出後，API 直接把內容寄到我的信箱，同時推一則 Telegram 給我。我幾乎是即時就會收到，根本不需要登入任何後台去翻。\n\n加上 honeypot 蜜罐欄位和簡單的速率限制，擋掉大部分機器人，乾淨俐落。\n\n## 小結\n\n技術沒有最好，只有最適合。對這個站來說，**少即是多**：少一個資料庫、少一套後台、少一份維運負擔，換來的是更專注、更好維護的成果。\n\n這也是我幫客戶做系統時的一貫信念——不為了技術而技術，只解決真正的問題。\n","\u003Cp>既然要重做官網，乾脆把過程也寫成一篇文章。這個站的技術選擇其實處處藏著「一人公司」的務實考量：\u003Cstrong>好維護、好部署、SEO 友善，而且不養多餘的基礎設施\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003Ch2 id=\"%E7%82%BA%E4%BB%80%E9%BA%BC%E6%98%AF-nuxt\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E7%82%BA%E4%BB%80%E9%BA%BC%E6%98%AF-nuxt\">為什麼是 Nuxt\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>我需要 SEO，所以純前端 SPA 直接出局——爬蟲看到一片空白可不行。Nuxt 的 SSR \u002F SSG 讓每個頁面都回傳完整 HTML，搜尋引擎和分享預覽都吃得到。\u003C\u002Fp>\n\u003Cp>行銷頁（首頁、服務、關於）走預渲染（prerender），純靜態、快到不行；部落格和作品集則用 SSR，新文章一發布就看得到，不用重新建置。\u003C\u002Fp>\n\u003Ch2 id=\"%E4%B8%8D%E7%94%A8%E8%B3%87%E6%96%99%E5%BA%AB%EF%BC%8C%E7%94%A8%E6%AA%94%E6%A1%88\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E4%B8%8D%E7%94%A8%E8%B3%87%E6%96%99%E5%BA%AB%EF%BC%8C%E7%94%A8%E6%AA%94%E6%A1%88\">不用資料庫，用檔案\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>對一個內容量不大的官網來說，資料庫是過度設計。所以：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>部落格\u003C\u002Fstrong>：每篇文章就是一個 Markdown 檔，YAML front matter 放標題、日期、標籤。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>作品集\u003C\u002Fstrong>：同樣是 Markdown，多了 \u003Ccode>tech\u003C\u002Fcode>、\u003Ccode>links\u003C\u002Fcode> 等欄位。\u003C\u002Fli>\n\u003Cli>一組 \u003Cstrong>CRUD API\u003C\u002Fstrong> 讓我可以用程式新增／修改文章，但檔案本身永遠是唯一的真相來源。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-bash\"># 新增一篇文章，就這麼簡單\ncurl -X POST https:\u002F\u002Fhihi.digital\u002Fapi\u002Fblog \\\n  -H "Authorization: Bearer $TOKEN" \\\n  -d '{ "title": "新文章", "body": "# 嗨" }'\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"%E8%81%AF%E7%B5%A1%E8%A1%A8%E5%96%AE%EF%BC%9A%E6%94%B6%E5%88%B0%E5%B0%B1%E9%80%9A%E7%9F%A5%E6%88%91\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E8%81%AF%E7%B5%A1%E8%A1%A8%E5%96%AE%EF%BC%9A%E6%94%B6%E5%88%B0%E5%B0%B1%E9%80%9A%E7%9F%A5%E6%88%91\">聯絡表單：收到就通知我\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>沒有資料庫，那表單資料存哪？答案是——\u003Cstrong>不存\u003C\u002Fstrong>。表單送出後，API 直接把內容寄到我的信箱，同時推一則 Telegram 給我。我幾乎是即時就會收到，根本不需要登入任何後台去翻。\u003C\u002Fp>\n\u003Cp>加上 honeypot 蜜罐欄位和簡單的速率限制，擋掉大部分機器人，乾淨俐落。\u003C\u002Fp>\n\u003Ch2 id=\"%E5%B0%8F%E7%B5%90\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E5%B0%8F%E7%B5%90\">小結\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>技術沒有最好，只有最適合。對這個站來說，\u003Cstrong>少即是多\u003C\u002Fstrong>：少一個資料庫、少一套後台、少一份維運負擔，換來的是更專注、更好維護的成果。\u003C\u002Fp>\n\u003Cp>這也是我幫客戶做系統時的一貫信念——不為了技術而技術，只解決真正的問題。\u003C\u002Fp>\n",1782813557724]