安装Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装前提

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

如果你的电脑已经安装上面两个软件，就可以跳过，进入后续的步骤；

如果没有安装，那就按照 安装Git和Node教程，安装对应的软件后，在进行后面的步骤。

下载并安装hexo

在命令行中，输入以下命令并回车，使用 npm 安装 Hexo

1
npm install -g hexo-cli

安装完成后，可以输入以下命令，查询当前的版本号，用于检测是否安装成功

1
hexo version

打印结果如下：

更多用法请参考 hexo官方文档

创建博客网站

安装 Hexo 完成后，执行下列命令，新建一个博客网站

新建博客网站

1
2
3
hexo init my-blog
cd my-blog
npm install
  • my-blog: 这是存放博客网站的目录，你可以根据情况修改

目录结构

新建完成后，my-blog目录内的结构如下：

1
2
3
4
5
6
7
8
.
├── _config.yml  # 网站的配置信息可以在此配置大部分的参数。
├── package.json # 网站所需的相关依赖包
├── scaffolds    # 模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
├── source       # 存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。
|   ├── _drafts   # 存放草稿的
|   └── _posts    # 存放文章的
└── themes       # 主题目录

更多请参考https://hexo.io/zh-cn/docs/setup

安装butterfly主题

安装

npm安装butterfly主题，此方法只支持 Hexo 5.0.0 以上版本
通过 npm 安装并不会在 themes 里生成主题文件夹，而是在 node_modules 里生成

在你的 Hexo 根目录里

1
npm i hexo-theme-butterfly
  • 主题升级
    1
    2
    # 在 Hexo 根目录下，运行
    npm update hexo-theme-butterfly

应用主题

修改项目根目录下的_config.yml，把主题改为butterfly

1
theme: butterfly

安装插件（可选）

检查是否了安装pug和stylus渲染器, 打开根目录下的package.json文件，查看dependencies对象中是否有hexo-renderer-pug和hexo-renderer-stylus

如果没有，就通过下面命令安装:

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

修改主题配置

新建_config.butterfly.yml配置

为了减少后续升级主题后带来的不便，可以新建一个单独配置文件，进行覆盖，具体如下

注意： 不要把主題目錄的 _config.yml 刪掉
注意： 后续只需要在 _config.butterfly.yml进行配置就行。

主题配置优先级： _config.butterfly.yml > _config.yml
自动合并主题中的_config.butterfly.yml和_config.yml里的配置，如果存在同名配置，会优先用_config.butterfly.yml的配置

修改hexo配置

修改_config.yml配置中内容

网站相关

1
2
3
4
5
6
7
8
9
title: mio博客              # 网站标题
subtitle: ''                # 网站二级标题
description: ''             # 网站描述
keywords: 'mio violet blog' # 网站描述
author: violet-mio          # 网站作者
language: zh-CN             # 语言设置，en（英文，默认值） zh-CN (简体中文)，zh-TW (繁体中文)
timezone: ''                # 时区
categories:
 - [博客]

网址相关

1
2
3
## 设置网站的线上网址. 
### 例如，你的博客部署在vercel, 可以设置https://vmio.vercel.app
url: https://vmio.vercel.app

更多参考hexo配置

修改butterfly配置

以下都是在修改_config.butterfly.yml配置内容

导航菜单

1
2
3
4
5
6
7
8
9
10
11
12
## 规则： 菜单名：路径 || 图标名（可选）
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  # 清单||fa fa-heartbeat:
  #   音乐: /music/ || fas fa-music
  #   照片: /Gallery/ || fas fa-images
  #   电影: /movies/ || fas fa-video
  # 友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码高亮主题

1
highlight_theme: mac

网站图标

1
favicon: /imgs/favicon.ico

配置相关的图片资源存储在source/imgs/目录下, 后续不再说明

修改后如下所示:

博主头像

1
2
3
avatar:
  img: /imgs/avatar/02.jpg
  effect: false # true 头像会一直转圈

修改后效果：

自定义主题色

1
2
3
4
5
theme_color:
  enable: true
  main: "#15c5ce"
  button_hover: "#33b8bf"
  scrollbar_color: "#dedfe1"

颜色值必须被双引号包裹，就像”#000”而不是#000。否则将会在构建的时候报错！

更多参考自定义主题色

设置网站背景

1
background: url(/imgs/beach.jpg)

默认显示白色，可设置图片或者颜色

更多参考设置网站背景

页脚背景

1
footer_bg: false

false-不显示

更多参考页脚背景

网站副标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  # source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub: ['宁静er致远']

右下角简繁转换

1
2
3
4
5
6
7
8
9
10
11
12
translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 繁
  # 网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 2
  # 延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  # 当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: "繁"
  # 当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: "简"

修改布局

在修改了配置后，有些布局需要在外部修改css和js，这时需要使用butterfly主题提供的inject功能, 插入自定义代码

  • 在配置文件_config.butterfly.yml中
    1
    2
    3
    4
    inject:
      head: <link rel="stylesheet" href="/style/index.css">
        # - <link rel="stylesheet" href="/xxx.css">
      bottom: <script src="/js/index.js"></script>

外部的CSS和JS一般都是在source目录下的css(或者style)以及js目录中

更多参考Inject

其它工具

browsersync自动刷新

修改 Markdown 文件并保存后浏览器可以自动刷新, 减少手动刷新，但是修改项目的配置，还是需要重新启动项目才行

安装hexo-browsersync

在项目的根目录下执行

1
npm install hexo-browsersync --save

更多参考hexo-browsersync文档