你可能以为建个人网站需要学 HTML/CSS，或者花几百美金找人开发。但在 2026 年，零代码工具已经成熟到可以让零基础的人在 30 分钟内做出一个漂亮的个人作品集网站。
本篇教程用两个工具：Canva（设计素材）+ Carrd（搭建网站），从零开始带你做一个响应式单页作品网站。不需要写一行代码。
准备清单
| 你需要什么 | 说明 | 花费 |
|---|---|---|
| Canva 账号 | 用来做 Logo、Banner、作品展示图 | Free |
| Carrd 账号 | 用来搭建和发布网站 | Free（Carrd 域名）/ $19/年（自定义域名） |
| 域名（可选） | 比如 yourname.com | ~$10/年（Namecheap 等） |
| 个人照片 + 作品截图 | 5-10 张展示你作品的图片 | $0 |
| 文字内容 | 个人介绍、项目描述、联系方式等 | $0 |
🔗 注册 Canva（免费开始）→ 🔗 注册 Carrd（免费开始）→
第 1 步：用 Canva 设计素材（15 分钟）
1.1 设计个人头像/Avatar
打开 Canva，搜索"Circle Profile Photo"模板：
- 选择「Create a design」→ 搜索「Logo」→ 选 500×500 px
- 上传你的个人照片
- 在左侧「Elements」里搜「Circle Frame」，把照片放入圆形框架
- 如果需要，加一个背景色或渐变
- 导出为 PNG（透明背景）→ 保存到本地
💡 Canva Pro 用户（$12.99/月）可以用 Magic Studio 一键去背景，效果很好。
1.2 设计 Hero Banner（网站顶部的头图）
这是用户打开网站最先看到的部分，第一印象最重要。
- Canva 里「Create a design」→ 选「Desktop Wallpaper」（1920×1080 px）
- 背景：用渐变色（Element → Gradients）或简单的几何图案，不要放照片以免和文字冲突
- 放上你的名字 + 一句话简介，字体建议用 Inter / Montserrat （免费字体）
- 导出为 JPG
1.3 设计作品展示卡片
如果你有 3-5 个项目要展示，给每个项目做一张统一风格的卡片：
- Canva「Create a design」→ 选 800×600 px
- 统一使用相同的布局：项目截图 + 项目名称 + 简短描述
- 保持风格一致：相同的字体、配色、圆角、间距
- 导出为 PNG
完成以上三步后，你应该有：
- 1 张头像 PNG
- 1 张 Hero Banner JPG
- 3-5 张作品卡片 PNG
第 2 步：用 Carrd 搭建网站（15 分钟）
Carrd 是目前最简洁的单页网站搭建工具。2026 年 Carrd 依然保持着极致简约的设计哲学——一切都在一个页面里完成。
2.1 选择模板
- 登录 Carrd
- 点击「New Site」→「Start from a Template」
- 在模板分类里选「Portfolio」
- 推荐「Paradigm」或「Momentum」模板——适合展示个人作品
2.2 设置页面样式
进入编辑器后，首先设置全局样式：
| 设置项 | 推荐值 |
|---|---|
| Canvas 宽度 | 960px |
| 背景色 | #FAFAFA 或 #FFFFFF |
| 主色调 | 选一个品牌色（如 #4F46E5 Indigo） |
| 字体 | 标题用 Bold，正文用 Regular |
| 圆角 | 12-16px（现代感） |
2.3 添加各板块
Carrd 使用「Section + Element」的模式。按以下结构添加：
Section 1：Hero（顶部）
- Element → Image：上传 Hero Banner
- Element → Text：你的名字（H1，大号）
- Element → Text：一句话简介（副标题）
- Element → Button：链接到作品区或联系你
Section 2：About（关于我）
- Element → Image：上传头像
- Element → Text：3-5 句自我介绍
- Element → Icons（可选）：GitHub / LinkedIn / Twitter 链接
Section 3：Portfolio（作品展示）
- Element → Columns：创建 2-3 列布局
- 每列：Image（作品卡片）+ Text（项目名称）+ Text（描述）+ Button（查看详情链接）
Section 4：Contact（联系方式）
- Element → Form：如果你需要收集访客邮箱
- Element → Text：邮箱地址
- Element → Icons：社交媒体链接
2.4 发布网站
- 点击右上角「Publish」
- 选择 URL：免费版用
yourname.carrd.co，Pro 版可以绑自定义域名 - 设置 SEO Title 和 Description
- 点击「Publish」
完成！你的个人作品网站已经上线了。🌐
第 3 步：进阶优化（可选）
绑定自定义域名
如果你有自己的域名（如 yourname.com），Carrd Pro ($19/年) 支持绑定：
- Carrd 内设置 → Custom Domains
- 添加你的域名
- 在域名注册商（如 Namecheap）添加 Carrd 给的 DNS 记录
- 等待 DNS 生效（通常 5-30 分钟）
$19/年 = 一个月不到 $1.6，强烈推荐，让网站看起来更专业。
添加 Google Analytics
Carrd Pro 支持嵌入代码：
- 注册 Google Analytics 账号，获取 Measurement ID
- Carrd 设置 → Advanced → Custom Code → Head
- 粘贴 GA 跟踪代码
- 保存后就能看到访客数据
添加表单收集线索
如果你想收集访客邮箱（比如"获取我的简历 PDF"），Carrd 内置了表单功能，可以连接到 Google Sheets、Mailchimp、或者 Zapier 做自动化。
💡 设计建议（来自做了 100+ 个 Carrd 页面的经验）
- 少即是多。 单页网站最好的作品集通常只有 4-5 个板块。越多越乱。
- 配色不超过 3 个。 主色 + 辅助色 + 中性色（灰/白）。不要五颜六色。
- 字体不超过 2 个。 标题一个、正文一个。Carrd 内置了 Google Fonts。
- 手机优先。 Carrd 会自动适配移动端，但发布前一定用手机打开检查一下排版。
- CTA 清晰。 每个页面应该有一个明确的 Call-to-Action（查看我的作品/下载简历/发邮件给我）。
推荐工具组合
如果你觉得 Canva + Carrd 还不够，可以加这些：
| 工具 | 用途 | 价格 |
|---|---|---|
| Notion | 当作品集管理后台，记录每个项目的详情 | Free |
| Figma | 做更精细的视觉设计（比 Canva 更专业） | Free |
| Google Analytics | 追踪网站流量 | Free |
| Typeform | 做更漂亮的联系表单（替代 Carrd 内置表单） | Free（10 个问题/月） |
🔗 Notion 免费开始 → 🔗 Figma 免费开始 →
常见问题
Q: Canva 免费版够用吗？
A: 做个人作品集完全够用。免费版有 250,000+ 模板、5GB 云存储、基础 AI 功能（去背景每天有限额）。Pro 版 ($12.99/月) 多了 Magic Studio 全套 AI 工具、品牌套件、1TB 存储，适合频繁做图的设计师。
Q: Carrd 免费版和 Pro 的区别？
A: 免费版支持无限网站，但只能用 xxx.carrd.co 子域名。Pro ($19/年) 支持自定义域名、表单、嵌入代码、Google Analytics、去除 Carrd 水印。$19/年很良心。
Q: 我可以用这个网站找工作吗？
A: 完全可以！很多设计师和开发者的个人作品集就是用 Carrd 做的。只要内容好，HR 不会在意你用什么工具搭的网站。
Q: 能不用 Canva 吗？用 Figma 代替行吗？
A: 完全可以。Figma 更适合有设计基础的用户，Canva 更适合完全没有设计经验的新手。两个工具的免费版都够做素材。
Q: 网站加载速度快吗？
A: Carrd 的网站加载速度非常快，全球 CDN 分发。你上传的图片大小控制在 500KB 以内就好。
总结：30 分钟 = 一个专业个人网站
| 步骤 | 工具 | 时间 | 花费 |
|---|---|---|---|
| 1. 设计素材 | Canva | 15 分钟 | Free |
| 2. 搭建网站 | Carrd | 15 分钟 | Free / $19/年 |
| 3. 绑定域名 | Carrd Pro | 5 分钟 | ~$10/年（域名费） |
| 总计 | ~35 分钟 | $19-29/年 |
如果你一直拖着没做个人网站，现在就是最好的时机。花一个午休的时间，你就能拥有一个专业、好看、能打的作品集。
Disclaimer: Some links are affiliate links. We may earn a commission at no extra cost to you. Prices and features are accurate as of May 2026 and may change.