Jun Lin 作品集網站複盤｜AI BLOG

我想做一個能撐住海外商業機會的作品集網站，但文案不能說滿技術掌握度。

舊站砍掉重練，換成一套幾乎不用伺服器的架構

原本的網站在重建前已整個刪除，新版從設計稿與決策文件重新蓋起，每次只做一件能做的任務並留下驗收證據。大部分頁面像印好的傳單，建置時就固定；只有聯絡表單在訪客送出那刻才需要程式即時寄信，這是為了讓表單真的能收信而接受的取捨。

note技術細節：技術骨架與部署方式

Next.js App Router + TypeScript + Tailwind CSS，內容頁全部是建置期靜態預渲染，只有 /api/contact 是伺服器端函式。文案用型別化資料檔管理，不接內容管理系統。部署走 GitHub 私有倉庫接 Vercel 自動部署，push 到主分支即上線正式環境，沒有預覽保護關卡，是接受的部署風險換取流程單純。

多語系、部落格、流量分析，因外部條件重新啟用

多語系、部落格、Google Analytics 這三件事，決策文件上留著當初「不做」的理由，也補上外部條件改變才推翻的原因：海外商機讓語言版本補齊，筆記庫的發佈管線讓部落格重新有內容，海外洽談讓流量分析多加一層工具。

note技術細節：三個決定的取捨

繁體中文版網址維持原樣，不加任何路徑前綴；英文與日文版才加前綴，讓既有搜尋收錄不受影響。三份字典（繁中／英／日）以繁中為型別基準，欄位不齊在編譯期就報錯。翻譯是 AI 直接產出英日文草稿上線，沒有人工審閱關卡，日文語感風險是已知並接受的。 Google Analytics 與 Vercel 內建的分析工具並存，兩者都不做隱私合規的同意橫幅，歐盟訪客未經同意就被追蹤的曝險，是明知並承擔的決定。

部落格文章正本不在這裡，只負責搬過來顯示

文章正本在另一個筆記庫專案，那邊自動潤稿發佈成文章，這個網站用同步腳本把文章和圖片複製過來陳列，不負責生產。

flowchart LR
    A[筆記標記完成] --> B[自動潤稿與發佈]
    B --> C[同步腳本搬運文章與圖片]
    C --> D[人工確認後手動提交]
    D --> E[網站正式站顯示文章]

檔案不能手動改，下次同步就整個覆蓋，也不會自動推上正式環境。

note技術細節：同步管線踩過的坑

建置設定曾經把整個內容資料夾排除在建置範圍外，導致文章本機能建置成功、上線後卻整個消失且沒有錯誤訊息，改成逐檔列出才修好。同步腳本寫入的文章檔案帶了 Windows 換行符號，讓 Markdown 摺疊區塊語法渲染時整個失效變回普通引用區塊，同樣不會報錯，得在渲染入口統一正規化換行符號才根治。這類問題共同點是建置綠燈但畫面是壞的，後續驗收改成親自打開瀏覽器核對畫面。

表單寧可讓人看到失敗，也不假裝成功

這個網站沒有資料庫，聯絡信本身就是唯一紀錄，若失敗還顯示成功，找上門的人就會無聲消失、我也不會知道。失敗時直接顯示錯誤並秀出信箱地址；驗證也直接對正式站送真實請求，刻意讓寄信金鑰失效來確認畫面真的會顯示錯誤。

對外用詞有紅線，交給機器掃描比較可靠

文案不誇大成一己之力寫出所有代碼，統一說「一人 AI 協作開發」，產業定位寫「遊戲產業」。這套規則也套用在筆記庫同步過來的文章，禁用詞清單由腳本在三語驗收時機械掃描全站文案，防止示範用詞這類禁用字眼混進正式站。

note技術細節：措辭掃描怎麼做

禁用詞清單用正則表達式分別維護中文、英文、日文三份，由一支驗證腳本在三語驗收時機械掃描全站文案與同步進來的文章。筆記庫端修正分兩處：把潤稿提示詞裡的示範用詞換掉，並在既有的人稱代詞正規化檢查步驟裡加一道新的收斂規則，走同一條檢查管線。