使用 GitHub 和 Vercel 部署个人网站

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

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

github仓库创建

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

shell 复制代码
# 每次我需要更新,我会把代码推送到 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,然后更新。

相关推荐
今夕资源网10 小时前
AI声音克隆软件 CosyVoice今夕一键整合包解压即用 阿里巴巴通义实验室开源 github斩获22K星标
人工智能·github·多国语言·声音克隆·零样本语音克隆·感情·ai语音克隆
iDao技术魔方10 小时前
Node.js v26.5.0 深度解读:import Text、流式 ReadableStreamTee、以及隐藏的安全加固浪潮
安全·node.js
胡萝卜术12 小时前
从聊天模型到本地执行助手:Remote MCP 多工具 Agent 实战
面试·架构·github
BAIGAOa12 小时前
还在手写 if-else 响应按键?我用 React-Ink 搭配键盘引擎解决了
node.js
Excel效率人14 小时前
飞书自动回复机器人开发:@机器人自助查询物流信息
机器人·node.js·飞书
慕容引刀14 小时前
告别Commit信息纠结:使用Git AI Commit插件实现规范化提交
人工智能·git·github·visual studio code·visual studio
GoGeekBaird1 天前
我开源了 BeeWeave,给 AI Agent 搭一个越用越懂你的知识创作台
后端·github
fthux1 天前
GitZip Pro 源码解析:一个 GitHub 文件/文件夹下载扩展是如何工作的(一)整体架构与扩展入口
人工智能·ai·开源·github·open source
第一程序员1 天前
Rust Agent 子进程执行:Command 之前,先定义输入和超时
python·rust·github
2501_936960361 天前
GitHub初步了解
github