今天我們來聊聊關于個人網站的一些常見的問題，比如該選哪種類型的網站？技術棧如何匹配需求？無代碼與自部署該怎么權衡等等，文章最后分享一下我精選的開源個人網站、博客模板。

相關干貨：

一、AI 編程與個人網站

伴隨著 AI 編程的火熱，開發的門檻確確實實降低了。關于個人網站的討論最近熱度又高了些，也看到有不少文章在教學如何使用 AI 制作個人網站、博客之類。但是大部分最終的成品，有些過于粗糙，只是搭起來了一個靜態網頁的架子，缺乏功能性和性能等考量。

那么一個完整且優質的個人網站、博客應該具備什么特質？畢竟對設計師來說，個人網站不只是 “有個地方放作品”，更是自己設計能力、審美視覺的展示。

對想入門開發的新手來說，搭建個人網站更是理解前端邏輯、熟悉開發流程的最佳實踐場景。

二、常見的個人網站類型

個人網站的核心價值是 “匹配需求與場景”—— 不同身份、不同目標，需要的網站類型完全不同。不同用途對應不同的功能與視覺需求，尤其對設計師而言，選對類型才能讓作品展示效果最大化。目前主流的個人網站可分為三類，覆蓋絕大多數需求：

1. 內容分享型（含博客、技術筆記）

以 “傳遞信息、沉淀知識” 為核心，不局限于純文字。適合文案創作者、開發者或行業觀察者，也包含了日常記錄，主要是進行文字創作。它更注重 “內容可讀性” 和 “搜索便捷性”。

適合人群

1. 開發者（分享技術教程、踩坑筆記）；
2. 行業觀察者（輸出設計趨勢、職場觀點）；
3. 文案 / 創作者（日常思考、短篇內容沉淀）。

2. 作品展示型（設計師 / 創作者首選）

把 “作品” 作為絕對主角，目標是 “讓訪客直觀看到你的專業能力”，不僅是 “放作品”，更是 “講清作品價值”，是設計師、插畫師、產品經理的核心展示載體。

適合人群

1. 視覺 / UI/UX 設計師（展示界面設計、交互原型）；
2. 插畫師 / 動效師（高清作品合集、創作過程）；
3. 獨立開發者（個人項目 Demo、產品原型）。

3. 個人品牌綜合型（整合所有核心信息）

相當于 “個人官網”，融合了作品集、博客、個人簡介、聯系方式等功能，適合有明確個人品牌定位的從業者（如獨立設計師、自由咨詢師）。它的核心是塑造立體的個人形象，功能上需兼顧兩者的優勢，視覺上則要保持整體風格統一，避免不同模塊出現 割裂感。

適合人群

1. 獨立設計師 / 自由職業者（讓客戶同時看到作品、案例經驗、服務范圍）；
2. 職場進階者（整合項目經歷、技術博客、個人榮譽，用于求職或合作洽談）；
3. 多領域創作者（如 “設計師 + 攝影師”，需同時展示兩類作品）。

三、如何選擇技術棧

技術棧的選擇，本質是 “需求匹配”。你不需要掌握所有工具，但需要選對 “能解決問題且有長期價值” 的技術。很多人會陷入 “技術焦慮”，但其實對個人網站而言，體量小、技術難度低，屬于輕量型的小項目。技術容錯度是很高的。

先明確你的核心需求

在選技術棧前，先問自己三個問題：

1. 你的網站核心功能是什么？（是展示靜態作品，還是需要動態交互？）
2. 你是否需要后續維護和功能迭代？（需要經常更新和修改內容模塊）
3. 你是否想通過搭建網站學習新技能？（比如設計師想了解前端基礎）

比如，若你只是想展示靜態作品集，不需要復雜交互，更新頻率低，最簡單的 HTML+CSS+JS 就足以，成熟點的輕量級方案（如 Astro、Hugo）更加合適；若你想加入復雜的功能和交互，則可以選擇 React、Vue 等前端框架。按需選擇，和 AI 溝通技術棧方案。

四、推薦技術棧 React、Vue、Astro

對設計師和新手而言，熱門技術棧的核心優勢在于 “學習成本低、社區資源和教程豐富、長期價值高。

