hexo博客部署到Vercel

hexo博客 评论

将 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证书续期的问题了。一切都是全自动的！

李鑫微信公众号李鑫X

记录生活的点滴