首先贴上几个链接

官方文档：https://hexo.io/zh-cn/docs/

推荐的视频：

https://www.bilibili.com/video/av44544186

https://www.bilibili.com/video/av24897960

接下来我们开始安装

安装 Node.js

Hexo博客是基于node.js 框架的，所以首先要安装nodejs。下面给出链接

https://nodejs.org/en/

1563369322945

可以用下面的命令查看是否安装成功

1
node -v

安装 git

https://git-scm.com/downloads

传送门如上

安装一直点下一步就可以了，

安装hexo

创建一个放博客的文件夹

启动管理员权限的cmd，输入下面指令安装hexo

1
npm install -g hexo-cli

在blog所在的文件夹里输入

1
hexo init

然后一个 Hello World的博客就初始化完成了

使用博客

下面的命令很常用

1
2
3
4
5
hexo clean                   #清除缓存 
hexo g                       #生产文件
hexo s						 #再本地服务器查看
hexo d						 #推送
hexo new post "articles"     #新文章articles

在浏览器里输入

就可以看见博客了

把博客推送到github上

在 Github 上注册一个账号，然后开启一个仓库

首先安装一下插件

1
npm install hexo-deployer-git --save

然后进入 _config.yml 修改一下仓库地址为你之前创建仓库的地址(在最后一行)

1
2
3
4
deploy:
  type: git
  repo: git@github.com:Fyind/fyind.github.io.git
  branch: master

然后推送的时候用 hexo d 即可

添加标签

1
hexo new page tags

进入新生成的文件把 type 改成 tags

1
2
3
title: 标签
date: 2019-12-03 20:53:27
type: "tags"

添加分类

1
hexo new page categories

进入新生产的文件，如下编辑

1
2
3
title: 分类
date: 2019-07-18 13:30:05
type: "categories"

配置语言

在根目录里的 _config.yml 里面修改

1
language: zh-CN

支持图片

安装插件

1
npm install hexo-asset-image --save

然后进入 /node_modules/hexo-asset-image/index.js 打开这个文件, 把代码更换成下面的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\' to '/'.
            var src = $(this).attr('src').replace('\\', '/');
            if(!/http[s]*.*|\/\/.*/.test(src) &&
               !/^\s*\//.test(src)) {
              // For "about" page, the first part of "src" can't be removed.
              // In addition, to support multi-level local directory.
              var linkArray = link.split('/').filter(function(elem){
                return elem != '';
              });
              var srcArray = src.split('/').filter(function(elem){
                return elem != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

在 _config.yml 里设置

1
post_asset_folder: true

然后更改生成的连接

1
permalink: :title/

支持数学公式

用 ketex 比较好, 首先要禁用 mathjax

参见 这个文章

1
2
3
4
5
6
7
# 替換 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器
# 你可以在你的package.json裏找到hexo的markdwon渲染器，並將其卸載
npm un hexo-renderer-marked --save
# or
npm un hexo-renderer-kramed --save
# 然後安裝 `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

使用过MathJax的方法

用pandoc代替默认渲染器

1
2
3
4
npm un hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save
npm uninstall hexo-math --save
npm install hexo-renderer-mathjax --save

就ok了

参加 这个文章

折叠块

使用折叠块需要用 pandoc 渲染器渲染

效果如下：

点此处展开
  • 重点1 \[ \sum_{i=3}^4 a_i = b \]
  • 重点2 \(a + b = c^3\)
  • 下面是一段代码 
    1
    #include <cstdio>
  • 重点4 > 定义4: > > abcd \(a+b\) a definition
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<details>
<summary> 点此处展开 </summary>

- 重点1
$$
 \sum_{i=3}^4 a_i = b 
$$
- 重点2 $a + b = c^3$
- 下面是一段代码
  
- 重点4
  > 定义4:
  >
  > abcd $a+b$ a definition

</details>

Butterfly主题配置

官方文档：https://demo.jerryc.me/posts/21cfbf15/

需要 hexo 5.0.0 以上，更新方法 https://www.jianshu.com/p/98ac1e253e6e

进入 blog 根目录，首先把主题克隆进来

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

然后安装一下插件

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

然后进入 _config.yml更改一下主题

然后把主题文件夹的 themes/butterfly/_config.yml 复制到博客根目录，并且命名为 _config.butterfly.yml

透明

打开 themes/butterfly/source/css/_global/index.styl 修改下面的参数(第16行)

1
--card-bg: rgba(240,248,255,0.8)

置顶

在对应文章开始的地方加入

sticky: 1 这个值设置越大，优先级越高

其他设置

其余的设置可以去参考Butterfly官方文档，那里写的比较详细