Hexo 博客发布教程:从写文章到 GitHub Pages 上线
这篇文章记录一下我现在这套 Hexo 博客的发布流程。我的博客使用 Hexo 生成静态文件,再把生成结果同步到 GitHub Pages 仓库。
目录结构
我本地有两个重要目录:
1 | C:\Project\blog\hexo\blog-source |
第一个目录是 Hexo 源工程,平时写文章、改主题配置都在这里进行。
第二个目录是 GitHub Pages 发布仓库,里面放的是 Hexo 生成后的静态文件。这个目录会被推送到 GitHub,然后由 GitHub Pages 展示到网上。
整体关系可以理解为:
1 | blog-source/source/_posts 写 Markdown 文章 |
准备工作
我的电脑上使用 pnpm,所以执行 Hexo 命令时使用:
1 | pnpm.cmd exec hexo ... |
这里使用 pnpm.cmd,是为了避免 PowerShell 执行策略拦截 .ps1 脚本。
先进入 Hexo 源工程:
1 | cd C:\Project\blog\hexo\blog-source |
如果是第一次拉取或第一次初始化项目,需要安装依赖:
1 | pnpm.cmd install |
新建文章
使用下面的命令新建一篇文章:
1 | pnpm.cmd exec hexo new post "我的文章标题" |
命令执行后,会在这里生成一个 Markdown 文件:
1 | C:\Project\blog\hexo\blog-source\source\_posts |
例如:
1 | source/_posts/我的文章标题.md |
文章开头一般会有 front matter:
1 | --- |
下面就可以正常写 Markdown 正文了。
本地预览
写完文章后,先在本地预览:
1 | pnpm.cmd exec hexo server |
然后打开浏览器访问:
1 | http://localhost:4000/ |
确认首页、文章页、图片、分类、标签都正常后,再准备发布。
如果服务正在运行,想停止它,可以在 PowerShell 窗口按:
1 | Ctrl + C |
生成静态文件
确认内容没问题后,先清理旧生成结果:
1 | pnpm.cmd exec hexo clean |
再重新生成:
1 | pnpm.cmd exec hexo generate |
生成后的静态文件会出现在:
1 | C:\Project\blog\hexo\blog-source\public |
注意:public 是生成结果,不是写文章的地方。真正的文章源文件在:
1 | source/_posts |
同步到 GitHub Pages 仓库
生成完成后,把 public 目录同步到发布仓库:
1 | robocopy C:\Project\blog\hexo\blog-source\public C:\Project\blog\chenh735.github.io /MIR /XD .git /XF CNAME .nojekyll |
这个命令的含义是:
1 | /MIR 镜像同步,让发布目录和 public 保持一致 |
需要注意:/MIR 会删除发布目录中 public 没有的文件。所以一定要确保旧文章也已经存在于 source/_posts 中,否则重新生成后旧文章会从发布结果中消失。
提交并推送
同步完成后,进入发布仓库:
1 | cd C:\Project\blog\chenh735.github.io |
查看变化:
1 | git status |
提交:
1 | git add . |
推送到 GitHub:
1 | git push |
推送成功后,等待 GitHub Pages 自动部署。通常 1 到 3 分钟后访问博客地址即可看到更新:
1 | https://chenh735.github.io/ |
如果页面还是旧内容,可以尝试强制刷新:
1 | Ctrl + F5 |
删除文章
删除文章也应该删除源文件,而不是直接删发布目录里的 HTML。
进入文章目录:
1 | cd C:\Project\blog\hexo\blog-source |
删除对应 Markdown 文件:
1 | Remove-Item ".\source\_posts\文章文件名.md" |
然后重新生成、同步、提交、推送:
1 | pnpm.cmd exec hexo clean |
常见问题
hexo 命令找不到
如果直接执行:
1 | hexo new post "文章标题" |
提示找不到 hexo,可以改用:
1 | pnpm.cmd exec hexo new post "文章标题" |
因为 Hexo 已经作为项目依赖安装在源工程里,不一定需要全局安装。
npm 或 pnpm 被 PowerShell 拦截
如果 PowerShell 提示 .ps1 脚本无法运行,可以使用 .cmd 版本:
1 | pnpm.cmd -v |
背景图和头像没有显示
我的 Butterfly 主题配置在:
1 | C:\Project\blog\hexo\blog-source\_config.butterfly.yml |
头像和背景图配置类似:
1 | avatar: |
图片文件放在:
1 | C:\Project\blog\hexo\blog-source\source\images |
生成后会出现在:
1 | public/images |
最常用命令汇总
日常发布一篇文章时,常用流程如下:
1 | cd C:\Project\blog\hexo\blog-source |
只要记住一句话就够了:
1 | 写文章改 source/_posts,发布网站推 chenh735.github.io。 |
