架站筆記

想要一個自己的角落放連結跟正在做的東西，順便當練習場：網域、部署、HTTPS、表單、要登入才看得到的頁面、最基本的防護——把一整輪流程自己走過一次，而不是只照著教學把畫面做出來。

功能都刻意做小，能動、看得懂、之後回來改不會怕就好。不是商用，也沒有要衝流量或做什麼很厲害的東西。

1. 先寫一個打得開的檔案

   單一個 index.html，用瀏覽器直接開。沒有框架、沒有建置流程、什麼都不用裝。這階段唯一的目標是畫面出得來。

2. 進版本控制

   丟進 Git、推上 GitHub。一開始覺得自己一個人用不到，直到改壞東西想退回前一版才知道為什麼要。

3. 接上部署平台

   Netlify 綁 GitHub repo，指定要公開的目錄。之後每次 push 就自動重新部署，不用手動上傳檔案。

4. 掛自己的網域

   買網域之後改 DNS 指到部署平台，等生效。HTTPS 憑證是平台自動簽的，另外開 HSTS，讓瀏覽器之後只用 HTTPS 連。

5. 需要「後端」的部分

   聯絡表單跟登入後的資料同步沒辦法純前端做——金鑰寫在前端等於公開。改成 serverless function：瀏覽器只呼叫自己站上的 API，真正的 token 存在平台的環境變數，不進原始碼也不進 repo。

6. 資料存哪裡

   沒有架資料庫，用一個私有的雲端 JSON 檔當儲存體，由 function 代為讀寫。這個規模夠用，但不能查詢、也擋不住同時寫入，真要長大得換成正式的資料庫。

7. 私人內容不寫死在頁面裡

   只有我自己要看的東西一律登入後才從雲端拉，原始碼裡一句都不留。這樣「檢視原始碼」看到的永遠是乾淨的，不會因為哪次忘記清掉就外洩。

8. 排程

   每天固定時間跑一次排程 function 做待辦提醒，時間寫在部署設定檔裡。

這部分是我查最久的。整理一下做了什麼、以及為什麼要做：

• 密碼不存明碼。伺服器只留雜湊，比對時用固定時間的比較方式，避免從回應快慢反推答案。
• 驗證一律放在伺服器。前端把畫面藏起來不算防護——知道 API 網址的人可以直接打。所以每一個讀寫動作都在後端重新驗一次身分，前端只是介面。
• 連續試錯會被冷卻。同一個來源短時間內失敗太多次就先擋一段時間，讓慢慢猜密碼變得不划算。
• 登入紀錄只能讀不能寫。稽核紀錄由伺服器單方面寫入，前端沒有覆寫它的權限——不然有人進來第一件事就是抹掉自己的足跡。
• 上傳擋掉會被執行的檔案類型。網頁、腳本、執行檔一律不收，下載時也一律當成二進位檔回傳，不讓它有機會被當成網頁跑起來。
• HTTP 安全標頭。用 CSP 限制腳本跟樣式只能從指定來源載入，另外禁止被內嵌（點擊劫持）、關掉 MIME 猜測、限縮 referrer 與相機麥克風權限。
• 表單擋機器人。隱藏的誘餌欄位加上 reCAPTCHA，而且是在後端驗，不是送出前擋一下就算了。
• 內部檔案不對外。靜態站等於整個資料夾公開，所以筆記 .md、函式目錄這些要另外設成 404，不然網址猜對就被讀走。

這份清單是「一個新手查得到、也做得到的部分」，不是完整的威脅模型。真正的資安我還差得遠，只是覺得既然要練，就不要把明顯的洞留著。

程式碼大部分是 AI 寫的，我做的是決定要什麼、看結果對不對、不滿意就退回去重講。這點沒什麼好遮的，但也不代表就不用懂——不懂的話連它寫錯了都看不出來。

幫助最大的其實不是打字快，是它會在我沒想到的地方提醒，例如「這個檢查只做在前端，後端沒擋」。安全性那一段有一半是這樣被挖出來的。

踩過的坑是：它給的東西看起來很完整，但不等於是對的。有幾次照做上線才發現行為跟預期不一樣，最後還是得自己去讀文件、翻 log。所以我盡量讓每次改動都小、都能退回去，寧可慢一點。

• 純靜態 HTML／CSS／JS，沒有前端框架、沒有建置流程
• Netlify 部署＋Netlify Functions（登入後的雲端同步、聯絡表單、排程提醒）
• 私人內容存在 secret Gist，登入後才動態載入
• GSAP 做開場動畫，載入失敗有 CSS fallback