用 Next.js 制作作品集网站 | 入门

1. 从零开始做好准备

如果你找到了这篇文章，很可能正在考虑搭建自己的网站，却还不知道该从哪里开始。

也许你没有任何编程经验，也许你一直觉得制作一个作品集网站太复杂了。

好消息是，即使你不是程序员，也可以让自己的网站运行起来。

在这个系列教程中，我们会从 Web 技术的基础知识开始，一步步带你构建并发布自己的作品集网站。我们会假设你对 Web 开发几乎一无所知，因此你不需要具备任何编程经验或计算机科学知识。

我们会使用现成的模板和一键部署工具，让你把精力放在打造属于自己的网站上，而不必担心复杂的技术配置。

关于使用 AI 的一点建议

到了 2026 年，搭建网站已经变得更加容易。本教程中的许多任务，现在只需要向 AI 工具描述你的需求就能完成。

不过，你应该始终记住，AI 生成的代码并不总是可靠或安全的。如果不了解 AI 在做什么，你可能会给网站引入错误、安全漏洞或意料之外的行为。因此，我们也准备了额外的指南，帮助你了解如何自定义、维护和保护自己的网站，而不必完全依赖 AI。

虽然你可以用 AI 编程工具完成这个系列中几乎所有的任务，但我们还是鼓励你先自己动手尝试，再让 AI 帮你解释陌生的概念、检查修改或排查问题。

毕竟，本教程的目标不仅是帮助你发布一个作品集网站，也希望你能理解它是如何工作的。

当然，如果你时间有限，只想尽快拥有一个好看的作品集网站，也可以选择最适合自己的 AI 工具。我们还准备了 AGENTS.md，希望能帮到你和你的编程智能体。

2. 什么是网站？

我们准备搭建一个网站，但网站到底是什么呢？

你可能每天都会访问许多网站：在 Google 上搜索信息，在 YouTube 上观看视频，或者阅读一篇在线文章。但你有没有想过，这些网站究竟是由什么组成的？

网站与网页

首先，我们来区分两个经常被混用的词：网站（website）和网页（webpage）。

网页是你在浏览器中看到的一个页面，例如作品集的首页，或介绍某个项目的页面。

网站则是相关网页和资源的集合，通常可以通过同一个域名访问。

你可以把网站想象成一本书，而网页就是书中的一页页内容。

例如，你的作品集网站可能包括：

• 首页 — 简单介绍你自己。
• 项目 — 展示你的作品。
• 关于我 — 介绍你的背景、技能和经历。
• 联系我 — 提供与你取得联系的方式。

当然，并不是每个网站都需要多个页面。有些作品集网站会把所有内容放在一个可以滚动浏览的页面上。

网页由什么组成？

大多数现代网页都建立在三项基础 Web 技术之上：HTML、CSS 和 JavaScript。

**HTML（HyperText Markup Language，超文本标记语言）**定义网页的结构和内容。它告诉浏览器有哪些元素，例如标题、段落、图片和链接。

**CSS（Cascading Style Sheets，层叠样式表）**控制这些元素的外观，包括颜色、字体、间距和布局。

JavaScript让网页具有交互能力。例如，打开导航菜单、筛选项目，或在用户点击按钮时更新内容。

你可以把它们想象成建造一栋房子：

• HTML是房子的结构和房间。
• CSS是装修和室内设计。
• JavaScript是灯光、自动门等功能。

let age = 20;
age = "twenty"; // 合法的 JavaScript

let age: number = 20;
age = "twenty"; // 类型错误：不能将 string 赋值给 number

这些技术相互配合，构成了你每天浏览和使用的网页。

现在不用急着学习如何编写 HTML、CSS 或 JavaScript。我们的作品集模板已经包含了入门所需的内容，后续章节在自定义网站时，我们会逐步了解这些技术。

目前，你只需要记住：网站不是一张图片或一份文档，而是内容、资源和代码的集合，浏览器通过它们来显示网页。

3. Web 是如何工作的？

现在我们知道网站由什么组成了，接下来看看它是如何运行的。

假设你想访问某个人的作品集网站。你打开浏览器，在地址栏中输入 https://mironchen.me，然后按下回车。

