保姆级教程！设计师个人网站搭建指南（附精选开源模板）

今天我们来聊聊关于个人网站的一些常见的问题，比如该选哪种类型的网站？技术栈如何匹配需求？无代码与自部署该怎么权衡等等，文章最后分享一下我精选的开源个人网站、博客模板。

相关干货：

一、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的设计漫想」