AI讓我們搭建個人網站不再是遙不可及的夢想
整理版優先睇
AI降低門檻，個人網站不再遙不可及——作者親身分享由零重建博客嘅完整流程
作者limowan嘅朋友話佢個個人博客成年冇更新，令佢決心重構。佢一直覺得個人網站係瞭解一個人嘅最佳窗口，可以展示文章、項目、自我介紹，比微信公眾號或小紅書更完整。以前技術門檻高，但隨住AI編程興起，呢個障礙已經唔再係問題。
作者今次完全自己由頭搭建，先設計導航框架，再用AI幫手做頁面Demo。佢特別在意個人特色，將常見嘅Claude風格改為自己嘅配色同SVG圖標，仲加入隨機文章按鈕同數據統計後台。之後佢用工具下載公眾號文章，用AI分類打標籤，花咗三個幾鐘。
框架揀咗輕量嘅Astro，因為靜態頁面唔需要重型數據庫。最後佢用開源Skill做SEO優化同安全審查，防止惡意刷量。整體結論係：個人網站仍然好有價值，AI令整件事變得容易，希望呢次分享啟發更多人嘗試。
- 個人網站係最好嘅自我展示窗口，AI令技術門檻大幅降低，未來更多人會開始做博客。
- 設計先定導航框架，再逐頁做Demo，避免後期大改；加入個人特色（如SVG圖標、有趣404提示）避免模板化。
- 用AI下載公眾號文章並自動分類打標籤，雖然慳咗好多時間，但都要三個幾小時先做完。
- 靜態網站揀Astro框架，輕量靈活，唔需要重型數據庫，適合個人博客。
- 必須做SEO優化同安全審查，用開源Skill模擬黑客攻擊檢測漏洞，保障數據準確。
SEO Audit Skill
開源SEO審計Skill，用嚟檢查網站SEO問題，提升搜索引擎收錄。
安全審查Skill
開源安全審查Skill，模擬黑客攻擊視角找出網站漏洞。
點解要做個人網站
作者覺得個人網站係別人瞭解你嘅最好窗口——可以放文章、項目、自我介紹，圖文影片都得。微信公眾號或小紅書都做唔到呢種完整展示。
以前個人網站技術門檻高，但AI編程令呢個門檻低咗好多。作者上年仲用現成搭建工具，今次已經可以全部自己重構，預測未來會愈來愈多人開始做博客。
個人網站係瞭解一個人嘅最佳窗口
AI編程令門檻再唔係遙不可及
頁面設計：由框架到Demo
作者先定好博客嘅導航目錄：AI、隨筆（東想西想）、閲讀三個模塊。每個模塊嘅介紹都係同AI討論出嚟，想有趣啲。
先定導航框架，再去設計，就會好快
主引導標語揀咗Reading、Thinking、Building，概括佢嘅狀態。404頁面提示語「你揾嘅嘢唔喺呢度——可能係我未寫完，或者AI食咗佢」，純粹覺得得意。
右下角加咗隨機文章按鈕，一撳就跳到一篇文。另外整咗數據統計頁面，可以睇每篇文章嘅完讀率、閲讀量，仲有網站UV、PV，按時間篩選。
數據埋點：知道邊篇文章火、邊個tag多啲人撳
做曬Demo先開始搭建，因為Demo調整方便，一開始就搞框架後期改就好麻煩。
文章下載與分類
用公眾號文章下載工具將所有文章轉成Markdown格式，再用AI幫每篇分類同打標籤。雖然用咗一堆子Agent，都花咗三個幾鐘先搞掂。
AI分類打標籤，節省大量人手時間
框架選型：Astro最啱用
之前用Typecho框架，配SQL數據庫覺得太重。對AI講咗需求，佢推薦幾個靜態網站框架，考慮到模板用HTML整，最後揀咗Astro，自由度最高。
Astro框架輕量、靈活，適合靜態個人博客
- 1 靜態頁面唔需要重型數據庫，性能更好
- 2 Astro支援自訂HTML模板，自由度大
- 3 部署簡單，成本低
安全審查與SEO優化
文章閲讀量實時統計，驚有人惡意刷量，所以要做安全防護。作者用之前整嘅安全審查Skill，模擬黑客攻擊去揾漏洞。
安全審查Skill模擬黑客攻擊視角
SEO方面用咗開源SEO審計Skill，優化網站令Google、百度更容易收錄。兩個Skill嘅GitHub連結都分享咗畀大家。
- SEO優化：確保文章被搜索引擎收錄
- 安全審查：防止惡意刷量攻擊
- 使用開源工具，降低維護成本
前排同朋友傾偈，佢話推薦我畀人嗰陣個人網站，發現好耐冇更新，聽完好慚愧。我之前有個個人網站，成一年冇更新，啱好借呢個機會，我成個重構了。
1、點解要做個人網站
到而家，我依然覺得個人網站係人哋認識我哋最好嘅窗口。我哋寫嘅文章、做嘅 project、自我介紹等等，都可以用圖文甚至影片嘅形式喺網站展示曬出嚟。無論係微信公眾號定小紅書，其實都做唔到呢樣嘢。不過個人網站嘅入口比較深，而且有啲技術門檻，但隨住AI 編程嘅興起，呢個門檻再唔係遙不可及喇。舊年我做網站仲要用現成嘅工具砌，今次就全部自己重構。將來一定會愈嚟愈多人開始整網站。呢個都係一個循環，九十年代互聯網啱啱興起嗰陣，個個都整個人網站，而家應該又快返咯。
2、頁面設計
網站應該點樣設計？我嘅想法係先定好網站有啲咩導航目錄，砌好框架，再去設計，咁就會好快。我一共有兩個公眾號，一個係你哋而家見到呢個，另一個係記錄我讀書心得、日常隨筆嘅文章，所以我分咗三個模組：第一個係 AI 模組，第二個係隨筆，我叫佢「東想西想」，最後一個係閲讀模組。每個模組嘅介紹都係我自己同 AI 討論諗出嚟嘅，我希望呢啲介紹可以有趣啲，於是我整咗下面幅圖咁樣。
404 頁面：「你揾嘅嘢唔喺度，可能係我仲未寫完，又或者係 AI 食咗佢。」呢個 404 頁面嘅提示語都係我特登設計嘅，冇咩特別原因，純粹覺得幾得意哈哈。
喺主頁頂部嘅主要標語，我揀咗Reading、Thinking 同 Building呢三個標籤。佢哋都幾能夠概括我做緊嘅嘢：第一個係 Reading，我冇嘢做就亂咁睇啲閒書；第二個係 Thinking，我冇嘢做就鍾意亂咁諗啲有嘅冇嘅；最後一個係 Building，代表咗我近期嘅狀態，持續創造自己嘅產品。
跟住就畀 AI 砌網站 Demo。左邊係第一個版本嘅 Demo，佢嘅 UI 我覺得都係偏向 Claude 嗰種風格，雖然睇落都幾舒服，但高度同質化，而家好多人都係呢種風格，冇咩個人特色，所以我改咗一版，包括主題色都換埋。右上角嘅 icon 本來用 emoji，但 emoji 好重 AI 味，我全部換成SVG icon，最後整出嚟係圖 2 咁樣。另外喺網站右下角仲有個隨機文章掣，㩒一下就隨機跳去一篇文章。
 |  |