片刻之后，网站就出现在屏幕上。

看起来很简单，但浏览器怎么知道去哪里寻找这个网站？网站的内容又是怎么传到你的电脑上的呢？

浏览器

浏览器是用来访问网站的应用程序，例如 Google Chrome、Safari 或 Firefox。它会请求网站资源，并将内容显示在屏幕上。

事实上，浏览器本身可能复杂到堪比一整个操作系统。

服务器是通过网络向其他设备提供资源或服务的计算机或软件系统。Web 服务器会响应请求，并返回网站内容，包括 HTML、CSS、JavaScript 和媒体资源。

你可以把这个过程想象成在餐厅点餐：

• 你（浏览器） 从菜单上点餐。
• 厨房（服务器） 准备并提供你点的食物。
• 食物（响应） 被送到你面前。

这就是客户端–服务器模型（Client–Server Model）。浏览器充当客户端，向服务器发送请求；服务器处理请求，再返回响应。

IP 地址与域名 （Domain）

那么，浏览器怎么知道该联系哪台服务器呢？

在互联网上通信的设备使用 IP 地址（Internet Protocol address，互联网协议地址）来标识网络接口，并将数据传送到正确的目的地。

例如，一个 IPv4 地址可能长这样：203.0.113.10。

不过，对普通用户来说，为每个网站记住一长串数字并不方便。

因此，我们会使用域名，例如这个博客的域名 mironchen.me。

域名是一种方便人类阅读和记忆的名称，可以用来访问网站或其他互联网服务。你只需要在浏览器中输入域名，浏览器就会查找相应的服务器，为你获取内容。

DNS：互联网的地址簿

当你输入 mironchen.me 时，浏览器需要知道应该连接到哪里。

这时就需要 DNS（Domain Name System）了。

DNS 就像互联网的地址簿，帮助我们把域名转换成计算机可以用来建立连接的 IP 地址。

比如：

mironchen.me -> DNS -> 76.76.21.21

在这个例子中，mironchen.me 所对应的是 76.76.21.21 这 一台 服务器。在实际情况中，DNS 可能涉及多台服务器、缓存结果以及不同类型的记录。不过，目前你只需要记住一点：

DNS 帮助浏览器找到与域名对应的网络地址。

我们会在后续介绍如何为网站设置自定义域名时进一步了解 DNS。

HTTP 与 HTTPS：它们如何通信？

找到服务器只是其中一步。浏览器还需要请求网页，而服务器也需要知道应该返回什么。

这就是 HTTP（Hypertext Transfer Protocol，超文本传输协议）的作用。

HTTP 定义了浏览器与 Web 服务器如何交换请求和响应。

例如：

1. 浏览器发送请求，获取某个网页。
2. 服务器处理请求，并返回响应。
3. 浏览器接收所需的资源，将网页渲染到屏幕上。

你可能也注意到，大多数网站地址以 https:// 开头，而不是 http://。

多出来的 S 代表 Secure（安全）。

HTTPS 使用加密来保护浏览器与网站之间的通信。

不过，HTTPS 并不保证网站本身值得信任，也不保证它没有安全漏洞。

后续我们介绍如何为网站申请加密证书时会进一步了解 HTTPS。

把这些知识串起来

到这里，我们已经了解了网站由什么组成，以及它在背后是如何工作的。

我们知道了 HTML、CSS 和 JavaScript 是大多数网站的基础，也知道浏览器会与 Web 服务器通信，获取并显示网页。我们还了解了域名、DNS 和 HTTPS 如何帮助我们通过熟悉的地址访问网站，并保护通信安全。

你不需要记住这里介绍的每个细节。随着我们继续搭建和自定义作品集网站，我们会再次遇到这些概念，并在实践中了解它们的作用。

不过，还有一件事我们没有做：把自己的网站放到互联网上。

让网站在自己的电脑上运行是一回事，让任何人都能随时随地访问它，则是另一回事。

通常，这需要设置托管环境、做好网站部署的准备，并配置访问方式。幸运的是，现代托管平台可以替我们完成其中的大部分工作。

在下一部分，我们会使用 Vercel 和一键部署模板，让你的作品集上线，而不必自己配置服务器。

让我们把你的网站发布到网上吧！