搭建个人作品集网站

技术招聘官平均花不到三十秒快速过一份候选人的作品集，然后决定要不要细看。在这段窗口里，一个没法访问或杂乱无章的作品集网站，会悄悄把你从候选名单里划掉。你的作品集不是自传，而是一个把好奇的招聘经理转化成“约个面试”请求的转化页。你在结构、托管和性能上的每个设计决定，都决定了这次转化会不会发生。下面是一条跳过教程、周末就能上线可访问网站的搭建路径。

那些能让设计师拿到 offer 的作品集，很少展示十二个项目。真正能转化的展示四个项目、一条清晰的叙事主线、和一个很快的加载速度。在审阅过数百份候选人作品集之后，招聘经理们一致表示，首轮粗略扫描通常不到两分钟，而这次扫描决定了你的工作会不会被再看第二眼。搭建作品集网站不再是可以选装的事业配件——它是“被人发现”和“被人无视”的分水岭。这篇攻略会一步步讲清楚：从选技术栈到上线域名，让你能发布一个为自己服务的网站，而不只是存在着的网站。

第一步——动手写代码前先定好叙事

选框架之前，先写一句话回答：这个网站给谁看，你想让他们做什么？想接项目的外包者，和想进产品公司的初级开发，讲的故事不同。作品集不是简历，而是一个论点。你的主标题应该点出角色和成果，关于页解释成长弧线，而每个项目都要为某一个论断服务。如果你说不出那个论断，这个网站不管工程做得再好都会显得松散。从信息开始，让技术选择服务于重点，这正是强作品集和喧闹作品集的分水岭。

作品集搭建器横向对比

叙事定清楚后，搭建工具的选择就该跟着你的约束走。下面这张表直接对比最常见的几条路径，假设你是单打独斗、自己上线和维护站点。

把订阅“累计涨价”算进去很关键，因为作品集是个长期资产。想要近乎完全的控制和最低的持续成本，静态路线赢。想完全不碰代码、付一笔适度月费，Squarespace 或 Framer 最快。这个判断和我们在整类 Web开发入门 权衡里的思路一样：合适的工具，是你真愿意维护几年的那个。国内如果只想快速上线，很多设计师也直接用阿里云/腾讯云的静态托管或微信小程序云开发。

第二步——按维护成本选技术栈，别追热点

你的作品集得在线撑很多年，所以要选一个低持续成本就能维护的技术栈。静态网站在这个指标上赢，因为它不需要你需要不停打补丁的服务器。对大多数人来说，静态站点生成器（比如 Astro、Eleventy）加一个基于 Git 的 CMS 是最佳选择：快、安全、几分钟就部署。想要最简单的路径，Netlify 或 Vercel 给免费托管并绑上自定义域名。常见的坑是：用静态页就够时，却硬做一个动态应用。每套登录系统和数据库，都是你一年后会懒得理的维护负担。这个决定和更广的 Web 开发基础直接相关——选对复杂度等级，常常比多会几个框架更有价值。国内环境里，Gitee Pages、阿里云等对静态站也很友好。

第三步——按你的水平选路线

去作品集有三条诚实的路，按你手头有多少时间选。最快的路是 Squarespace 或 Webflow 这类平台：模板搞定布局，你专注内容。这适合这周就要上线的情况。中间路线是用一个 starter 模板跑静态站点生成器，给你自定义域名和干净代码，学习曲线适中。进阶路线是从零手写一切，学到最多，但会把上线拖后几周。别为走最快的路感到羞耻——很多在职专业人士就是先上模板、证明价值、有了流量后再用自定义设计重建。关键是要快速上线一个真实的东西，因为上线运行的作品集，永远胜过一份完美的草稿。

第四步——搭好真正会被访问的锚定页

导航只保留四站：首页、作品/项目、关于、联系。再多就稀释了重点。首页放你的名字、角色、一句结果导向的话。项目页展示三到五个案例研究，每个都包含问题、你的角色、过程、可衡量的结果。关于页是一段带照片和专长的简短人话，不是简历倒灌。联系页是一个表单、一个邮箱、加你的社交链接——仅此而已。每个页面只领一件事，每个项目都要回答你的客户会先问的那个问题。想在项目里把研究驱动的决策记录好，你怎么框定证据和用户洞察所用的严谨度，和 UI设计入门 及英文站 UI/UX 设计 讲的方法论是相通的。

