ComputerScience

温故而知新

Hexo Notes

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 14k 阅读时长 ≈ 13 分钟

Hexo是一个快速、简洁而又高效的博客框架。Hexo使用Markdown解析文章，常与Github、gitlab结合组成静态网页托管服务。

基本环境准备

1、首先分别安装Git和Node.js，然后在命令行中输入相应的命令验证是否成功。

1
2
3
4
5
6
7
8
$ git version
$ git version 2.25.0.windows.1

$ node -v
$ v12.18.3

$ npm -v
$ 6.14.6

开始搭建Hexo系统

1、安装Hexo

1
$ npm install hexo-cli -g

2、开始搭建博客

新建一个文件夹，如E:\myBlog，从终端进入myBlog文件夹后，输入：

1
2
3
4
$ hexo init hexoBlog  //项目目录
$ cd HexoBlog         //进入项目目录
$ npm install         // 安装
$ hexo server         //启动服务

然后在浏览器中输入lcalhost:4000，即可查看hexo默认landscape主题界面。

选择主题

1、Hexo提供了丰富的主题，这里以切换为Next主题为例。

1
2
$ cd hexoBlog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

2、下载完成后，在站点配置文件~/HexoBlog/_config.yml文件中，找到theme字段，将landscape修改为 next。然后在终端输入：

1
2
3
$ hexo clean   //清除缓存
$ hexo g       //重新生成代码
$ hexo s       //部署到本地

3、选择scheme（参考Next文档）

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

选择 Pisces Scheme

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces

发布至Github，使得外网可以访问文章

1、注册GitHub后，新建一个Repository，项目名必须遵守格式：账户名.github.io，并在Initialize this repository with栏目中勾选Add a README file，保存。

2、在项目右侧的Setting进去，下拉至GitHub Pages选择主题保存后，会发现下新建的项目已经发布至外网。

3、将Hexo与Github Pages联系起来

3.1、首先要先配置SSH Key

打开命令行输入cd ~.ssh，如果没有报错，就说明是以前生成过的，直接使用cat ~/.ssh/id_ras.pub即可查看本机SSH Key。

如果报错，则执行命令全局配置本地账户：

1
2
3
4
5
6
7
8
9
git config --global user.name 'your name'
git config --global user.email 'your email'

//然后生成密钥
ssh-keygen -t rsa -C 'your email'

//确认并添加主机到本机SSH可信列表,需要提前将id_rsa.pub的内容复制到github中。
ssh -T git@github.com
//若返回 Hi, XXXX! you've succcessfully authenticate,but github does not provide shell access.

3.2、登录github，将本机SSH Key添加到SSH and GPG keys中。
即可正常使用，不通就是
ssh-agent -s
ssh-add ~/.ssh/id_rsa 操作这两步。

3.3、打开站点配置文件，在文件末尾添加配置如下：

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: 
    github: https://github.com/[your github name]/[your github name].github.io.git
  branch: master

3.4、安装hexo-deployer-git插件

1
npm install hexo-deployer-git --save

3.5、发布

1
hexo g -d

官方文档：部署Heo到GitHub Pages

3.6、开始写作

新建文章

1
hexo new '文章标题'

然后在站点目录下(/source/_post)，可以看到新建的文章标题

执行

1
2
hexo g
hexo s

即可在本地查阅到文章，最后，部署到GitHub上

1
2
hexo clean
hexo g -d

其中hexo clean适用于清除缓存文件（db.json）和已生成的静态文件（public），在某些情况下，尤其是更换主题后，发现对站点的更新不生效，可能需要执行该命令。

3.7、Git出错

问题原因：

远程仓库的文件过大，需要设置本地仓库大小

解决办法：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 1、首先输入如下命令：
git config http.sslVerify "false"

# 若出现下列错误：
fatal: not in a git directory

#再继续执行 git config --global http.sslVerify "false" 问题解决

# 2、文件大小的上限设置：
git config --global http.postBuffer 524288000

# 3、如果还是git代码还是下载失败，则需要继续修改git缓存的大小
# 参考链接：https://www.jianshu.com/p/fb2b6a19436a

添加阅读统计代码

1、打开next主题配置文件\themes\next\_config.yml，搜索找到busuanzi_count，把enable设置为true。

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true   #统计访客数
  total_visitors_icon: user
  total_views: true    #统计访问数
  total_views_icon: eye
  #post_views: true   #统计文章阅读数,如果有重复阅读次数，请注释这段代码
  #post_views_icon: eye

2、同样是在next主题配置文件\themes\next\_config.yml下，搜索footer，在它底下添加counter，设值为true。

PS: 最新版的next主题无需修改。

1
2
#统计
counter: true

3、来到themes\next\layout_partials，找到footer.swig文件，打开编辑，在底下添加代码。

