設計師個人網站怎麼選擇？看看這份指南 + 精選開源模板
整理版優先睇
選擇個人網站，先匹配需求場景；自部署開源模板係設計師長期更佳選擇
呢篇文章主要為設計師同想入門開發嘅新手整理，作者綜合自身經驗，解答點樣選擇網站類型、技術棧，同埋喺無代碼平台同自部署之間點樣權衡。整體結論係：個人網站嘅核心係「匹配需求與場景」，唔同身份同目標需要完全唔同嘅網站類型——內容分享型、作品展示型同個人品牌綜合型。技術棧方面，唔需要追新，而係揀「能解決問題且有長期價值」嘅工具：Astro 兼顧性能同靈活，React/Vue 適合想深入學前端嘅人。至於無代碼平台同自部署，作者認為自部署雖然學習成本高，但自由度大、長遠更省錢，而且能幫設計師學多啲開發知識，係職場加分項。最後作者精選咗 5 個開源模板，從審美、功能、獨特性出發，適合想自部署嘅設計師參考。
文章嘅背景係隨住 AI 編程火熱，開發門檻降低，但好多 AI 整出嚟嘅個人網站好粗糙，缺乏功能性同性能考量。作者本身係設計師視角，想幫讀者避開常見陷阱，唔好浪費時間。佢強調「真正有品牌效用同價值嘅個人站，從來唔係快出來，而係磨出來嘅」——磨功能、磨細節、磨風格。
對於讀者嚟講，最值得吸收嘅係：先揀啱類型同技術棧，然後認真權衡付費定免費，最後落手改開源模板。自部署嘅過程本身都係一次「設計+技術」嘅探索，能將自己諗法 100% 落地，成就感好大。
- 個人網站分三類：內容分享型、作品展示型、個人品牌綜合型，要按自己身份同目標揀啱。
- 揀技術棧先問三個問題：核心功能係咩？需唔需要後續維護？想唔想學新技能？唔好盲目追新。
- Astro 對設計師最友好：靜態加載快，支援嵌入 React/Vue 組件，兼顧性能同靈活。
- 無代碼平台方便但付費、綁死平台；自部署雖要學但自由度大、長期成本低，仲可以學到開發知識。
- 精選 5 個開源模板（Cali、Onur Dev、Naresh 3D、Sudip、ThoughtLite），各有風格同難度，適合不同需求嘅設計師參考同改裝。
Cali 個人官網模板 (Next.js + Sanity)
功能全面，設計細節拉滿，有詳細教學文檔同影片，適合想全面學習嘅開發者或全棧設計師。
Onur Dev 模板 (React + Contentful)
極簡設計，包括博客、書籤導航、時間軸，適合設計師兼開發者。
Naresh Khatri 3D 網站 (Three.js + React)
3D 交互視覺衝擊力強，適合 UI/UX、動效設計師。
Sudip Portfolio (React 暗黑風)
暗黑風加動態交互，作品頁有 hover 文字漸顯，適合視覺設計師。
個人網站類型：先認清自己身份
主流個人網站可分為三類，覆蓋絕大多數需求：
內容分享型（含博客、技術筆記）
作品展示型（設計師 / 創作者首選）
個人品牌綜合型（整合所有核心信息）
作者強調，唔同身份同目標需要完全唔同嘅類型，設計師要揀啱先可以令作品展示效果最大化。
技術棧選擇：唔好焦慮，按需配搭
技術棧選擇本質係「需求匹配」。先問自己三個問題：你網站核心功能係咩？需唔需要後續維護？想唔想學新技能？
若只想展示靜態作品集，用最簡單嘅 HTML+CSS+JS 或 Astro、Hugo 就夠
若要有複雜交互，揀 React、Vue
- React / Vue：學習資源豐富，組件化開發對設計師友好，可以藉助 Figma 等工具打通設計到代碼嘅路徑。
- Astro：主打 SSG，加載快，支援嵌入動態組件，作者認為係設計師嘅最優解。
- 其他方案（WordPress、Hugo、Ghost、Hexo）對設計師嚟講不太推薦。
無代碼平台 vs 自部署：付費定免費嘅取捨
無代碼平台（Framer、Figma Site、Webflow）方便快捷，但需要付費，且綁死平台、靈活性差；自部署（Cloudflare、Vercel、GitHub Pages）免費、自由度大，但學習成本高。
無代碼平台嘅缺點：依賴平台，遷移成本高；付費套費每月幾十到上百；自定義受限
自部署嘅優點：自由度拉滿，可以加 3D 預覽、複雜交互；低成本，大部分部署平台免費
- 想省心就付費：付費可以解決大部分問題，包括購買成熟模板、付費諮詢等。
- 想免費就要花時間：學習用開源模板、AI 輔助部署，投入時間換取金錢同長遠回報。
- 唔好幻想「唔使錢、網站精美、唔使學代碼」：呢個係不可能嘅，要認清取捨。
精選開源模板：由淺入深參考
以下 5 個模板係作者從審美、功能、獨特性多個維度揀出嚟，適合想自部署嘅設計師參考。注意需要基礎代碼能力，AI 輔助可以上手。
Cali 模板技術棧複雜但文檔最詳細
ThoughtLite 最輕量，專註文字創作
- 1 Cali (Next.js + Sanity)：功能最全面，有教學文檔同影片，適合認真學習。
- 2 Onur Dev (React + Contentful)：極簡，包括博客、書籤導航、時間軸。
- 3 Naresh 3D (Three.js + React)：3D 交互視覺衝擊力強，適合動效設計師。
- 4 Sudip (React 暗黑風)：暗黑風加動態 hover 動畫，適合視覺設計師。
- 5 ThoughtLite (Astro)：極簡輕量博客，支援 Markdown，加載飛快。
今日我哋嚟傾下關於個人網站嘅常見問題，例如揀邊種類型嘅網站？技術棧點樣配合需求？無代碼同自部署又點樣取捨？文章最後會分享我精選嘅開源個人網站、博客模版。
AI 編程同個人網站
隨住 AI 編程越嚟越熱，開發門檻真係低咗好多。最近關於個人網站嘅討論又多咗，都見到好多文章教點用 AI 整個人網站、博客之類。但係大部分成品都比較粗糙，只係搭咗個靜態網頁嘅骨架，冇乜功能性同性能嘅考量。
咁一個完整又高質素嘅個人網站、博客應該有啲乜嘢特質？畢竟對設計師嚟講，個人網站唔單止係「有個地方放作品」，更加係展示自己設計能力同審美視覺嘅平台。
對想入門開發嘅新手嚟講，搭建個人網站更加係理解前端邏輯、熟悉開發流程嘅最佳實踐場景。
常見嘅個人網站類型
個人網站嘅核心價值係「匹配需求同場景」——唔同身份、唔同目標，需要嘅網站類型完全唔同。唔同用途對應嘅功能同視覺需求都唔一樣，尤其係對設計師嚟講，揀啱類型先可以令作品展示效果最大化。目前主流嘅個人網站可以分為三類，覆蓋絕大多數需求：
1. 內容分享型（包括博客、技術筆記）
以「傳遞資訊、沉澱知識」做核心，唔只限於純文字。適合文案創作者、開發者或者行業觀察者，亦包括日常記錄，主要係做文字創作。呢類網站更加註重「內容可讀性」同「搜尋便捷性」。”。
適合邊啲人
- ●開發者（分享技術教學、踩坑筆記）；
- ●行業觀察者（輸出設計趨勢、職場觀點）；
- ●文案 / 創作者（日常思考、短篇內容沉澱）。
2. 作品展示型（設計師 / 創作者首選）
將「作品」作為絕對主角，目標係「令訪客直接睇到你嘅專業能力」，唔單止係「放作品」，更加係「講清作品價值」，係設計師、插畫師、產品經理嘅核心展示載體。
適合邊啲人
- ●視覺 / UI/UX 設計師（展示界面設計、交互原型）；
- ●插畫師 / 動效師（高清作品合集、創作過程）；
- ●獨立開發者（個人項目 Demo、產品原型）。
3. 個人品牌綜合型（整合所有核心資訊）
相當於「個人官網」，融合咗作品集、博客、個人簡介、聯絡方式等功能，適合有明確個人品牌定位嘅從業者（例如獨立設計師、自由諮詢師）。佢嘅核心係塑造立體嘅個人形象，功能上要兼顧兩者嘅優勢，視覺上就要保持整體風格統一，避免唔同模塊出現割裂感。
適合邊啲人
- ●獨立設計師 / 自由職業者（令客戶同時睇到作品、案例經驗、服務範圍）；
- ●職場進階者（整合項目經歷、技術博客、個人榮譽，用嚟求職或者合作傾談）；
- ●多領域創作者（例如「設計師 + 攝影師」，要同時展示兩類作品）。
點樣選擇技術棧
技術棧嘅選擇，本質係「需求匹配」。你唔需要識曬所有工具，但要揀啱「能夠解決問題兼有長期價值」嘅技術。好多人會陷入「技術焦慮」，但其實對個人網站嚟講，體量細、技術難度低，屬於輕量型嘅小項目，技術容錯度好高。
先搞清楚你嘅核心需求
揀技術棧之前，先問自己三個問題：
- ●你網站嘅核心功能係乜？（係展示靜態作品，定係需要動態交互？）
- ●你之後需要維護同功能迭代嗎？（需唔需要經常更新同改內容模塊）
- ●你想唔想透過搭建網站學習新技能？（例如設計師想了解前端基礎）
例如，若果你只係想展示靜態作品集，唔需要複雜交互，更新次數少，最簡單嘅 HTML+CSS+JS 就夠，成熟啲嘅輕量級方案（例如 Astro、Hugo）更加適合；若果你想加入複雜嘅功能同交互，就可以揀 React、Vue 等前端框架。按需要去揀，同 AI 傾下技術棧方案。
推薦技術棧 React、Vue、Astro
對設計師同新手嚟講，熱門技術棧嘅核心優勢在於「學習成本低、社區資源同教學豐富、長期價值高」
- ●學習資源豐富：呢啲技術棧嘅社區成熟，無論係官方文件、B 站教學，定係 AI Coding，都可以快速揾到答案。例如最熱門嘅 UI 框架 Shadcn/UI，有好多模版同主題資源，同埋成熟嘅 AI 支援。
- ●對設計師友好：React、Vue 嘅「組件化開發」，同 Figma 等設計工具嘅支援強，可以藉助工具將設計組件轉換成代碼，直接打通設計到代碼嘅路徑；Astro 就主打「靜態站點生成（SSG）」，既可以做到靜態頁面快速加載，又支援嵌入動態組件（例如用 React 寫嘅交互模塊），兼顧「性能」同「靈活性」，專注於落地實現。
- ●長期價值：設計師「識啲基礎前端」喺工作上有幫助，例如睇得明 HTML/CSS 結構、理解交互實現邏輯，掌握 React、Vue 等開發基礎，唔單止有利同開發團隊有效溝通，亦都可以令你更好咁落地自己嘅設計想法。
除咗上面推薦嘅技術棧，市面上仲有 WordPress、Hugo、Ghost、Hexo 等方案，佢哋嘅定位同特點好唔同，考慮到文章篇幅，具體細節可以自己瞭解，對設計師嚟講，我唔太推薦。若果讀者係純內容創作者，仍然可以考慮。
簡單嚟講，若果你想兼顧設計自由度同學習成本，Astro 係最優解（靜態頁面加載快，支援嵌入 React/Vue 等框架，上手門檻低）；若果你想深入學習前端，React/Vue 更有長期價值；若果你完全唔想掂代碼兼且接受付費，可以用無代碼平台（Framer、Webflow、Figma Site等），但長期嚟睇，自部署嘅靜態站點更加省心。
關於無代碼平台 VS 自部署
而家主流有兩種方式：無代碼平台（Framer、Figma Site、Webflow）同自部署，各有優缺點。
無代碼平台 - 要付費，方便但唔夠自由
優點好明顯：唔使寫代碼，透過可視化設計平台搭建網站，仲有自帶嘅 CMS 管理系統，編輯內容好方便。尤其 Figma Site 仲可以直接將 Figma 設計稿轉成網站，對設計師嚟講，學習成本低，適合想快啲整個臨時展示頁嘅人。
但缺點都有：
- ●太過依賴平台：例如用 Framer，站點完全託管喺平台上，冇辦法脱離平台使用。營運得越耐，搬遷嘅時間同成本就越高。
- ●付費成本唔低：基礎免費版功能有限，例如只可以放 3 個作品、有平台水印，想自定義域名、去掉水印、加高級交互、多語言，全部都要上付費計劃，每個月由幾十到上百，長期用落唔平。
- ●靈活性差：好多平台嘅模版改唔到核心邏輯，自定義功能受限，內容都可能受到平台審核限制。
自部署 - 免費兼全面掌控，但學習成本高
「自部署」聽落複雜，其實就係「自己揾模版 / 寫代碼，將網站放上伺服器」，例如用 Cloudflare、Vercel、GitHub Pages 呢啲免費平台部署。
優點特別適合設計師：
- ●自由度拉滿：想加咩功能就加咩，例如畀作品加 3D 預覽、增加複雜嘅交互同動效、甚至嵌入自己整嘅交互原型，完全唔受平台限制，可以將你嘅設計想法百分百實現。
- ●低成本成本極低
- ●：大部分部署平台（Vercel、Netlify、Cloudflare）免費，自定義域名都係幾十蚊一年，而且免費嘅功能配額足夠個人用，長期用落比無代碼平台慳錢好多。學習開發技能
：即使你只係識設計，跟住教學搭一次自部署網站，都可以順便了解前端基礎、域名解析、流量、框架優勢呢啲知識，而家好多公司請設計師都會優先考慮識啲技術嘅人，等於多咗個加分項。缺點都好直接：學習成本高，要花時間同心機。例如要識啲 HTML/CSS 基礎，知道點樣改模版嘅內容，點樣將網站部署到伺服器。而家有好啲嘅開源模版，跟住文件同 AI 輔助都可以成功上線，只係比無代碼慢少少。
當然，唔係所有人都適合自部署：如果你只係臨時需要一個展示頁，時間緊、要求唔高，咁無代碼平台就夠用；但如果想將個人網站當成長期嘅個人品牌，咁自部署絕對更值得投入。
「唔使俾錢」、「網站精美功能齊全」、「完全唔使學代碼」——呢啲係冇可能嘅。想省心就要付費，付費可以解決你遇到嘅任何難題，包括買成熟嘅模版、付費諮詢、付費開發等。想免費就要花多啲心思。付費同免費嘅本質，係「用錢換時間」定係「用時間換錢」嘅取捨。
精選開源模版推介
最後，分享 5 個我精選嘅開源個人網站模版，全部都係由「審美、功能、獨特性」等多個角度考慮過，適合想自部署嘅設計師參考。無論設計定係代碼，參考同借鑒嘅價值都好高，睇下咩係好嘅作品，再學習點樣去做。
提返一句：呢啲模版需要有基本嘅代碼能力（AI 輔助可以上手），唔適合完全零基礎或者唔想學習開發嘅朋友。雖然有詳細嘅文件說明，但係要花啲時間去研究同學習，上線咗一定會學到嘢。
Cali 嘅個人官網（⭐1.9K）
- ●網站：https://cali.so/
- ●開源地址：https://github.com/CaliCastle/cali.so
- ●部署文件：https://cali.so/blog/guide-for-cloning-my-site
- ●教學影片：https://www.bilibili.com/video/BV1kH4y157xg/
- ●技術棧：Next.js + Tailwind CSS + Sanity + Neon + Resend + Clerk + Upstash
- ●亮點：功能全面，設計細節拉滿。網站嘅好多交互同動效都好正，可以仔細體驗下。有超級詳細嘅教學文件同影片。功能方面包括評論系統、項目列表、留言牆、電郵、後台管理系統等。
- ●難點：技術棧相對複雜，部署難度較大。
Onur Dev（⭐2.3K）
- ●網站：https://onur.dev/
- ●開源地址：https://github.com/suyalcinkaya/onur.dev
- ●技術棧：React + Tailwind CSS + Contentful
- ●亮點：功能全面，適合設計師+開發者身份，包括博客文章、生活記錄、時間軸以及一個簡單嘅書籤導航功能。好簡約嘅設計，但係模塊佈局同功能好實用。
Naresh Khatri 3D 網站（⭐557）
- ●網站：https://www.nareshkhatri.site/
- ●開源地址：https://github.com/Naresh-Khatri/3d-portfolio
- ●技術棧：Three.js（3D 渲染庫）+ React + Next.js + Tailwind
- ●亮點：3D 交互視覺衝擊力強，整個頁面係 3D 空間，可以拖動旋轉視角，作品以 3D 卡片展示，㩒入去睇詳情；適合 UI/UX、動效設計師。
Sudip Portfolio 網站
- ●網站：https://portfolio-metaloopa.vercel.app/
- ●開源：https://github.com/metal-oopa/personal-portfolio
- ●技術棧： React
- ●亮點：暗黑風格 + 動態交互，交互同視覺效果比較豐富，作品頁加咗「hover 時文字漸顯動畫」，細節好用心。功能上支援作品分類、個人技能展示、項目，以及聯絡表格，適合鍾意暗黑風格嘅設計師。
ThoughtLite
- ●網站：https://ttio.cc/
- ●開源地址：https://github.com/tuyuritio/astro-theme-thought-lite
- ●技術棧：Astro + Tailwind CSS（靜態加載快，響應式適配好）
- ●亮點：個人推介，極簡設計嘅輕量博客，技術棧簡單，容易上手，專註文字創作，支援 Markdown 編輯同暗黑模式切換。審美簡潔現代，加載速度快（SSG 優化），仲支援多語言。對文字創作嚟講，體驗好好。
簡易表格對比：
最後
AI 確實可以幫我哋快速開發，但真正有品牌效用同價值嘅個人網站，從來唔係快出嚟嘅，而係磨出嚟嘅，磨功能、磨細節、磨出自己嘅風格。如果你係設計師，不妨花啲時間試下自部署，就算只係由改開源模版開始，最後上線嘅唔單止係一個網站，更加係你對「設計 + 技術」嘅一次探索。畢竟，可以將自己嘅想法 100% 實現嘅感覺，真係好有成就感。
今天我們來聊聊關於個人網站的一些常見的問題，比如該選哪種類型的網站？技術棧如何匹配需求？無代碼與自部署該怎麼權衡等等，文章最後分享一下我精選的開源個人網站、博客模板。
AI 編程與個人網站
伴隨着 AI 編程的火熱，開發的門檻是確確實實的降低了。關於個人網站的討論最近熱度又高了些，也看到有不少文章在教學如何使用 AI 製作個人網站、博客之類。但是大部分最終的成品，有些過於粗糙，只是搭起來了一個靜態網頁的架子，缺乏功能性和性能等考量。
那麼一個完整且優質的個人網站、博客應該具備什麼特質？畢竟對設計師來說，個人網站不只是 “有個地方放作品”，更是自己設計能力、審美視覺的展示。
對想入門開發的新手來說，搭建個人網站更是理解前端邏輯、熟悉開發流程的最佳實踐場景。
常見的個人網站類型
個人網站的核心價值是 “匹配需求與場景”—— 不同身份、不同目標，需要的網站類型完全不同。，不同用途對應不同的功能與視覺需求，尤其對設計師而言，選對類型才能讓作品展示效果最大化。目前主流的個人網站可分為三類，覆蓋絕大多數需求：
1. 內容分享型（含博客、技術筆記）
以 “傳遞信息、沉澱知識” 為核心，不侷限於純文字。適合文案創作者、開發者或行業觀察者，也包含了日常記錄，主要是進行文字創作。它更注重 “內容可讀性” 和 “搜索便捷性”。
適合人羣
- ●開發者（分享技術教程、踩坑筆記）；
- ●行業觀察者（輸出設計趨勢、職場觀點）；
- ●文案 / 創作者（日常思考、短篇內容沉澱）。
2. 作品展示型（設計師 / 創作者首選）
把 “作品” 作為絕對主角，目標是 “讓訪客直觀看到你的專業能力”，不僅是 “放作品”，更是 “講清作品價值”，是設計師、插畫師、產品經理的核心展示載體。
適合人羣
- ●視覺 / UI/UX 設計師（展示界面設計、交互原型）；
- ●插畫師 / 動效師（高清作品合集、創作過程）；
- ●獨立開發者（個人項目 Demo、產品原型）。
3. 個人品牌綜合型（整合所有核心信息）
相當於 “個人官網”，融合了作品集、博客、個人簡介、聯繫方式等功能，適合有明確個人品牌定位的從業者（如獨立設計師、自由諮詢師）。它的核心是塑造立體的個人形象，功能上需兼顧兩者的優勢，視覺上則要保持整體風格統一，避免不同模塊出現 割裂感。
適合人羣
- ●獨立設計師 / 自由職業者（讓客戶同時看到作品、案例經驗、服務範圍）；
- ●職場進階者（整合項目經歷、技術博客、個人榮譽，用於求職或合作洽談）；
- ●多領域創作者（如 “設計師 + 攝影師”，需同時展示兩類作品）。
如何選擇技術棧
技術棧的選擇，本質是 “需求匹配”。你不需要掌握所有工具，但需要選對 “能解決問題且有長期價值” 的技術。很多人會陷入 “技術焦慮”，但其實對個人網站而言，體量小、技術難度低，屬於輕量型的小項目。技術容錯度是很高的。
先明確你的核心需求
在選技術棧前，先問自己三個問題：
- ●你的網站核心功能是什麼？（是展示靜態作品，還是需要動態交互？）
- ●你是否需要後續維護和功能迭代？（需要經常更新和修改內容模塊）
- ●你是否想通過搭建網站學習新技能？（比如設計師想了解前端基礎）
比如，若你只是想展示靜態作品集，不需要複雜交互，更新頻率低，最簡單的 HTML+CSS+JS 就足以，成熟點的輕量級方案（如 Astro、Hugo）更加合適；若你想加入複雜的功能和交互，則可以選擇 React、Vue 等前端框架。按需選擇，和 AI 溝通技術棧方案。
推薦技術棧 React、Vue、Astro
對設計師和新手而言，熱門技術棧的核心優勢在於 “學習成本低、社區資源和教程豐富、長期價值高。
- ●學習資源豐富：這些技術棧的社區成熟，無論是官方文檔、B 站教程，還是 AI Coding，都能快速找到答案。比如最熱門的UI框架 Shadcn/UI，有豐富的模板和主題資源，以及成熟的AI支持。
- ●對設計師友好：React、Vue 的 “組件化開發”，Figma 等設計工具的支持強，可以藉助工具轉換設計組件為代碼，直接打通設計到代碼的路徑；Astro 則主打 “靜態站點生成（SSG）”，既能實現靜態頁面的快速加載，又支持嵌入動態組件（如 React 寫的交互模塊），兼顧 “性能” 和 “靈活性”，專注於落地實現。
- ●長期價值：設計師 “懂基礎前端”在工作中是有助力的，比如能看懂 HTML/CSS 結構、理解交互實現邏輯，掌握 React、Vue 等開發基礎，不僅利於和開發團隊高效溝通，也能讓你更好地落地自己的設計想法。
除了上述推薦的技術棧，市面上還有 WordPress、Hugo、Ghost、Hexo 等方案，它們的定位和特點差異很大，考慮到文章篇幅，具體細節可以自行了解，對於設計師來說，我不大推薦。若讀者是純內容創作者，仍可考慮。
簡單來說，若你想兼顧設計自由度和學習成本，Astro 是最優解（靜態頁面加載快，支持嵌入 React/Vue 等框架，上手門檻低）；若你想深入學習前端，React/Vue 更有長期價值；若你完全不想碰代碼且能接受付費，可使用無代碼平台（Framer、Webflow、Figma Site等），但長期來看，自部署的靜態站點更省心。
關於無代碼平台 VS 自部署
現在主流的兩種方式：無代碼平台（Framer、Figma Site、Webflow）和自部署，各有優缺點。
無代碼平台-需付費，方便但不夠自由
優點很明顯：不用寫代碼，通過可視化設計平台搭建網站，並且有自帶的CMS管理系統，編輯內容方便。尤其 Figma Site 還能直接把 Figma 設計稿轉成網站，對設計師來說，學習成本低，適合想快速搭個臨時展示頁的人。
但缺點也有：
- ●太依賴平台：比如用 Framer，站點完全託管在平台上，無法脱離平台使用。運營越久，遷移時間和成本越高。
- ●付費成本不低：基礎免費版功能有限，比如只能放 3 個作品、有平台水印，想自定義域名、去掉水印、加高級交互、多語言，都得上付費套，每月從幾十到上百，長期用下來不便宜。
- ●靈活性差：很多平台的模板改不了核心邏輯，自定義功能受限，內容也可能受到平台審核限制。
自部署 - 免費及全掌控，但學習成本高
“自部署” 聽起來複雜，其實就是 “自己找模板 / 寫代碼，把網站放到服務器上”，比如用 Cloudflare、Vercel、GitHub Pages 這些免費平台部署。
優點特別適合設計師：
- ●自由度拉滿：想加什麼功能就加什麼，比如給作品加 3D 預覽、增加複雜的交互和動效、甚至嵌入自己做的交互原型，完全不受平台限制，能把你的設計想法百分百落地。
- ●低成本：大部分部署平台（Vercel、Netlify、Cloudflare）免費，自定義域名也才幾十塊一年，並且免費的功能額度足夠個人使用嗎，長期用下來比無代碼平台省錢太多。
- ●學習開發技能：哪怕你只懂設計，跟着教程搭一遍自部署站，也能順便了解前端基礎、域名解析、流量、框架優勢這些小知識，現在很多公司招設計師，也會優先考慮 懂一些技術的，相當於多了個加分項。
缺點也很直接：學習成本高，耗費時間和精力。比如得懂點 HTML/CSS 基礎，知道怎麼改模板裏的內容，怎麼把網站部署到服務器上。現在有很多優秀的開源模板，跟着文檔和AI 輔助也能成功上線，只是比無代碼慢一點。
當然，也不是所有人都適合自部署：如果你只是臨時需要一個展示頁，時間緊、要求不高，那無代碼平台足夠用；但如果想把個人站當成長期的個人品牌，那自部署絕對更值得投入。
“不用花錢”，“網站精美功能齊全”，“一點都不用學代碼” —— 這是不可能的。想省心就付費，付費可以解決你遇到的任何難題，包括不限於購買成熟的模板、付費諮詢、付費開發等。想要走免費的途徑就要多花些心思。付費與免費的本質，是 “用金錢換時間” 還是 “用時間換金錢” 的權衡。
精選開源模板推薦
最後，分享 5 個我精選的開源個人站模板，都是從 “審美、功能、獨特性” 等多個維度考量過的，適合想自部署的設計師參考。無論設計還是代碼，參考和借鑑的價值都很高，看看什麼是好的作品，再學習如何去做。
提醒一句：這些模板需要需基礎代碼能力（AI 輔助可上手），並不適合完全零基礎或者不想學習開發的朋友。儘管有詳細的文檔說明，但是要花一些時間去研究和學習，上線了一定會有收穫。
Cali 的個人官網（⭐1.9K）
- ●網站：https://cali.so/
- ●開源地址：https://github.com/CaliCastle/cali.so
- ●部署文檔： https://cali.so/blog/guide-for-cloning-my-site
- ●教程視頻： https://www.bilibili.com/video/BV1kH4y157xg/
- ●技術棧：Next.js + Tailwind CSS + Sanity + Neon + Resend + Clerk + Upstash
- ●亮點：功能全面，設計細節拉滿。網站的很多交互和動效都很棒，可以仔細體驗一下。有非常細緻的教程文檔和教學視頻。功能方面包含了評論系統、項目列表、留言牆、郵件、後台管理系統等。
- ●難點：技術棧相對複雜，部署難度較大。
Onur Dev（⭐2.3K）
- ●網站：https://onur.dev/
- ●開源地址：https://github.com/suyalcinkaya/onur.dev
- ●技術棧：React + Tailwind CSS + Contentful
- ●亮點：功能全面，適合設計師+開發者身份，包括博客文章、生活記錄、時間軸以及一個簡易的書籤導航功能。很極簡的設計，但是模塊佈局和功能很實用。
Naresh Khatri 3D 網站（⭐557）
- ●網站：https://www.nareshkhatri.site/
- ●開源地址：https://github.com/Naresh-Khatri/3d-portfolio
- ●技術棧：Three.js（3D 渲染庫）+ React + Next.js + Tailwind
- ●亮點：3D 交互視覺衝擊力強，整個頁面是 3D 空間，可拖動旋轉視角，作品以 3D 卡片展示，點進去看詳情；適合 UI/UX、動效設計師
Sudip Portfolio 網站
- ●網站：https://portfolio-metaloopa.vercel.app/
- ●開源：https://github.com/metal-oopa/personal-portfolio
- ●技術棧： React
- ●亮點：暗黑風 + 動態交互， 交互和視覺效果比較豐富，作品頁加了 “hover 時的文字漸顯動畫”，細節很用心。功能上支持作品分類、個人技能展示，項目、以及聯繫表單，適合喜歡暗黑風格的設計師。
ThoughtLite
- ●網站：https://ttio.cc/
- ●開源地址：https://github.com/tuyuritio/astro-theme-thought-lite
- ●技術棧：Astro + Tailwind CSS（靜態加載快，響應式適配好）
- ●亮點：個人推薦，極簡設計的輕量博客，技術棧簡單，上手容易，專注文字創作，支持 Markdown 編輯和暗黑模式切換。審美簡潔現代，加載速度快（SSG 優化），並且支持多語言。對於文字創作來說，體驗非常好。
簡易表格對比：
最後
AI 確實能幫我們進行快速開發，但真正有品牌效用和價值的個人站，從來不是快出來的，而是磨出來的，磨功能、磨細節、磨出自己的風格。如果你是設計師，不妨花點時間試試自部署，哪怕只是從改開源模板開始，最後上線的不僅是一個網站，更是你對 “設計 + 技術” 的一次探索。畢竟，能把自己的想法 100% 落地的感覺，真的很有成就感。