1. 學習資源豐富：這些技術棧的社區成熟，無論是官方文檔、B 站教程，還是 AI Coding，都能快速找到答案。比如最熱門的UI框架 Shadcn/UI，有豐富的模板和主題資源，以及成熟的AI支持。
2. 對設計師友好：React、Vue 的 “組件化開發”，Figma 等設計工具的支持強，可以借助工具轉換設計組件為代碼，直接打通設計到代碼的路徑；Astro 則主打 “靜態站點生成（SSG）”，既能實現靜態頁面的快速加載，又支持嵌入動態組件（如 React 寫的交互模塊），兼顧 “性能” 和 “靈活性”，專注于落地實現。
3. 長期價值：設計師 “懂基礎前端”在工作中是有助力的，比如能看懂 HTML/CSS 結構、理解交互實現邏輯，掌握 React、Vue 等開發基礎，不僅利于和開發團隊高效溝通，也能讓你更好地落地自己的設計想法。

除了上述推薦的技術棧，市面上還有 WordPress、Hugo、Ghost、Hexo 等方案，它們的定位和特點差異很大，考慮到文章篇幅，具體細節可以自行了解，對于設計師來說，我不大推薦。若讀者是純內容創作者，仍可考慮。

簡單來說，若你想兼顧設計自由度和學習成本，Astro?是最優解（靜態頁面加載快，支持嵌入 React/Vue 等框架，上手門檻低）；若你想深入學習前端，React/Vue?更有長期價值；若你完全不想碰代碼且能接受付費，可使用無代碼平臺（Framer、Webflow、Figma Site等），但長期來看，自部署的靜態站點更省心。

五、關于無代碼平臺 VS 自部署

現在主流的兩種方式：無代碼平臺（Framer、Figma Site、Webflow）和自部署，各有優缺點。

1. 無代碼平臺-需付費，方便但不夠自由

優點很明顯：不用寫代碼，通過可視化設計平臺搭建網站，并且有自帶的CMS管理系統，編輯內容方便。尤其 Figma Site 還能直接把 Figma 設計稿轉成網站，對設計師來說，學習成本低，適合想快速搭個臨時展示頁的人。

但缺點也有：

1. 太依賴平臺：比如用 Framer，站點完全托管在平臺上，無法脫離平臺使用。運營越久，遷移時間和成本越高。
2. 付費成本不低：基礎免費版功能有限，比如只能放 3 個作品、有平臺水印，想自定義域名、去掉水印、加高級交互、多語言，都得上付費套，每月從幾十到上百，長期用下來不便宜。
3. 靈活性差：很多平臺的模板改不了核心邏輯，自定義功能受限，內容也可能受到平臺審核限制。

2. 自部署 - 免費及全掌控，但學習成本高

“自部署” 聽起來復雜，其實就是 “自己找模板 / 寫代碼，把網站放到服務器上”，比如用 Cloudflare、Vercel、GitHub Pages 這些免費平臺部署。

優點特別適合設計師：

1. 自由度拉滿：想加什么功能就加什么，比如給作品加 3D 預覽、增加復雜的交互和動效、甚至嵌入自己做的交互原型，完全不受平臺限制，能把你的設計想法百分百落地。
2. 低成本：大部分部署平臺（Vercel、Netlify、Cloudflare）免費，自定義域名也才幾十塊一年，并且免費的功能額度足夠個人使用，長期用下來比無代碼平臺省錢太多。
3. 學習開發技能：哪怕你只懂設計，跟著教程搭一遍自部署站，也能順便了解前端基礎、域名解析、流量、框架優勢這些小知識，現在很多公司招設計師，也會優先考慮 懂一些技術的，相當于多了個加分項。

缺點也很直接：學習成本高，耗費時間和精力。比如得懂點 HTML/CSS 基礎，知道怎么改模板里的內容，怎么把網站部署到服務器上。現在有很多優秀的開源模板，跟著文檔和AI 輔助也能成功上線，只是比無代碼慢一點。

當然，也不是所有人都適合自部署：如果你只是臨時需要一個展示頁，時間緊、要求不高，那無代碼平臺足夠用；但如果想把個人站當成長期的個人品牌，那自部署絕對更值得投入。