PS: 最新版的next主题无需修改。

1
2
3
{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

4、重启Hexo服务即可。

hexo中插入数学公式

原生hexo并不支持数学公式，需要安装插件 mathJax。mathJax 是一款运行于浏览器中的开源数学符号渲染引擎，使用 mathJax 可以方便的在浏览器中嵌入数学公式。mathJax 使用网络字体产生高质量的排版，因此可适应各种分辨率，它的显示是基于文本的而非图片，因此显示效果更好。这些公式可以被搜索引擎使用，因此公式里的符号一样可以被搜索引擎检索到。

1
$ npm install hexo-math --save

在站点配置文件 _config.yml 中添加：

1
2
3
4
5
6
math:
  engine: 'mathjax' # or 'katex'
  mathjax:
    # src: custom_mathjax_source
    config:
      # MathJax config

在 next 主题配置文件中 themes/next-theme/_config.yml 中将 mathJax 设为 true:

1
2
3
4
5
# MathJax Support
mathjax:
  enable: true
  per_page: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

分数与开方

可以使用\frac 或者 \over 实现分数的显示：

1
2
$\frac xy$
$ x+3 \over y+5 $

分别显示为：$\frac xy$和$x+3 \over y+5$。

开方使用\sqrt:

1
2
$ \sqrt{x^5} $
$ \sqrt[3]{\frac xy} $

分别显示为：$\sqrt{x^5}$和 $\sqrt[3]{\frac xy}$。

求和与积分

求和使用\sum,可加上下标，积分使用\int可加上下限，双重积分用\iint:

1
2
3
$ \sum_{i=0}^n $
$ \int_1^\infty $
$ \iint_1^\infty $

分别显示:$\sum_{i=0}^n$和$\int_1^\infty$以及$\iint_1^\infty$。

极限

极限使用\lim:

1
$ \lim_{x \to 0} $

显示为：$\lim_{x \to 0}$

表格与矩阵

表格样式lcr表示居中，|加入一条竖线，\hline表示行间横线，列之间用&分隔，行之间用\分隔

1
2
3
4
5
6
7
$$\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\
\hline
1 & 1.97 & 5 & 12 \\
2 & -11 & 19 & -80 \\
3 & 70 & 209 & 1+i \\
\end{array}$$

显示效果为：

表格的插入也可以使用以下方式：

1
2
3
4
5
名称|说明
---|---|---
temperature|  室内温度
set temperature|  设定温度
height|  室内高度

显示效果：

名称 说明
temperature 室内温度
set temperature 设定温度
height 室内高度

矩阵显示和表格很相似 　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$$\left[
\begin{matrix}
V_A \\\\
V_B \\\\
V_C \\\\
\end{matrix}
\right] =
\left[
\begin{matrix}
1 & 0 & L \\\\
-cosψ & sinψ & L \\\\
-cosψ & -sinψ & L
\end{matrix}
\right]
\left[
\begin{matrix}
V_x \\\\
V_y \\\\
W \\\\
\end{matrix}
\right] $$

需要注意的是，如果将markdown文件发布至hexo，需要要文件开头打开mathjax的开关，否则公式还是不会显示。

1
2
3
4
5
6
7
title: Hexo Notes
date: 2020-08-29 16:00:00
categories:
- hexo
tags:
- hexo
mathjax: true

为Hexo添加tags、categories属性

创建“分类”选项

生成“分类”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令

1
$ hexo new page categories

成功后会提示：

1
INFO  Created: ~/Documents/blog/source/categories/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

1
2
3
4
---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: "categories"到内容中，添加后是这样的：

1
2
3
4
5
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

保存并关闭文件。

给文章添加“categories”属性

打开需要添加分类的文章，为其添加categories属性。下方的categories: web前端表示添加这篇文章到“web前端”这个分类。注意：hexo一篇文章只能属于一个分类，也就是说如果在“- web前端”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- web前端”下的 “-xxx ”分类）。

1
2
3
4
5
6
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories: 
- web前端
---

至此，成功给文章添加分类，点击首页的“分类”可以看到该分类下的所有文章。当然，只有添加了categories: xxx的文章才会被收录到首页的“分类”中。

创建“标签”选项

生成“标签”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令

1
$ hexo new page tags

成功后会提示：

1
INFO  Created: ~/Documents/blog/source/tags/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

1
2
3
4
---
title: 标签
date: 2017-05-27 14:22:08
---

添加type: "tags"到内容中，添加后是这样的：

1
2
3
4
5
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "tags"
---

保存并关闭文件。

给文章添加“tags”属性

打开需要添加标签的文章，为其添加tags属性。下方的tags:下方的- jQuery - 表格
- 表单验证就是这篇文章的标签了

1
2
3
4
5
6
7
8
9
10
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories: 
- web前端
tags:
- jQuery
- 表格
- 表单验证
---

至此，成功给文章添加分类，点击首页的“标签”可以看到该标签下的所有文章。当然，只有添加了tags: xxx的文章才会被收录到首页的“标签”中。

细心的朋友可能已经发现，这两个的设置几乎一模一样！是的，没错，思路都是一样的。所以我们可以打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，之后执行hexo new 文章名命令生成的文件，页面里就有categories:项了。

scaffolds目录下，是新建页面的模板，执行新建命令时，是根据这里的模板页来完成的，所以可以在这里根据你自己的需求添加一些默认值。

添加字数统计和阅读时长

1、首先安装一个插件

1
npm install hexo-symbols-count-time --save

2、接着在站点配置文件~/HexoBlog/_config.yml文件中，添加以下配置：

1
2
3
4
5
symbols_count_time:
  symbols: true
  tiem: true
  total_symbols: true
  total_time: true

3、最后在next主题的配置文件中开启symbols_count_time字段（可能与busuanzi统计文章阅读数重复）。

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 300

重启一下Hexo即可。

添加评论系统

本文使用了Gitalk评论系统，Gitalk是一个基于Github Issue的评论插件，使用Github账号登录，界面干净整洁，最喜欢的一点是支持 MarkDown 语法，在个人博客里添加了之后就可以很简便的进行评论和回复了。

主要特性

  • 使用 Github 登录

  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr]

  • 支持个人或组织

  • 无干扰模式（设置 distractionFreeMode 为 true 开启）

  • 快捷键提交评论 （cmd | ctrl + enter）

  • 支持 MarkDown 语法

