使用 GitHub 和 Vercel 部署个人网站

使用 GitHub 和 Vercel 部署 Next.js 博客项目

背景： 我希望可以把我的Next开发的blog部署到互联网上，同时我希望平台式免费的。因为涉及到后续更新和维护，同时可以后续会有多人协同开发、或者我一个人在多台电脑上开发blog，所以希望该站点能和Github这种平台结合到一起，根据github上最新版本来更新。正好，GitHub 结合 Vercel 的方案是一个非常理想的选择。

github仓库创建

首先需要在 GitHub 上创建一个远端仓库用来存储网站本地项目代码和所有相关的静态资源（Vercel支持私有仓库，这样源代码就不会泄漏）。创建完成后，这个远程仓库就应该是我的本地项目的远端，即用来存放我的开发代码，也用于存放后面网站需要的代码。 我一般使用 master 分支作为部署网站的版本，其他分支可以作为自己的测试版本。

# 每次我需要更新，我会把代码推送到 origin master 分支
git push origin master

Vercel 部署

参考：https://juejin.cn/post/7517431514176847899， 里面讲到了 github部署

登录 Vercel，注册一个账号，这个账号不一定是用github登录，比如我就是使用 google 账号登录。 然后进入 Vercel，选择 add new project , 然后选择 Import Git Repository, 如果是 github 就选择 github，先登录 github，它会自动识别github 里面的项目，在检测到 Next.js 项目后，会自动选择合适的构建设置。对于你的博客项目，它能够正确识别 App Router 结构，并生成生产版本。部署成功后，Vercel 会提供一个类似 yourname-vercel.app 的访问地址，你可以在浏览器中打开验证网站是否正常运行，并且可以在 Vercel 里面进行修改域名，自定义域名名称。

对于Vercel来说，你部署的网站实际上是你作为Vercel 用户下面的一个项目。

维护更新

后续需要对网站加功能，依然是先本地调试，然后push到github，Vercel 会自动检测该网站项目对应的github分支最新的commit，然后更新。