hexo博客部署到Vercel

将 Hexo 博客部署到 Vercel 是一个非常现代且高效的选择。Vercel 专为静态网站和前端框架设计,其最大的优势是与 GitHub 的完美集成和高度自动化

部署到 Vercel 后,你将获得:

  • 全自动部署:只需将代码推送到GitHub,Vercel就会自动生成和发布网站。
  • 全球CDN加速:你的博客在全球都有很快的访问速度。
  • 永久免费的HTTPS:Vercel会自动为你签发并续期SSL证书,一劳永逸。
  • 慷慨的免费额度:对于个人博客来说完全够用。

这个方案可以彻底解决“手动部署”和“手动续期SSL证书”的所有烦恼。


第一步:准备工作 - 关联并推送源码到 GitHub (超详细版)

Vercel 的工作模式是直接从你的 GitHub 仓库拉取代码。因此,第一步是确保你的博客源码已经托管在 GitHub 上。这个过程我们分解为最详细的步骤来操作。

阶段 A: 检查你当前的“关联”状态

在开始之前,我们先检查一下你本地的博客文件夹是否已经和某个 GitHub 仓库关联了。

  1. 在终端里,进入你的博客根目录。

  2. 运行以下命令来查看远程仓库信息:

    1
    git remote -v
  3. 分析结果:

    • 如果输出是空的,或者提示 fatal: not a git repository,那就说明你还没有进行任何关联。请直接跳到下面的 “阶段 B”
    • 如果输出了包含 github.com 的网址,那就说明你已经成功关联过了!你可以直接将最新的代码推送到 GitHub,然后直接跳到本教程的 “第二步:在 Vercel 上创建并部署项目”

阶段 B: 从零开始,完成关联与首次上传

如果你的检查结果是“未关联”,那么我们就来完整地走一遍这个流程。

  1. 在云端准备好你的仓库

    • 登录你的 GitHub 账号。
    • 点击右上角的 + 号,选择 New repository (新建仓库)。
    • 填写信息:
      • Repository name:给仓库起个名字,比如 lixin-blog
      • Private:**务必选择 Private (私有)**,这样只有你自己能看到源码。
    • 点击 Create repository 按钮。创建后,页面会显示仓库的地址,例如 https://github.com/sviplixin/lixin-blog.git。这个地址我们稍后会用到。
  2. 在本地完成关联并上传源码
    现在,回到你电脑的终端,确保你在博客的根目录下,然后严格按照顺序,依次执行以下命令:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # 1. 初始化 Git 仓库 (告诉 Git 要开始管理这个文件夹了)
    git init

    # 2. 添加所有文件到暂存区 (把所有源码都打包好,准备记录)
    git add .

    # 3. 创建第一个“提交”记录 (这是让分支存在的关键一步)
    git commit -m "首次提交我的博客源码"

    # 4. 重命名主分支为 main (一个好习惯,与 GitHub 保持一致)
    git branch -M main

    # 5. 进行“关联” (告诉本地仓库,它在云端的地址是什么)
    # 请把下面的URL换成你刚刚创建的仓库地址
    git remote add origin [https://github.com/sviplixin/lixin-blog.git](https://github.com/sviplixin/lixin-blog.git)

    # 注意:如果上一步提示 remote origin already exists,说明你之前可能关联过。
    # 请先运行 git remote remove origin 删除旧的关联,再重新运行上面的 add 命令。

    # 6. 完成首次上传 (将本地源码正式推送到云端的仓库里)
    git push -u origin main

    git push 命令成功执行后,你刷新 GitHub 仓库的页面,就能看到你所有的博客文件都已经上传上去了。至此,准备工作彻底完成!


第二步:在 Vercel 上创建并部署项目

这是整个流程的核心,但操作非常简单。

  1. 注册并登录 Vercel

    • 访问 Vercel 官网:https://vercel.com
    • 点击右上角的“Sign Up”,选择“Continue with GitHub”,使用你的GitHub 账号进行注册和登录。这会自动完成授权。
  2. 导入你的博客仓库

    • 登录后,进入 Vercel 的仪表盘(Dashboard)。
    • 点击 “Add New…” -> “Project”。
    • Vercel 会列出你的 GitHub 上的所有仓库。找到你存放博客源码的那个仓库,然后点击旁边的 “Import” 按钮。
  3. 配置 Hexo 项目(最关键的一步)
    导入后,Vercel 会尝试自动识别你的项目类型。

    • Framework Preset:Vercel 通常能自动识别出是 Hexo 项目。如果它识别错了,请手动在下拉框中选择 Hexo
    • Build and Output Settings请展开这个设置,检查并确保配置如下:
      • Build Command (构建命令): hexo generate
      • Output Directory (输出目录): public
      • Install Command (安装命令): npm install

    这三个设置告诉 Vercel 如何构建你的 Hexo 网站。通常选择 Hexo 预设后,这些都会被自动填好,你只需要检查一遍即可。

  4. 部署!

    • 检查无误后,点击 “Deploy” 按钮。
    • Vercel 就会开始从你的 GitHub 仓库拉取代码,执行 npm install 安装依赖,然后运行 hexo generate 生成静态文件,最后将 public 目录部署到其全球CDN网络上。
    • 你可以看到详细的部署日志。
  5. 庆祝成功

    • 等待一到两分钟,当你看到庆祝的烟花动画时,就代表部署成功了!
    • 点击页面上的截图或者 Vercel 提供的临时域名 (如 my-blog-xxxxx.vercel.app),就能看到你已经成功上线的博客了。

第三步:绑定你自己的域名

  1. 在你的 Vercel 项目控制面板中,找到顶部菜单的 Settings -> 左侧菜单的 Domains
  2. 在输入框中填入你想绑定的域名 (例如 blog.yourdomain.com),然后点击 Add
  3. Vercel 会自动检测并告诉你需要添加的 DNS 解析记录(通常是一条 CNAME 记录)。
  4. 请登录你的域名解析服务商后台(例如阿里云、腾讯云DNSPod、Cloudflare等),按照 Vercel 的提示添加或修改这条 CNAME 解析记录。
  5. 等待DNS解析生效(可能需要几分钟到几小时不等)。生效后,Vercel 会自动为你的域名签发并配置好SSL证书。你就可以通过自己的 https:// 域名访问博客了。

更新博客内容

从现在开始,你更新博客的流程变得无比简单和优雅:

  1. 在本地电脑上写完新文章或做了任何修改。
  2. 在博客根目录下,打开终端,运行 Git 三连:
    1
    2
    3
    git add .
    git commit -m "写了篇新文章"
    git push
  3. 完成! 你只需要把代码推送到 GitHub,Vercel 就会自动检测到更新,并在几分钟内完成网站的重新部署。

你再也不需要手动运行 hexo g -d,也不需要关心SSL证书续期的问题了。一切都是全自动的!