安装

创建Github仓库

  • 需要在自己的 Github 账号下创建一个仓库来存放评论，创建的仓库只要 public 就行，其余没要求。

创建 Github Application

  • 需要创建一个 Github Application 用来授权登录，如果没有 点击这里申请，Authorization callback URL 填写你主页地址，比如我的就是 https://[yourname].github.io/，其他都随意填。

  • 授权路径：Github首页—IconLogo—Setting—Developer setting—OAuth Apps—New OAuth Apps。Authorization callback URL和Homepage URL写得一样。

为 Next 主题添加 Gitalk 支持

  • 首先创建 Gitalk 的 swig 文件，放在 themes/next/layout/_third-party/comments 文件夹下，命名为 gitalk.swig ，内容如下：

  • PS: 最新版的next主题无需修改。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    {% if page.comments && theme.gitalk.enable %}
      <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
      <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
      <div id="gitalk-container"></div>
      <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.clientID }}',
          clientSecret: '{{ theme.gitalk.clientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.owner }}',
          admin: ['{{ theme.gitalk.admin }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
      </script>
    {% endif %}

  • 在主题文件 themes/next/layout/_third-party/comments/index.swig 中引入刚刚添加的文件。

    1
    {% include 'gitalk.swig' %}

  • 在 themes/next/layout/_partials/comments.swig 文件末找到最后的 {% endif %} 语句，替换为如下代码：

  • PS: 最新版的next主题无需修改。

    1
    2
    3
    {% elseif theme.gitalk.enable %}
      <div id="gitalk-container"></div>
    {% endif %}

  • 在 themes/next/_config.yml 文件中添加 Gitalk 的配置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # Gitalk
    # For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
    gitalk:
      enable: true
      github_id: [yourname] # GitHub repo owner
      repo: hexo_comments # Repository name to store issues
      client_id: xxxxxxxxxxxx # GitHub Application Client ID
      client_secret: xxxxxxxxxxxxxxxx # GitHub Application Client Secret
      admin_user: [yourname] # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
      distraction_free_mode: false # Facebook-like distraction free mode
      # Gitalk's display language depends on user's browser or system environment
      # If you want everyone visiting your site to see a uniform language, you can set a force language value
      # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
      language: en
  • 最后执行 hexo clean && hexo g && hexo d 重新发布博客即可。

附加内容：

由于国内网络原因，gitlab会有时出现Error: Network Error的错误导致登录状态异常，或者是不能登录。因此本文在Github Pages页面上添加了Valine的评论系统，主要过程如下：

1、在LeanCloud上注册一个账号【华东节点和国际站账号不能通用，要记得自己注册的时候选择的是哪个节点，我使用的是国际站节点】，然后注册随意填写就行，保存后会生成appid和appkey。

2、在next主题配置文件下，找到Valine配置选项，我的配置为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appid: xxxxxxxxxxxx # Your leancloud application appid
  appkey: xxxxxxxxxxxxx # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: true # Article reading statistic

将上述步骤一的appid和appkey复制替换到配置文件里面即可。

hexo的next主题个性化教程，打造炫酷网站

参考：hexo的next主题个性化教程:打造炫酷网站

电脑重装系统后如何恢复Hexo博客

参考：电脑重装系统后如何恢复Hexo博客

hexo使用markdown图片无法显示问题

hexo默认无法自动处理文章插入本地图片，需要通过扩展插件支持。

图片路径问题

配置_config.yml里面的post_asset_folder:false这个选项设置为true。

安装hexo-asset-image，运行hexo n "xxxx"来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹，把图片放入该文件夹。

使用![xxx](xxx/xxx.png)直接插入图片即可。

问题

由于hexo3版本后对很多插件支持有问题，hexo-asset-image插件在处理date.permalink链接时出现路径错误，把年月去掉了，导致最后生成的路径为%d/xxx/xxx需要对其做兼容处理。通过判断当前版本是否等于3的版本做不同的路径分割。

在代码中加入：

1
var version = String(hexo.version).split('.');

修改date.permalink处理：

1
2
3
4
5
var link = date.permalink;  
if(version.length > 0 && Number(version[0]) == 3) 
    var beginPos = getPosition(link, '/', 1) + 1; 
else 
    var beginPos = getPosition(link, '/', 3) + 1;

重新生成静态文件即可正确显示。

可直接安装已经修改过得插件npm install https://github.com/7ym0n/hexo-asset-image --save。

添加网易云音乐插件

在网易云音乐网页中，打开生成外链播放器，将HTML代码复制到主题站点目录themes\next\layout\_macro\sidebar.swig找到sidebar-inner，将网易云插件代码代码粘贴到此div标签后即可。

演示：

1
2
3
4
5
6
<aside class="sidebar">
 <div class="sidebar-inner"> //从下面开始复制，粘贴到这里
  <!--网易云插件-->
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
      src="//music.163.com/outchain/player?type=2&id=463352828&auto=0&height=66">
  </iframe>

在博客文件夹打开GitBash执行hexo clean、hexo g、hexo s，即可看到效果。

加入站点内容搜索功能

本站点使用的是Local Search。加入站点内容搜索功能步骤如下：

安装hexo-generator-search

1
npm install hexo-generator-search --save

注意：安装时应在站点根目录下，即Hexo目录下
添加search字段，在站点Hexo/_config.yml中Extensions下面添加search字段，如下：

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

打开主题配置文件next/_config.yml找到Local search，将enable设置为true。

添加打赏功能

准备支付宝和微信二维码

  • 微信是在收付款->二维码收款->保存收款码
  • 支付宝是在收钱->保存图片

在next/_config.yml中配置图片

1
2
3
4
5
6
7
8
9
10
11
12
# Reward (Donate)
reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
  enable: true
  animation: false
  comment: 坚持原创技术分享，您的支持将鼓励我继续创作！

reward:
  wechatpay: /source/images/wechat.png
  alipay: /source/images/alipay.jpg
  #bitcoin: /images/bitcoin.png

wechat.jpg、alipay.png图片放入hexo/source/uploads中。

隐藏网页底部powered By Hexo / 强力驱动

在next的_config.yml，搜索powered，设置如下：

1
2
3
4
5
6
7
8
9
10
11
powered:
  # Hexo link (Powered by Hexo).
  enable: false
  # Version info of Hexo after Hexo link (vX.X.X).
  version: false

theme:
  # Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  # Version info of NexT after scheme info (vX.X.X).
  version: false

最新版本的主题中只需要设置powered: false即可。

在文章底部增加版权信息

在next/_config.yml找到creative_commons，设置如下：

1
2
3
4
5
6
7
8
9
10
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

（注意：如果解析出来之后，你的原始链接有问题：如：http://yoursite.com/2018/07/29/Windows下使用hexo搭建博客/，那么在根目录下_config.yml中写成类似这样：）

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://marchboy.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

就行了。

阅读更多

1
$ npm install hexo-excerpt --save

在站点配置文件中配置：

1
2
3
4
5
excerpt:
  depth: 5
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

国内网络访问失败

在网络和共享中心—属性—IPv4—DNS服务器地址。将DNS服务器地址改为：

首选DNS服务器 备选DNS服务器
223.5.5.5 223.6.6.6

然后再刷新github.io网页即可。

Reference：

1、Hexo Next主题添加访客统计、访问次数统计、文章阅读次数统计

2、Hexo使用攻略-添加分类及标签)

3、超详细Hexo+Github Page搭建技术博客教程

4、【已解决】Hexo NexT使用Gitalk未找到相关的Issues进行评论Error:Validation Failed

5、为 Hexo 的 Next 主题添加 Gitalk 评论

6、hexo使用markdown图片无法显示问题

7、windows下使用hexo搭建博客

8、hexo中插入数学公式

------ 本文结束------
Donate comment here.

欢迎关注我的其它发布渠道