第五步——让所有人都能快速访问

速度和可访问性不是锦上添花，而是决定谁继续读下去的过滤器。压缩图片，让整页远低于 1MB，移动端加载目标在两秒内，用在线测速工具测到过为止。可访问性同样实际：用正确的标题层级、加描述性 alt 文本、保证颜色对比度、让所有东西都能用键盘操作。这些选择同时扩大了受众并提升搜索排名，正好是无障碍基础教程覆盖的领域。如果你想要干净、快、少写代码的搭建，而深度设计不是你的强项，那套以视觉为先的工作流能帮你不靠 CSS grid 功底就排出流动的版式和易读的字体。一个无障碍的作品集不是合规复选框，而是竞争优势——因为你所在领域的大多数作品集仍然无视它。

第六步——在不牺牲性能的前提下加交互

轻量交互让作品集显得有活力，但重 JS 会毁掉你刚建好的速度。为滚动效果加一段小脚本没问题；为了加一个动画而打包一百 KB 运行时的框架就不行。如果你的站点需要更丰富的交互，靠扎实的 JavaScript 基础 来做——干净的 vanilla 代码或一个小库，永远好过沉重依赖。心智模型很简单：你往页面里加的每一字节，都是不耐烦的访客要付的一次“过路费”，而由访客来决定这笔过路费值不值。宁可要更少、打磨更好的交互，也不要花哨但慢的页面。

第七步——写把浏览者变成客户的项目页

项目页是案例研究，不是图片墙。开头用一两句利落的话讲清业务问题，说明你的角色和约束，然后带着证据走一遍过程——草图、用户流程、前后对比。结尾给一个可衡量的结果：转化提升、加载变慢幅度、留存增长。数字才是把作品集和剪贴簿区分开的东西。如果你用博客或 CMS 搭了站点，为每个招牌项目发一份短案例研究，并让打磨过的作品保持可见。一个能展示成果的作品集，告诉招聘经理你懂得设计是为了推动业务指标、而不只是好看——这和 能拿下面试的数据作品集项目 背后的心态是同一个。

第八步——搞定域名与上线检查清单

买一个和你的名字或一个站得住的品牌匹配的域名，配一个专业邮箱，加上标准统计。上线前过一遍清单：测每个链接、在几个宽度下看移动端布局、确认联系表单能发到你的收件箱、在干净浏览器里验证站点。然后在你的目标客户真正聚集的地方宣布它。上线不是终点，而是开始。每季度回去看一眼、下线过时项目、随技能成长刷新主标题。如果你像维护一间实体办公室那样，为最好的作品保持一个永久的网上之家，你就创造了一份独立专业人士依赖的持久资产——这也是把作品集当活系统、按 Web 开发最佳实践来对待，能回报你多年的原因。想短期再冲一下求职表现，可以直接看本站中文的简历优化技巧，把线上叙事和线下简历对齐。

常见问题

作品集到底该放几个项目？

三到五个扎实的案例研究，是实际上的最佳区间。每个都要是一个完整案例：问题、你的具体角色、过程、结果。超过五个，质量通常会下滑，审查者也会失去注意力。讲故事的质，胜过截图的量。

搭作品集网站需要会写代码吗？

不需要。Squarespace、Webflow 和 WordPress 主题都能零代码上线。如果你想把底层技能当作职业投资来学，一个静态站点生成器加上实用的 JavaScript 基础，就能让你在不多费太多劲的情况下获得多得多的控制力。

已经有免费子域名，还要用自定义域名吗？

要。自定义域名传递出你把工作当职业资产的态度，而且它能经受住未来换托管平台的变动。一个域名比一个软件订阅还便宜，是你职业工具箱里杠杆率最高的购买之一。国内直接用 .com 或 .cn 域名绑定阿里云、腾讯云托管即可。

上线前为无障碍多花时间真的值得吗？

值得，而且投入很小——正确的标题、alt 文本和对比度检查，通常只多花几小时。它扩大你的潜在受众、改善 SEO、在很多地区还有法律相关性。无障碍作品集也恰好向你想打动的招聘经理，传递了“注重细节”的信号。

重做作品集时最大的错误是什么？

从零重造技术，而不是改进内容。从模板切到自定义代码可能花掉几周，而真正的瓶颈通常只是案例研究太弱、图片太慢。先修内容和性能，再考虑换技术栈。