用 Next.js 制作作品集网站 | 一键部署

1. 部署你的网站

在上一篇文章中，我们了解了网站由什么组成，以及 Web 是如何工作的。接下来，我们就动手试试。

这一篇的目标很简单：把你的作品集网站发布到网上，让你能在浏览器中打开它，也能把网址分享给别人。

我们会使用 portfolio-template，一个现成的 Next.js 网站模板，里面已经有了首页、关于页面和示例项目。页面布局和代码都已准备好，跟着这一篇操作，你不需要自己写代码。

发布网站要用到 Vercel，这是一个网站托管平台。把网站发布到互联网上的过程，叫作部署（deployment）。Vercel 会读取模板的代码，完成运行前的准备，让其他人也能通过互联网访问你的网站。

为什么不使用 Codex Sites？

Codex Sites 等工具把建站和托管放在一起，确实能让网站更方便地上线。

不过，这个系列也希望帮助你搭建一个不依赖某个特定平台或工具的网站。我们希望你知道网站文件在哪里、怎么修改、怎么发布。以后需求变了，你也能自由选择其他工具。

这个模板是一个 Next.js 项目，代码、内容和图片都可以保存在你自己的电脑上。我们会把一份副本存到 GitHub，再用 Vercel 完成第一次部署。以后，你可以换一个代码编辑器，选择用不用 AI 助手，也可以把项目迁移到其他支持 Next.js 的托管平台。迁移时可能需要重新配置一些东西，但网站所需的文件始终在你手里。

我们从 Vercel 开始，但这不意味着你以后必须一直用它。GitHub 和 Codex Sites 等工具也是如此：即使换了工具，你也应该能继续修改和维护自己的网站。

模板中有一个 Deploy with Vercel 按钮，点击它就能开始部署。这就是常说的一键部署：大部分配置会自动完成，你只需要登录账号，再给自己的模板副本起个名字。

这一次，我们先保留模板里的示例内容，使用 Vercel 免费提供的、以 .vercel.app 结尾的网站地址。用它完成第一次部署已经足够，不过，如果打算长期维护作品集或个人网站，我们还是建议以后换成自己的域名。

部署完成后，你的网址可能是 my-first-portfolio.vercel.app 这样的形式，具体名称会有所不同。这个地址由 Vercel 自动分配。

如何设置自己的域名、修改文字和图片、替换项目内容，我们会在后续文章中慢慢介绍。现在，先把网站运行起来吧。

2. 需要准备什么？

这一篇的操作都可以在浏览器中完成。开始之前，你需要准备两个账号：

• GitHub 用来保存你自己的一份网站文件。这些文件会放在一个*仓库（repository）*里。
• Vercel 用来托管网站，让其他人可以访问它。

已有账号的话，直接登录就好；还没有的话，请先注册。注册 Vercel 时，建议使用 GitHub 账号，这样也方便把两个账号关联起来。按页面提示完成连接即可。

3. 打开部署页面

打开 GitHub 上的模板，向下滚动到文件列表下面的 README（项目介绍），找到靠近顶部的 Deploy with Vercel 按钮并点击。

你也可以直接点击这个按钮：

登录后，如果页面提示你连接 GitHub，按提示操作即可。接下来，你会看到类似下面的 New Project 页面：

确认 Cloning from GitHub 区域显示的模板是 MironChen/portfolio-template。

在 Git Scope 中选择你的 GitHub 账号。这里显示的是你自己的账号名，所以会和截图不同。

然后，在 Private Repository Name 中填写仓库名称，例如 my-portfolio。Vercel 会把模板复制到你的 GitHub 账号下，这就是新仓库的名字。

最后，在 Vercel Team 中选择用来托管网站的账号或团队。

4. 创建你的网站

选好账号、填好仓库名称后，页面应该会是下面这样：

点击醒目的 Create 按钮。

Vercel 会先在 GitHub 上为你复制一份模板，然后开始部署。它会下载网站所需的工具，并完成页面的构建（build）。你可以把构建理解为：把代码处理成可以供访问者使用的网站。

这时保持页面打开，等 Vercel 处理就好。页面上可能会出现进度提示和一行行构建信息，不用急着弄懂每一行，先等待部署完成。

部署成功后，你会看到 Congratulations!，以及你的网站预览：

你的第一次部署就完成了！

如果部署失败，可以打开构建日志，看看哪里报了错。日志就是构建过程中留下的记录；如果需要找人帮忙排查，记得把错误提示保存下来。

5. 打开你的网站

接下来，打开这个项目的 Vercel 控制台。如果你还在部署成功的页面，可以从那里继续进入控制台。也可以直接访问 Vercel，找到刚刚创建的项目并打开。

在 Overview 页面中，你会看到 Production Deployment 区域。这里的 Production（生产环境），就是正式发布给访问者使用的网站版本。

确认状态为 Ready，再点击这个区域右上角的 Visit，就能打开你的网站。

现在，模板的首页应该已经出现在你的浏览器里了。试着点开 About，再选一个项目，看看项目页面。网站上的姓名和项目暂时还是模板里的示例，之后我们会换成你自己的内容。

找到可以分享的网址

回到 Overview 页面，在 Domains 下找到以 .vercel.app 结尾的地址。这就是你可以分享的网址。复制它，如果前面没有 https://，分享时补上即可。

你可能还会在 Deployment 下看到一个更长的地址，它对应的是这一次部署。分享作品集时，使用 Domains 下的生产环境地址就好。以后更新网站，大家仍然可以通过这个地址看到当前发布的版本。想了解这两种地址的区别，可以看看 Vercel 的网址指南。

分享之前，先用浏览器的隐私或无痕窗口打开这个网址试试。如果不登录 Vercel 也能正常访问，其他人就能打开你的网站了。

关于在中国大陆访问网站的特别说明

如果你身处中国大陆地区，或者想把网站分享给中国大陆的访问者，使用 xxx.vercel.app 地址时可能会遇到访问问题。

受相关规定和网络限制影响，在中国大陆访问 Vercel 托管的网站可能会比较慢，甚至无法打开。使用自定义域名可能有助于缓解这个问题，后续文章里我们会介绍具体的设置方法。

更多信息，请参阅 Vercel 关于从中国大陆访问其托管网站的指南。

接下来做什么？

到这里，你已经用现成的模板发布了一个能正常运行的网站。网站文件保存在你的 GitHub 仓库里，Vercel 负责托管，大家可以通过 .vercel.app 地址访问它。

目前继续使用这个地址就好，完成这一篇的操作不需要购买域名。

还有些细节没弄懂也没关系。这一篇的目标就是让网站上线，而你已经做到了！

接下来，我们会一步步把模板变成你自己的作品集：修改姓名和自我介绍，放上你的项目和图片，再绑定自己的域名。我们也会继续了解网站是怎么运行的、平时该怎么维护，让它在未来几年里都能持续运行。

先把网站和对应的 Vercel 控制台加入书签吧，之后修改网站时还会用到它们。

如果你有任何问题，欢迎在下方留言 :)