個人網站的搭建小記

　　今年年初，在 Cloudflare 購買了一個域名，原打算用作軟件官網。可由於種種原因，軟件的開發終止，域名也就此閒置。

　　後來在網絡上閒逛，偶然看到一些博主分享搭建個人網站的經歷，便萌生了自己建站的念頭。於是就此詢問 Gemini（當時通過學生認證獲贈了會員）。

　　在它的引導下，加之先前學過一些相關知識，很快便開始實踐。確定網站的用途、架構等基本方向後，就著手在本地搭建雛形。

　　起初考慮過 WordPress、Ghost、Hexo、Hugo、Typecho 等建站工具，但瞭解一番後，總覺得不大合心意，有些配置起來又嫌麻煩，最終都未採用。

　　我的想法其實很簡單：搭建一個能夠存放文章、記錄生活的個人網站。既然如此，索性自己做一套管理系統和前端，往後需要什麼功能，再慢慢添上便是。

　　最先著手的是後臺。

　　在與 Gemini 的協作下，確定了幾項基本技術。使用 Tiptap 作為富文本編輯器，Cloudflare Pages 部署網站，Functions 處理後臺請求，D1 存放文章等數據，R2 則用於存儲圖片、音頻及視頻文件。

　　技術方案確定後，便開始設計管理界面，希望將文章編輯、媒體上傳、內容發佈等操作集中起來，方便日後維護。

　　其中，文章編輯器花了不少工夫。Tiptap 雖提供了基礎框架，但工具欄、圖片插入、排版、保存等功能仍需逐一配置。此外，還得處理標題、摘要、分類、封面、發佈日期、草稿及文章修改等事項。

　　寫文章時難免需要插入圖片或影音，於是又建立了媒體庫。上傳的文件交由 R2 存儲，相關信息則記錄在數據庫中，以便日後查找和調用。

　　隨網站內容逐漸增多，後臺也陸續加入了關於頁、友鏈、留言、訪問統計及網站設置等管理功能。

　　這些功能是相互關聯的。比如說，文章編輯完成後，內容需要通過接口寫入數據庫；訪問者打開文章時，前端再讀取已發佈的內容並展示出來。中間若有哪個環節出了問題，便得重新檢查。

　　所幸網站主要供自己使用，倒也不必一開始就考慮得十分周全。缺什麼便補什麼，哪裡不合適就改哪裡。

　　如此反覆，後臺漸漸有了如今的模樣。當然，至今仍有不少需要完善的地方。

　　後來，我又開始使用 OpenAI 的 Codex，開通會員後，便讓它根據我的要求修改網站頁面、完善功能。

　　它的確幫了我不少忙。

　　前端主要負責將後臺存儲的文章、圖片及其他資料呈現給訪問者。最初只做了文章列表與正文頁面，後來逐漸加入分類、分頁、搜索等功能。

　　功能實現後，又開始琢磨頁面的樣式。

　　字體、字號、行距、段首空格、兩端對齊，以及標題、引用、圖片說明等，都需要逐一調整。為了讓不同頁面保持一致，也將一些重複使用的樣式與組件統一起來，方便日後修改。

　　圖片要考慮橫幅、豎幅及多圖排列，音頻和視頻則需要相應的播放控件。再加上手機、平板和電腦的屏幕尺寸不同，還得分別適配。

　　有時在電腦上看著十分滿意，換到手機上卻又不對勁；淺色模式調好了，深色模式又出現問題。於是改了又改，偶爾折騰半天，最後竟又恢復原樣。

　　除了文章頁面，還陸續製作了關於、友鏈、留言等頁面。其中，關於頁用於介紹自己，友鏈頁收錄喜歡的獨立博客，留言頁則供訪客交流。

　　因為平日喜歡京劇，又專門做了一個京劇欄目，用於整理劇本、唱段及伴奏等資料。

　　此外，還處理了 RSS 訂閱、網站地圖、文章元數據及搜索引擎優化等事項。文章發佈後，前端可以直接讀取數據庫中的公開內容，省去了每次更新文章都要重新部署網站的麻煩。

　　起初只是想找個地方寫文章，不知不覺間，網站的功能卻越來越多。有些甚至是使用過程中臨時想到的，便又讓 Codex 幫忙實現。

　　就這樣，一邊使用，一邊修改，漸漸搭建成了今天的CRIVU。

　　近來又開始調整網站的整體設計，希望頁面更加簡潔、統一。

　　前些天重新設計了桌面版的關於頁，將個人資料、正文介紹及統計信息分成三個欄目；其他頁面也在逐漸統一字體、間距和佈局，儘量減少不必要的裝飾。

　　此外，因朋友反映網站訪問緩慢，又使用ITDOG、Google PageSpeed Insights等工具進行測試。結果發現，不同地區的訪問速度存在差異，移動端效能也還有不少提升空間。

　　於是又開始著手排查和優化。至於最終能改善多少，還得等實際測試後才知道。

　　回頭想想，從年初一個閒置的域名，到如今能夠正常使用的網站，其間添添改改，倒也花了不少時間。

　　不過，折騰網站實在容易忘記時間。這兩日忙完，就暫且告一段落吧。

　　畢竟還有功課要複習，總不能把時間都花在這裡。至於剩下那些不完善的地方，留待以後再說罷。