还在用 hexo g -d 手动部署你的博客吗?每次换了电脑,是不是都得头疼地重新配置 Node.js 环境?今天,我来带大家解锁一个超级酷的懒人技巧:让 Netlify 或者 Vercel 来帮你全自动构建和部署你的 Hexo 博客!
1. 什么是“全自动”部署?
你可能之前就像我一样,使用 hexo d 命令把本地生成好的 public 静态文件夹推送到 GitHub Pages、Netlify 或者 Vercel。这种方式其实只是把这些平台当成了一个静态文件托管服务器。
而我们今天要聊的“全自动部署”,是一种更高级的玩法。我们不再推送 public 文件夹,而是直接把整个 Hexo 项目的源文件推送到 GitHub 仓库。Netlify/Vercel 会智能地检测到你的更新,然后在云端自动帮你执行 hexo g 命令生成静态文件,最后再把生成好的网站部署上线。
这样做的好处简直不要太爽:
- 随时随地更新博客:只要有网络,你甚至可以直接在 GitHub 网页上修改
source/_posts里的 Markdown 文件,提交后网站就自动更新了。 - 告别环境配置:换新电脑了?完全不用再装 Node.js、Git、Hexo CLI 这些乱七八糟的东西了。只要你电脑上有个浏览器能访问 GitHub 就够了!
- 完美的版本控制:你的所有文章和配置都由 Git 管理,再也不怕文件丢失了。
话不多说,开干!
2. 准备你的 GitHub 仓库
首先,你需要一个存放 Hexo 项目源文件的 GitHub 仓库。注意,是源文件,不是 public 文件夹。
在你的本地 Hexo 博客根目录下,有一个非常重要的文件叫 .gitignore,它的作用是告诉 Git 哪些文件或文件夹不需要被上传到仓库里。为了让自动部署顺利进行,我们需要确保 node_modules(依赖包)和 public(生成的网站文件)这两个文件夹不被上传。
这是我的 .gitignore 文件,你可以直接拿去用:
# 部署生成的文件
.deploy_git/
public/
# 依赖包
node_modules/
# 数据库文件和日志
db.json
debug.log
# 系统文件
.DS_Store
Thumbs.db
解析:
-
.deploy_git/和public/:这是 Hexo 生成和部署时产生的文件夹,我们希望云端服务自己去生成,所以本地的不用上传。 -
node_modules/:这个文件夹体积巨大,包含了项目的所有依赖。云端服务会根据你的package.json文件自动安装这些依赖,所以完全没必要上传它。
确保你的 .gitignore 配置正确后,就可以把你的 Hexo 项目推送到一个 GitHub 仓库了。为了防止你的 Markdown 源文件被别人轻易拿走,我强烈建议你把这个仓库设置为**私有 (Private)**。
最终,你的仓库看起来应该是这样的(没有 public 和 node_modules 文件夹):
.
├── _config.yml
├── .gitignore
├── package.json
├── scaffolds/
├── source/
└── themes/
3. 使用 Netlify 自动部署
Netlify 是一个非常强大的自动化部署平台。
第一步:授权并选择仓库
首先,用你的 GitHub 账户登录 Netlify。进入主面板后,点击 “Add new site” -> “Import an existing project”。
选择从 GitHub 导入,并授权 Netlify 访问你的仓库。然后,在仓库列表中找到你刚才准备好的那个 Hexo 源文件仓库。
第二步:配置构建命令
选择好仓库后,Netlify 会让你配置构建选项。这里是关键!
- Branch to deploy: 部署分支,保持默认的
main或者master就好。 - Build command: 构建命令。这里需要填入
hexo g或者npm run build。这个命令是告诉 Netlify 如何生成你的静态网站。 - Publish directory: 发布目录。这里填
public,因为 Hexo 生成的网站文件默认都在这个文件夹里。
通常,你可以直接使用 hexo g。如果你的 package.json 文件中有如下脚本,也可以使用 npm run build。
// package.json
"scripts": {
"build": "hexo g",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
}
配置好之后,点击 “Deploy site”。
第三步:等待部署完成
接下来,就没你什么事了!Netlify 会自动拉取你的代码,安装依赖,执行构建命令,然后把 public 目录下的内容部署到全球 CDN。
部署成功后,Netlify 会给你一个 *.netlify.app 的二级域名。
小提示:Netlify 提供的默认域名在国内的访问速度可能不太理想。你可以在 “Domain settings” 中绑定你自己的域名,访问速度会快很多。
4. 使用 Vercel 自动部署 (备选方案)
Vercel 是另一个非常优秀的选择,操作和 Netlify 大同小异,甚至更简单。
第一步:导入 Git 仓库
同样,用 GitHub 账户登录 Vercel,点击 “Add New…” -> “Project”,然后选择你的 Hexo 仓库并点击 “Import”。
第二步:配置项目
Vercel 的强大之处在于它能自动识别你的项目框架。当你导入一个 Hexo 项目时,它会自动选择 “Hexo” 作为框架预设 (Framework Preset)。
所有配置,包括构建命令 (hexo g) 和发布目录 (public),它都会帮你自动填好,你什么都不用改,直接点击 “Deploy” 就行了!
第三步:部署成功
Vercel 也会开始自动构建和部署。成功之后,你同样会得到一个 *.vercel.app 的域名。和 Netlify 一样,建议绑定自己的域名以获得更好的国内访问体验。
总结
搞定!现在,你的博客部署流程已经完全自动化了。从今以后,你更新博客只需要两个步骤:
- 在本地写完 Markdown 文章。
- 执行
git push把改动推送到 GitHub。
剩下的所有事情,Netlify 或 Vercel 都会在几分钟内帮你搞定。是不是超级简单方便?快去试试看,享受这个解放双手的自动化流程吧!