基础搭建

教程来自 Hexo官方文档

什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

安装前提

安装 Hexo 相当简单,只需要先安装下列应用程序即可:

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Git

如果您的电脑中已经安装上述必备程序,那么恭喜您!你可以直接前往 安装 Hexo 步骤。

如果您的电脑中尚未安装所需要的程序,请根据以下安装指示完成安装。

安装 Git

  • Windows:下载并安装 git
  • Mac:使用 Homebrew, MacPorts 或者下载 安装程序
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

如果在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

对于中国大陆地区用户,可以前往 淘宝 Git for Windows 镜像 下载 git 安装包。

安装 Node.js

Node.js 为大多数平台提供了官方的 安装程序。对于中国大陆地区用户,可以前往 淘宝 Node.js 镜像 下载。

其它的安装方法:

  • Windows:通过 nvs(推荐)或者 nvm 安装。
  • Mac:使用 HomebrewMacPorts 安装。
  • Linux(DEB/RPM-based):从 NodeSource 安装。
  • 其它:使用相应的软件包管理器进行安装,可以参考由 Node.js 提供的 指导

对于 Mac 和 Linux 同样建议使用 nvs 或者 nvm,以避免可能会出现的权限问题。

使用 Node.js 官方安装程序时,请确保勾选 Add to PATH 选项(默认已勾选)

如果在尝试安装 Hexo 的过程中出现 EACCES 权限错误,请遵循 由 npmjs 发布的指导 修复该问题。强烈建议 不要 使用 root、sudo 等方法覆盖权限

如果您使用 Snap 来安装 Node.js,在 初始化 博客时您可能需要手动在目标文件夹中执行 npm install

安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

1
$ npm install -g hexo-cli

进阶安装和使用

对于熟悉 npm 的进阶用户,可以仅局部安装 hexo 包。

1
$ npm install hexo

安装以后,可以使用以下两种方式执行 Hexo:

  1. npx hexo <command>
  2. Linux 用户可以将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>

    1
    echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

主题安装

教程来自 📑 Butterfly 安装文档(一) 快速开始

安装

稳定版【建议】

在你的 Hexo 根目录里

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

测试版

测试版可能存在 bug,追求稳定的请安装稳定版

如果想要安装比较新的 dev 分支,可以

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

升级方法:在主题目录下,运行 git pull

稳定版【建议】

在你的 Hexo 根目录里

1
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

测试版

测试版可能存在Bugs,追求稳定的请安装稳定版

如果想要安装比较新的dev分支,可以

1
git clone -b dev https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

升级方法:在主题目录下,运行 git pull

此方法只支持 Hexo 5.0.0 以上版本

通过 npm 安装并不会在 themes 里生成主题文件夹,而是在 node_modules 里生成

在你的 Hexo 根目录里

1
npm install hexo-theme-butterfly

升级方法:在 Hexo 根目录下,运行 npm update hexo-theme-butterfly

应用主题

修改 Hexo 根目录下的 _config.yml,把主题改为 butterfly

1
theme: butterfly

安装插件

如果你没有 pug 以及 stylus 的渲染器,请下载安装:

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

升级建议

升级完成后,请到 Github 的 Releases 界面 或者 文档七 查看新版的更新内容。

里面有标注 _config 文件的变更内容(如有),请根据实际情况更新你的配置内容。

为了减少升级主题后带来的不便,请使用以下方法(建议,可以不做)。

在 hexo 的根目录创建一个文件 _config.butterfly.yml,并把主题目录的 _config.yml 内容複制到 _config.butterfly.yml 去。( 注意: 複制的是主题的 _config.yml ,而不是 hexo 的 _config.yml)

注意: 不要把主题目录的 _config.yml 删掉

注意: 以后只需要在 _config.butterfly.yml 进行配置就行。
如果使用了 _config.butterfly.yml, 配置主题的 _config.yml 将不会有效果。

Hexo会自动合併主题中的 _config.yml_config.butterfly.yml 里的配置,如果存在同名配置,会使用 _config.butterfly.yml 的配置,其优先度较高。

image-20200805191531090

插件安装

涉及教程:Tag Plugins Plus, 博客魔改教程总结(三)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm install --save hexo-pdf # 在页面中展示pdf的插件
npm install hexo-tag-map --save # 在页面中展示地图的插件
npm install --save hexo-abbrlink # 生成文章唯一链接插件
npm install --save hexo-blog-encrypt # 界面加密上锁插件,参考日记界面

# 参考
npm install hexo-butterfly-tag-plugins-plus --save
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

npm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件
npm install gulp-htmlclean --save-dev
npm install gulp-html-minifier-terser --save-dev
npm install gulp-clean-css --save-dev
# 用gulp-html-minifier-terser可以压缩HTML中的ES6语法
npm install gulp-terser --save-dev

npm install hexo-butterfly-envelope --save # violet留言板(店长) 信笺样式留言板

图标修改教程:butterfly加入彩色动态图标

2023-11-16 补

1
2
npm install hexo-wordcount --save # 字数统计插件
npm install --save hexo-tag-aplayer # 音乐播放器插件