前言：

  用Hexo框架搭建博客并没多复杂，简单总结也就只有下载工具、安装Hexo、安装主题并配置，仅此而已。当然，想要弄成自己想要的样式，那是属于魔改的操作了。如果只是用于记录一些学习心得之类的，找一个喜欢的主题就完全可以了。本文章很基础，也算是个人备忘，话不多说，就开始吧。

准备工作：

  • 操作系统：Windows11
  • Node
  • Git
  • Hexo
  • idea（推荐使用 Visual Studio Code）
  • 一个 GitHub 帐号

安装Node、Git、Hexo

  • 进入Hexo中文文档，如图，点击蓝色字体进去安装(建议)，或者看Hexo下面的教程。
    屏幕截图 2025 03 02 130203
    安装完后打开cmd窗口依次输入
1
2
3
4
5
$ npm -v

$ node -v

$ git -v

显示对应版本号则说明安装完成。

  • 然后鼠标右键 → 显示更多选项 → 打开 Open Git Bash here 输入下面命令安装阿里镜像源
1
$ npm install -g cnpm --registry=https://registry.npmmirror.com

安装镜像源的原因是npm是国外的，访问比较慢或者不稳定，避免遇到安装失败等问题而安装。使用方法是在 “npm” 命令前加 “c” 变为 “cnpm”。

  • 然后继续输入(记得前面加 “c” )
1
$ npm install hexo-cli -g
  • 在你想要存储博客文件的地方再次鼠标右键打开 Open Git Bash here (不建议放桌面和C盘)，依次输入：(“npm” 前加 “c”，后面不再提醒！)
1
2
3
4
$ hexo init 文件夹名字
$ cd 文件夹名字
$ npm install
$ hexo s

hexo init ...可能会失败，多试几次，或者点击下载我打包好的，再在blob文件夹中执行后面命令。上面步骤执行完后，按住“CTRL” + “鼠标左键”命令行中的链接就能打开你的博客了，此时它是在你的本地运行，别人是看不到的。“CTRL” + “C”停止运行

  • 再把GitHub账号注册了，下载好 Visual Studio Code ，后面使用Visual Studio Code操作。(自己去搜一下VSC怎么装中文插件)

安装Butterfly主题

打开VSC → CTRL+K 再 CTRL+O → 左上角终端 → 新建终端 → 选择Git Bash
屏幕截图 2025 03 02 152737
输入：

1
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

就安装完了。然后打开博客根目录的_config.yml，将99行左右的theme: landscape改为theme: butterfly就更换了主题。但此时输入hexo s打开是乱码，还需要装两个插件：pug 以及 stylus 的渲染器
输入：

1
$ npm install hexo-renderer-pug hexo-renderer-stylus --save

此时博客就做好了，可以用hexo s在本地查看，然后根据Butterfly文档去配置你要的效果。

一些命令使用

hexo cl：清除本地缓存；
hexo g：生成静态文件；
hexo s: 运行；
hexo d：一键部署(后面会说)。

一键部署

安装hexo-deployer-git

1
$ npm install hexo-deployer-git --save

编辑_config.yml

1
2
3
4
5
deploy:
  type: git
  repo: <repository url> # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] #一般写 main
  message: [message] #可填可不填

部署

Hexo 提供快速、简便的部署策略。 你只需一条命令即可将网站部署到服务器上。

1
$ hexo d

或者

1
$ hexo deploy

此外，除非你使用令牌或 SSH 密钥认证，否则你会被提示提供目标仓库的用户名和密码。