除咗網站設計，數據統計都唔少得。我哋要知道每篇文章嘅完讀率、閲讀量等等，仲有網站嘅 UV、PV 咁，所以要整啲數據埋點。我搞咗套數據統計頁面，如下圖咁樣，我喺後台可以睇到邊篇文章最受歡迎、邊個標籤點擊最多，仲可以按時間範圍篩選。
到呢度網站頁面嘅 Demo 就全部搞掂曬。之所以要先整網站每個頁面嘅 Demo，係因為咁樣調整方便，如果一開始就砌好曬成個網站框架，之後再改就好麻煩。
3、文章下載同分類
當網站嘅 Demo 全部設計好之後，就開始砌網站。我用咗個公眾號文章下載工具，將自己公眾號嘅文章全部下載做 Markdown 格式。轉完之後，我用 AI 幫我對每篇文章分類同打標籤，雖然用咗一堆 sub-Agent 做嘢，都仲係花咗三個幾鐘。
4、框架揀選
跟住要揀網站框架。我舊年嗰版網站用咗 Typecho 框架去砌，但佢好重，要配個 SQL 資料庫，我覺得有啲大材小用，所以今次我同 AI 講咗我嘅需求，佢話對於我呢啲靜態頁面，比較適合嘅係以下幾個框架。考慮到我嘅模板全部用 HTML 整，綜合主題自由度嘅考慮，最後我揀咗Astro 框架去砌。
5、掃描安全同 SEO
網站砌好之後，仲有一個非常重要嘅工作，就係要做 SEO 優化 和同安全審查。我哋文章閲讀量係實時統計嘅，如果有人惡意刷量點算？雖然可能性比較細，但我哋都要提前做好各種防護。我呢度就用咗前排做嘅安全審查 Skill 幫我審查，佢透過模擬黑客攻擊嘅角度去揾網站嘅漏洞。另外仲有 SEO 優化，網站如果想畀 Google、百度等搜尋引擎收錄，就要做啲 SEO 優化。我呢度用咗開源嘅 SEO 審計 Skill 幫我做優化，我將呢兩個 project 嘅地址都分享畀大家。
github.com/JeffLi1993/seo-audit-skill 同 https://github.com/limowan/mowan-skill/tree/main/mowan-secure-review
最後大家見到我網站嘅效果大概係圖入面咁樣，訪問地址：limowan.com/，歡迎大家嚟參觀我嘅網站
雖然我哋唔係咩大佬，但整個個人網站，我覺得都係幾有價值嘅一件事，方便身邊嘅朋友認識我哋，同佢哋交流。希望呢次分享，可以畀大家整個人網站帶嚟一啲啟發。
前段時間跟朋友聊天，朋友提到他給別人推薦我的個人博客，發現網站很久沒有更新，聽的我很慚愧，之前我有個個人博客，快一年沒有更新了，剛好蹭這次機會，我把它全部重構了。
1、為什麼要做個人網站
目前，我依然覺得個人網站是別人瞭解我們的最好窗口，我們寫的文章、做的項目、自我介紹等都可以用圖文、甚至視頻的方式在網站展示在一塊，不管是微信公眾號還是小紅書，其實都無法承載這樣的功能，不過個人網站的入口比較深，而且有一定技術門檻，但隨着AI編程的興起，這個門檻再也不是遙不可及的了，去年我做博客還只能用現成的搭建工具搞，這次是全部自己重構了，未來一定會有越來越多的人開始做博客。這也是一個輪迴，90年代互聯剛興起的時候，人人都在搞個人博客，現在估計又快了。
2、頁面設計
博客網站應該怎麼去設計？我的思路是先定好博客有哪些導航目錄，搭建好框架，再去設計，就會非常快。我一共有兩個公眾號，一個是現在你們看到的這個，另一個是記錄自己讀書心得、日常隨筆文章的，所以我分成了三個模塊，第一個是 AI 的模塊，第二個是隨筆，我取名為東想西想，最後一個是閲讀模塊，每個模塊的介紹都是我自己和 AI 討論想出來的，我希望這些能有趣些，於是做成了下圖這樣。
404 頁面："你找的東西不在這兒。可能是我還沒寫完，也可能是 AI 把它吃了"這個 404 的頁面的提示語，也是我刻意設計的，沒有什麼原因，單純覺得比較有意思哈哈。
在主頁頂部的主引導標語我選擇了Reading、Thinking 和 Building這三個標籤，它們還挺能概括我正在做的事兒的，一個是 Reading，我沒事就會瞎看一些閒書；第二個是 Thinking，我沒事就喜歡瞎琢磨些有的沒的；最後一個是 Building，它代表了我近期的狀態，持續在創造自己的產品。
接下來就讓AI搭建網站 Demo。左邊是第一版的 Demo，它的 UI 我感覺還是偏向於 claude 那種風格，雖然看起來還挺舒服的，但高度同質化，現在很多人的網站都是這種風格的，也沒有個人的特點，所以我把它改了一版，包括主題色也換了，右上角的圖標本來是用的 emoji 圖標，但 Emoji 圖標 AI 味特別重，我全部換成了SVG 圖標，最後搞出來是圖 2 這種。另外在網站的右下角，還有個隨機一篇文章的按鈕，點一下，就隨機跳轉到一篇文章。
| |
除了網站設計方面，數據統計也必不可少，我們需要知道每篇文章的完讀率、閲讀量等，還有網站的UV、PV等，所以要做些數據埋點，我搞了一套數據統計頁面，長下面這樣， 我在後台可以看到哪篇文章比較火，哪個標籤點擊的人數最多，還可以根據時間範圍進行篩選。
到這裏網站頁面的Demo就全部搞完了，之所以要先做網站每個頁面Demo，是因為它調整方便，如果一開始就把網站的框架搞完，再改起來就很麻煩了。
3、文章下載並分類
當網站的 Demo 全部設計完了之後，就開着手搭建了，我用了個公眾號文章下載工具，把自己公眾號的文章全部下載為Markdown格式，轉完之後，我用AI幫我對每篇文章進行分類，並且打上標籤，雖然用了一堆子Agent幹活，還是花了3個多小時。
4、框架選型
接下來要對網站架構進行選型，我去年那版博客，是用了 Typecho 框架去搭建的，但它特別重，需要配個sql的數據庫，我覺得有點大材小用了，所以這次我對AI講了下自己的需求，它說對於我這種靜態頁面，比較適合的是下面幾個框架。考慮到我的模板都是用 HTML 去做的，綜合主題自由度的考慮，最後我選擇了Astro 框架去搭建。
5、掃描安全和SEO
在博客搭建完之後，還有一個非常重要的工作，我們要進行 SEO優化 和安全審查，我們文章閲讀量是實時統計的，假如有人惡意來刷量怎麼辦？雖然可能性比較小，但我們也得提前做好各種防護，我這裏就調用了前段時間做的安全審查 Skill 來幫我進行審查，它通過模擬黑客攻擊的視角去找出網站的漏洞。另外還有就是 SEO 優化，博客畢竟是網站，如果想被谷歌、百度等搜索引擎收錄，就要做些 SEO 的優化，這裏我用了開源的 SEO 審計Skill，幫我進行了優化，我把這兩個項目地址也分享給大家。
github.com/JeffLi1993/seo-audit-skill和https://github.com/limowan/mowan-skill/tree/main/mowan-secure-review
最後大家看到的我的網站的效果大概就是圖裏這樣，訪問地址：limowan.com/，歡迎大家來參觀我的博客
雖然我們不是什麼大佬，但做個個人網站，我覺得也是挺有價值的一件事，也方便身邊的朋友瞭解我們，和他們交流，希望這次的分享，能給大家搭建個人網站提供一些啓發。