工具►个人网站

hexo维护和使用笔记

[toc]

Hexo个人博客小站维护和使用笔记

才想起自己很久前搭的这个小破站，当时没有写下安装和使用的笔记，导致现在连博客都不知道怎么发了。今天重新回忆一下当时安装和使用的流程，并整理成笔记，方便日后查阅。

一、 Hexo的安装

Hexo的安装需要先安装Node.js和Git，具体安装步骤参考：https://hexo.io/zh-cn/docs/。安装过程算是比较简单。

二、建站

建站教程参考链接：https://hexo.io/zh-cn/docs/setup

安装 Hexo 完成后，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

文件目录结构：

scaffolds：模板文件夹，新建文章时，Hexo会根据模板来建立.md文件。

source：存放用户资源的地方，除了_posts文件夹之外，开头命名为_（下划线）的文件/文件夹和隐藏文件将会被忽略。

themes：主题文件夹。

三、配置

根目录下的_config.yml为配置文件，配置项较多，可参考：https://hexo.io/zh-cn/docs/configuration

四、写作

4.1 新建文章

执行下列命令创建一篇新文章或者新的页面：

1
$ hexo new [layout] <title>

Hexo默认以标题作为文件名称，但是可以通过设置目录下的_config.yml配置文件中的new_post_name参数来改变默认的文件名称格式。

4.2 Front-matter

Front-matter是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。其中updated参数用于指定更新日期。

多个并列标签的设置方法：

1
2
3
tags:
	- 游戏
	- 电影

多个并列分类以及多级分类的设置方法：

1
2
3
categories:
	- [日常, 杂项]
	- [学习]

其中，杂项是日常的子分类，学习没有子分类。

4.3 标签插件

用于插入图片、代码块以及引用等，大部分与MarkDown格式不同（代码块格式可以使用MarkDown格式）。

4.4 文章资源文件夹

文章资源文件夹用于存放除了文章以外的所有资源文件，例如图片等。通过将_config.yml配置文件中的post_asset_folder选项设置为true来打开资源文件管理功能：

1
post_asset_folder: true

当资源文件管理功能打开后，Hexo会在每一次通过hexo new [layout] title命令创建新文章时自动创建一个文章同名文件夹，将图片等资源文件放在该资源文件夹中，即可通过相对路径在文章中进行引用，即{% asset_img filename.png %}（若直接使用![title](filename.png)插入图片，由于.md文件跟图片资源文件还隔着一层目录，Typora编辑器上没法显示出图片；同时，以这种方式插入图片，会导致图片在主页无法显示，只有点击进入文章页面才能显示图片）。

4.5 写作流程

1
2
3
4
5
6
7
8
9
10
# 1. 新建文章
$ hexo new [layout] <title>

# 2. 设置分类和标签

# 3. 本地预览

# 4. 部署

# 5. 版本管理

五、插件

Hexo插件的安装方法：

1
$ npm install `plugin` --save

  1. hexo-image-link：用于将MarkDown图片路径转换成asset_img语法格式，使得在Hexo和Typora两边都能够正常显示图片。

    1
    ![image file label](./markdown-file-name/local-image.png) -> {% asset_img label local-image.png %}

    实际使用中发现如果加上图片路径最前面的./会导致出现Markdown Image Path does not exists!错误，去掉图片路径最前面的./对Typora编辑器引用图片没有影响：

    1
    ![image file label](markdown-file-name/local-image.png) -> {% asset_img label local-image.png %}

  2. hexo-filter-mathjax：该插件不需要安装任何其他的数学插件，渲染引擎可以使用hexo-renderer-marked。包含公式的文章需要在.md文件前面的Front-matter中打开mathjax：

    1
    2
    3
    ---
    mathjax: true
    ---

    手机端可以比较完美显示公式，$$公式块过长会自动加入滚动条，hexo-math插件使用{% %}tag插入公式，而我比较习惯于使用$或$$插入公式，所以选择了hexo-filter-mathjax插件，公式的换行符\\需要在\begin{array} \end{array}之类的环境中才能够生效。

  3. hexo-toc：用于插入目录。与Typora插入目录不同，hexo-toc不使用[toc]。使用[toc]标签会导致页面出现一个莫名其妙的纯文本[toc]，看着很不舒服。

  1. hexo-tag-mmedia：媒体插入插件。

六、部署

使用Travis CI将Hexo博客部署到GitHub Pages上：

  1. 新建一个仓库，以<GitHub用户名>.github.io命名；

  2. 将Hexo站点文件夹推送到新建的GitHub仓库中；

  3. 将Travis CI添加到GitHub账户中；

  4. 前往GitHub的Application settings，配置Travis CI的权限使其能够访问GitHub仓库；

  5. 到GitHub账户设置中，选择Developer settings -> Personal access tokens -> Generate new token，只勾选repo的权限并生成一个新的Token；

  6. 前往Travis CI，在仓库的设置页面中，新建一个环境变量，变量名为GH_TOKEN，值为生成的Token，确保DISPLAY VALUE IN BUILD LOG不被勾选避免Token泄漏；

  7. 在Hexo站点文件夹中新建一个.travis.yml文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    sudo: false
    language: node_js
    node_js:
      - 10 # use nodejs v10 LTS
    cache: npm
    branches:
      only:
        - source # 只构建你的站点源文件分支
    script:
      - hexo generate # generate static files
    deploy:
      provider: pages
      skip-cleanup: true
      github-token: $GH_TOKEN
      keep-history: true
      on:
        branch: master # 部署在你的master分支，确保GitHub Pages的部署分支为master
      local-dir: public

  8. 将.travis.yml推送到GitHub仓库中；

  9. 前往GitHub仓库，修改GitHub Pages的部署分支为master；

  10. 创建source站点源文件分支，使用Git做好版本控制；

  11. 前往Travis CI，在仓库的设置页面中，打开Build pushed branches选项。

七、npm

package.json类似于requirements.txt。

八、存在的问题

  1. hexo-renderer-marked不能渲染双等号==高亮==语法；
  2. Typora的内部链接可能存在bug，如：跳转至五、插件，在Typora中跳转到了六、部署。实际上不管跳转目标怎么写，似乎都会跳转到六、部署。其次，Hexo在生成目录时，标题中的中文顿号、会被转换成-，大写字母会被转换成小写字母，因此当标题中不存在中文顿号和大写字母时，内部链接才能同时在Hexo和Typora中生效。