使用 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,然后更新。

相关推荐
怕浪猫7 小时前
GEO 优化到底是什么?AI时代内容创作者必须懂的新技能
算法·面试·github
miofly9 小时前
Aleph Alpha 开源 78B 参数 MoE 模型 Kolibri
开源·github
JackSparrow41410 小时前
和AI一起将全部CSDN博文迁移到个人博客站
人工智能·程序人生·ai·github·cloudflare·astro·静态博客
hasty11 小时前
不上传新包,也能改变用户拿到的版本:npm dist-tag 的 OIDC 权限治理
前端·npm·node.js
CoderJia程序员甲18 小时前
GitHub 热榜项目 - 周榜(2026-10-03)
ai·大模型·llm·github·ai教程
miofly18 小时前
GitHub 今日推荐|lipflow:无麦克风唇读文字输入工具
python·开源·github
寺中人18 小时前
Xshell 完全入门指南:从安装到实战,远程连接+文件传输+会话管理全拆解
git·ssh·github·php·远程连接·xshell·运维工具
蜗牛互联网20 小时前
从GitHub动态工作流理解确定性编排与Agent判断边界
java·人工智能·后端·github
m4Rk_21 小时前
【论文阅读】Agent 记忆机制(89):PersonaAgent——构建 Memory、Persona 与 Action 的持续反馈闭环
论文阅读·人工智能·学习·开源·github
u13013021 小时前
GitHub 热榜项目:日榜(2026-10-03)
github