Hexo 博客搭建

一、安装Node .js和Git

验证：

1
2
3
node -v
npm -v
git --version

觉得速度慢可以直接用cnpm：

1
npm install -g cnpm --registry=https://registry.npmmirror.com

二、安装Hexo

1
npm install hexo-cli -g

验证：

1
hexo -v

三、Github配置

建立Github仓库

左上角选择New repositories，仓库名起名为Monoceros406.github.io，并建立README文件，然后Creating repository

本地博客文件

新建文件夹存放网站，并Git Bash Here。

1
2
3
4
5
6
7
8
9
10
#连接国内服务器（淘宝）
npm install -g cnpm --registry=https://registry.npm.taobao.org
#安装Hexo
cnpm install -g hexo-cli
#初始化Hexo博客：
hexo init
#启动服务，在本地预览
hexo s
#生成（Hexo自带Hello World博客）
hexo g

四、设置SSH

在Git下：

1
2
3
cd ~/.ssh
ssh-keygen -t rsa -C ‘注册时的邮箱地址’
#一路回车即可

去看回显中的路径找到id_rsa.pub，记事本打开并全部复制。

在Github上头像找到Settings->SSH and GPG keys->New SSH key，名字随意。

1
2
git config --global user.name “注册时用户名”
git config --global user.email “注册时邮箱”

五、上传博客

找到文件夹下_config.yml文件，最后改为：

1
2
3
4
deploy:
        type: git
        repo: https://github.com/用户名/用户名.github.io.git
        branch: main

并下载上传工具：

1
cnpm install hexo-deployer-git

六、文章部署

1
2
3
4
5
6
7
8
#在source文件夹下_posts内新建文章.md
hexo new "文章名称"
#在本地localhost中预览
hexo s
#确认无误生成文件
hexo g
#部署到Github
hexo d

七、主题设置

使用主题：Butterfly 4.10.0

https://github.com/jerryc127/hexo-theme-butterfly

1
2
3
4
5
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
    #或Gitee更快：
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
#安装插件
npm install hexo-renderer-pug hexo-renderer-stylus

在_config.yml中更改：

1
theme: butterfly

在themes\butterfly\_config.yml中设置代码自动折行：

1
code_word_wrap:true

*_img等配置主图像。cover为文章封面，可设置default_over，需要特殊设置则在md标头指定cover字段。

此外代码框中的代码如果缩进用的TAB键，则设置缩进值可能没用，只对空格缩进的有用。这里可以设置将TAB替换为4个空格：

1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: '    ' #这里
  wrap: true
  hljs: false

八、MathJax数学公式

更换渲染引擎：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

找到博客根目录下node_modules\kramed\lib\rules\inline.js

1
2
3
4
//第11行更改：
escape: /^\\([`*\[\]()#$+\-.!_>])/，
//第20行更改：
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/，

进入主题文件夹，找到_config.yml，找到并更改：

1
2
3
4
# MathJax Support
mathjax:
  enable: true
  per_page: true

在每篇文章开头都加上：

1
2
3
4
5
6
---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
--

可能公式中的“*”和“_”会被拆开优先解析为斜体，这时需要在公式中加上“\”。本地Markdown阅读器可能报错，但推上去就没啥问题了。

Nunjucks Error: _posts/*.md [Line *, Column *] expected variable end解决方法

在敏感内容前后加上：

1
2
3
{% raw %}
    敏感内容
{% endraw%}

九、图片上传

安装插件：

1
npm install hexo-asset-image --save

再找到Hexo的配置文件_config.yml，中改为：

1
post_asset_folder: true

这样一来，在每次新建文章时，source\_posts目录下会出现一个*.md和一个同名文件夹。将图片放入文件夹内。例如将1.png放入文件夹内，Markdown中这样写：

1
![](1.png)

一般这样来说就行了。有可能出现版本问题导致路径不对。打开\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();
    }
  }
});

十、友情链接

Hexo根目录下：

1
hexo new page link

将source\link\index.md改为：

1
2
3
4
5
---
title: categories
date: 2024-02-03 15:48:47
type: "link"
---

新建source\_data\link.yml目录及文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

十一、RSS订阅源

安装所需插件：

1
npm install hexo-generator-feed --save

在根目录的_config.yml文件末尾添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Extensions
plugins:
  hexo-generator-feed
#Feed Atom
feed:
  enable: true #是否启用插件
  type: atom #有atom和rss2两个选项，使用默认atom就好了
  path: atom.xml #也用默认配置atom.xml就行
  limit: 20 #展示文章的数量,使用 0 或 false 代表展示全部
  hub: #这个我没用上，根据官网，空着就行
  content: #默认是false，true的话会在rss文件中包含整个文章内容
  content_limit: 140 #摘要长度
  content_limit_delim: ' ' #没看明白官方的意思，就跟着默认不填了
  order_by: -date #采用日期进行排序
  icon: icon.png #给rss链接配置icon
  autodiscovery: true #自动发现提要
  template: #给rss文章配置模板

然后在butterfly主题下的_config.yml文件末尾添加：

1
rss: /atom.xml

并在social设置中添加：

1
2
3
4
5
6
7
# Social Settings (社交圖標設置)
# formal:
#   icon: link || the description || color
social:
    fab fa-github: https://github.com/Monoceros406 || Github || '#24292e'
    fas fa-envelope: mailto:monoceros406@163.com || Email || '#4a7dbe'
    fas fa-rss: https://monoceros406.github.io/atom.xml #添加这条

重新生成，则在public即网站根目录下生成atom.xml即可：

1
2
3
hexo clean
hexo g
hexo d