“不用花錢”，“網站精美功能齊全”，“一點都不用學代碼” —— 這是不可能的。想省心就付費，付費可以解決你遇到的任何難題，包括不限于購買成熟的模板、付費咨詢、付費開發等。想要走免費的途徑就要多花些心思。付費與免費的本質，是 “用金錢換時間” 還是 “用時間換金錢” 的權衡。

六、精選開源模板推薦

最后，分享 5 個我精選的開源個人站模板，都是從 “審美、功能、獨特性” 等多個維度考量過的，適合想自部署的設計師參考。無論設計還是代碼，參考和借鑒的價值都很高，看看什么是好的作品，再學習如何去做。

提醒一句：這些模板需要基礎代碼能力（AI 輔助可上手），并不適合完全零基礎或者不想學習開發的朋友。盡管有詳細的文檔說明，但是要花一些時間去研究和學習，上線了一定會有收獲。

1. Cali 的個人官網（收藏 1.9K）

1. 網站：https://cali.so/
2. 開源地址：https://github.com/CaliCastle/cali.so
3. 部署文檔： https://cali.so/blog/guide-for-cloning-my-site
4. 教程視頻： https://www.bilibili.com/video/BV1kH4y157xg/
5. 技術棧：Next.js + Tailwind CSS + Sanity + Neon + Resend + Clerk + Upstash
6. 亮點：功能全面，設計細節拉滿。網站的很多交互和動效都很棒，可以仔細體驗一下。有非常細致的教程文檔和教學視頻。功能方面包含了評論系統、項目列表、留言墻、郵件、后臺管理系統等。
7. 難點：技術棧相對復雜，部署難度較大。

2. Onur Dev（收藏 2.3K）

1. 網站：https://onur.dev/
2. 開源地址：https://github.com/suyalcinkaya/onur.dev
3. 技術棧：React + Tailwind CSS + Contentful
4. 亮點：功能全面，適合設計師+開發者身份，包括博客文章、生活記錄、時間軸以及一個簡易的書簽導航功能。很極簡的設計，但是模塊布局和功能很實用。

3. Naresh Khatri 3D 網站（收藏557）

1. 網站：https://www.nareshkhatri.site/
2. 開源地址：https://github.com/Naresh-Khatri/3d-portfolio
3. 技術棧：Three.js（3D 渲染庫）+ React + Next.js + Tailwind
4. 亮點：3D 交互視覺沖擊力強，整個頁面是 3D 空間，可拖動旋轉視角，作品以 3D 卡片展示，點進去看詳情；適合 UI/UX、動效設計師

4. Sudip Portfolio 網站

1. 網站：https://portfolio-metaloopa.vercel.app/
2. 開源：https://github.com/metal-oopa/personal-portfolio
3. 技術棧： React
4. 亮點：暗黑風 + 動態交互， 交互和視覺效果比較豐富，作品頁加了 “hover 時的文字漸顯動畫”，細節很用心。功能上支持作品分類、個人技能展示，項目、以及聯系表單，適合喜歡暗黑風格的設計師。

5. ThoughtLite

1. 網站：https://ttio.cc/
2. 開源地址：https://github.com/tuyuritio/astro-theme-thought-lite
3. 技術棧：Astro + Tailwind CSS（靜態加載快，響應式適配好）
4. 亮點：個人推薦，極簡設計的輕量博客，技術棧簡單，上手容易，專注文字創作，支持 Markdown 編輯和暗黑模式切換。審美簡潔現代，加載速度快（SSG 優化），并且支持多語言。對于文字創作來說，體驗非常好。

最后

AI 確實能幫我們進行快速開發，但真正有品牌效用和價值的個人站，從來不是快出來的，而是磨出來的，磨功能、磨細節、磨出自己的風格。如果你是設計師，不妨花點時間試試自部署，哪怕只是從改開源模板開始，最后上線的不僅是一個網站，更是你對 “設計 + 技術” 的一次探索。畢竟，能把自己的想法 100% 落地的感覺，真的很有成就感。

今天的分享就到這里了，覺得內容有價值、有幫助的話，不妨一起交流一下。感謝閱讀！

歡迎關注作者微信公眾號：「Rico的設計漫想」