AI 编程与个人网站
随着 AI 编程的普及，开发的门槛确实降低了。 关于个人网站的讨论最近也获得了更多关注，许多文章都在教如何使用 AI 来创建个人网站和博客。 然而，大部分最终成品都过于粗糙，仅仅是搭建了一个静态网页框架，缺乏对功能和性能的考量。 那么，一个完整且高质量的个人网站或博客应该具备哪些品质呢？ 毕竟，对于设计师而言，个人网站不仅仅是“放作品的地方”，更是他们设计能力和审美眼光的展示。 对于学习开发的初学者来说，建立个人网站是理解前端逻辑和熟悉开发工作流的最佳实践场景。 今天我们就来聊聊关于个人网站的一些常见问题——该选择哪种类型的网站？ 如何根据需求匹配技术栈？如何权衡无代码与自行部署等。最后，我将分享一些精心挑选的开源个人网站和博客模板。
常见的个人网站类型
个人网站的核心价值在于“需求与场景的匹配”——不同的身份和目标需要完全不同的网站类型。 不同的目的对应着不同的功能和视觉需求。特别是对于设计师来说，选择合适的类型可以最大化作品集的展示效果。 目前主流的个人网站可以分为三类，基本涵盖了大部分需求：
1. 内容分享（包括博客、技术笔记）
以“传递信息、积累知识”为核心，不局限于纯文本。 适合文案策划、开发者或行业观察者，也包括日常记录，主要以文字创作为主。 它强调“内容的可读性”和“搜索的便捷性”。
适用于
- 开发者（分享技术教程、排错笔记）；
- 行业观察者（输出设计趋势、职场观点）；
- 文案/创作者（日常感悟、短内容积累）。
2. 作品集展示（设计师/创作者的首选）
让“作品”成为绝对的主角，目标是“让访客直观地看到你的专业能力”。 它不仅仅是“展示作品”，而是要“把作品的价值说清楚”——这是设计师、插画师和产品经理核心的展示载体。
适用于
- 视觉/UI/UX 设计师（展示界面设计、交互原型）；
- 插画师/动效设计师（高分辨率作品集、创作过程）；
- 独立开发者（个人项目演示、产品原型）。
3. 个人品牌综合体（整合所有核心信息）
相当于一个“个人官网”，整合了作品集、博客、个人简介、联系方式等功能，适合有明确个人品牌定位的专业人士（如独立设计师、自由顾问）。 其核心是塑造立体的个人形象。在功能上，它需要结合两者的优势，同时在视觉上保持整体风格的统一，避免不同模块之间产生割裂感。
适用于
- 独立设计师/自由职业者（让客户同时看到作品、案例经验和服务范围）；
- 职场进阶者（整合项目经验、技术博客、个人荣誉，用于求职或合作洽谈）；
- 多领域创作者（如“设计师 + 摄影师”，需要同时展示两类作品）。
如何选择技术栈
选择技术栈本质上就是“需求匹配”。 你不需要掌握所有的工具，而是需要选择“能解决问题且具有长期价值的工具”。 很多人会陷入“技术焦虑”，但实际上对于个人网站这种规模小、技术难度低的项目来说，它属于轻量级的小项目。 技术的容错率非常高。
首先明确你的核心需求
在选择技术栈之前，问自己三个问题：
- 你的网站的核心功能是什么？ （是展示静态作品，还是需要动态交互？）
- 你需要后续的维护和功能迭代吗？ （需要频繁更新和修改内容模块吗？）
- 你想通过建站学习新技能吗？ （比如设计师想了解前端基础）
例如，如果你只想展示静态作品集，不需要复杂的交互，更新频率低，那么简单的 HTML+CSS+JS 就足够了。 更成熟的轻量级解决方案（如 Astro、Hugo）会更合适。 如果你想添加复杂的功能和交互，可以选择 React、Vue 等前端框架。 根据需求选择，并与 AI 交流技术栈方案。
推荐技术栈：React、Vue、Astro
对于设计师和初学者来说，流行技术栈的核心优势在于“学习成本低、社区资源和教程丰富、长期价值高”。
- 丰富的学习资源：这些技术栈都有成熟的社区。 无论是官方文档、Bilibili 教程，还是 AI 编程，你都能快速找到答案。 例如，最受欢迎的 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 预览、加入复杂的交互和动画，甚至嵌入自己制作的交互原型，完全不受平台限制，能够 100% 实现你的设计构思。
- 成本低廉：大多数部署平台（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 作品集网站
- 网址：https://portfolio-metaloopa.vercel.app/
- 开源地址：https://github.com/metal-oopa/personal-portfolio
- 技术栈：React
- 亮点：暗黑风格 + 动态交互，丰富的交互和视觉效果，作品页面添加了“悬停时文字逐渐显现动画”，细节非常用心。 功能上支持作品分类、个人技能展示、项目和联系表单，适合喜欢暗黑风格的设计师。
ThoughtLite
- 网址：https://ttio.cc/
- 开源地址：https://github.com/tuyuritio/astro-theme-thought-lite
- 技术栈：Astro + Tailwind CSS（静态加载快，响应式适配好）
- 亮点：个人强烈推荐，极简设计的轻量级博客，技术栈简单易上手，专注于文字创作，支持 Markdown 编辑和深色模式切换。 干净现代的美学设计，加载速度极快（SSG 优化），并且支持多语言。文字创作体验极佳。
最后
AI 确实能帮我们快速开发，但真正具有品牌效应和价值的个人网站从来都不是赶出来的，而是打磨出来的——打磨功能、细节，打磨出自己的风格。 如果你是一名设计师，不妨花点时间尝试一下自行部署，即使只是从修改开源模板开始。 最终上线的不仅仅是一个网站，更是你对“设计 + 技术”的探索。 毕竟，那种能够 100% 落地自己想法的感觉真的很有成就感。 如果你在建站过程中遇到问题，欢迎加我好友，一起交流沟通。