Hexo使用手册（Window系统）

发表于 | 分类于 ，

前言
本文是我对自己使用Hexo全过程的整理，包括安装、配置、主题设置、博文编写等方面的内容。

Hexo 简介

Hexo是一款简洁快速的博客框架，依赖于Node.js实现博客页面的渲染和生成，使用git一键部署到Github Page上，Hexo官网上面有简单的使用文档和接口文档可供阅读。

Hexo 安装

环境搭建

步骤 作用 方法
安装Node.js 安装Hexo和作为Hexo的部署环境 去官网安装对应版本即可
安装git 提交Hexo的代码到github代码仓库 上同
申请github账号并建立Github Page代码仓库 作为Hexo的摆放空间 这里不详述

以上步骤都完成之后就可以进入下一步骤，进行Hexo的安装了

安装流程

笔者安装的hexo版本为3.2.2、node的版本为4.4.3、电脑系统是Win10

建立工作目录

在本地建立一个存放Hexo的文件夹，同时这个文件夹也是你博客内容生成的“工厂”，存放Hexo编译（或者称为转换）前的文件。

安装Hexo

在工作目录中运行命令行（可以按着Shift键点击右键，在右键菜单中选择“在此处打开命令行”）输入下列指令安装Hexo（如果已经安装过Hexo的略过此步）。

1
npm install hexo-cli -g

初始化Hexo

在上文的命令行中输入以下指令，在工作目录下初始化Hexo。

1
hexo init

安装成功

在命令行中输入以下指令看是否能获取到hexo的帮助信息，若能，则Hexo初始化成功了。

1
hexo help

Hexo配置

工作目录根目录下的_config.yml是Hexo的配置文件，下文不会详述，具体每个配置项的作用和可选值请参看官方文档。

个人配置

以下列出一些建议修改的配置项，

配置项 作用 建议值
title 网页标题 无
author 网页作者 无
new_post_name 新建文章时自动生成的文件名的命名规律 :year-:month-:day-:title.md

发布配置

需要将Hexo生成的静态博客文件上传到Github Page空间的话，我们需要修改配置文件中_cofing.yml的“deploy”类选项。

还需要安装一个模块 hexo-deployer-git

1
npm install --save hexo-deployer-git
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/Runtu4378/Runtu4378.github.io.git
  branch: master

主题安装及配置

Hexo有许多不同程序员制作的风格各异的主题，官网也有一个主题页面，这里列出我安装并配置Next的过程。

预览页面
主题文档

主题安装

工作目录下面的这个文件夹是存放主题的文件夹\themes\，在这个文件夹下有一个Hexo自带的默认表情“landscape”，我们安装其他的过程就是把这个主题的内容的文件夹放到这个主题文件夹下，再修改Hexo配置文件_config.yml中的theme字段为主题名，应用主题。

那么我们回到博客工作目录的根目录，在命令行中把主题的文件下载到主题文件夹中，执行以下指令。

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

然后修改Hexo配置文件_config.yuml中的theme的值为next。

1
2
3
hexo clean
hexo generate
hexo server

然后在浏览器中输入localhost:4000/即可看到主题应用之后的效果。

主题配置

各个主题的配置各有异同，不过主要是几种主要配置：分类、标签、评论类插件、搜索类插件、图床类配置等几类配置的组合，现有的主题一般是这些功能的排列组合。

在Hexo中我进行了标签功能的配置 以下分步说明

  1. 修改主题配置文件
    主题配置文件是位于主题内容文件夹中的_config.yml，本文即是themes/next/_config.yml，找到其中的“menu”类别配置中的tags项，将其设置为/tags。这样在博客的菜单栏即会出现”标签“这个选项。
  2. 生成标签分页
    在命令行中输入指令：
1
hexo new page tags

然后会生成标签页的分页页面（这里的具体实现我也不清楚），这样的话，在写博文的时候添加了标签的页面就会在标签分页中自动规整了。

命令介绍

Hexo提供在博客生成方面的指令，具体使用可以查看命令文档

我把博客的日常使用概括为编写博文和发布博文，下面演示一次“Hello world”博文编写流程。

编写新博文

1
hexo new "Hello world"

键入以上指令，hexo会在source/_posts/路径下自动生成一个名为Hello world.md的文件，这个文件即是这篇博文的物理文件了，我们使用Markdown格式编写好这问文件之后，在静态生成页面的阶段会把这份文件转化为html文件。

打开这个md文件，下面是一个典型的文件格式。

1
2
3
4
5
6
7
8
---
title: Helloworld
date: 2016-09-29 14:34:37
tags:
- tag1
- tag2
---
具体内容

tag项下面列的是该文章所属的标签，date项即是文章的书写日期，我们编辑好博文的文章内容之后可以在本地预览，也可发布到云端仓库查看效果

本地预览效果

写完博文之后，最好先在本地服务器预览一下效果，依次输入以下指令打开本地服务器预览效果。

1
2
3
$ hexo clean
$ hexo g
$ hexo s

此时，使用浏览器打开相应的地址即可预览。

发布新博文

发布博文的前提是已经进行过提交选项的设置并已在云端有一个发布空间，例如我使用的Github Page空间，键入以下指令：

1
2
hexo clean
hexo d -g

clean 指令是清除之前的缓存文件和已经生成的静态文件。
d -g 这条指令就是在 delpoy 之前进行 generate 操作，即是先生成静态文件，然后提交变更到云端。

至此，“Hello world”这篇博文成功发布到云端了，继续享受你的Hexo之旅吧。

使用npm-script便捷本地预览和发布博文

部分内容来源阮一峰-npm scripts 使用指南

每次本地预览和提交博文都需要繁琐的输入多条指令的日子不好过吧，来使用 npm script 解放双手吧。

打开 hexo 项目根目录下的 package.json 文件，添加或将 scripts 配置项修改为下文所示：

1
2
3
4
5
6
...
"scripts": {
  "local": "hexo clean && hexo g && hexo s",
  "net": "hexo clean && hexo d -g"
},
...

这样子修改的目的是使你在命令行中输入 npm run local 来代替 hexo clean、hexo g、hexo s 三次命令的依次输入。

修改之后，输入 npm run local 即能启动本地预览，输入 npm run net 即能提交博文更改到网络空间中。

进阶的配置还能够安装 open 模块，npm install --save open。该模块的功能是在默认浏览器打开指定网页。

即可将 package.json 文件的 scripts 配置项修改为：

1
2
3
4
5
6
...
"scripts": {
  "local": "hexo clean && hexo g && hexo s && node local.js",
  "net": "hexo clean && hexo d -g && node net.js'"
},
...

然后在根目录下新建两个 js 文件，内容如下：

1
2
3
4
// local.js
var open= require('open');
open('http://127.0.0.1:4000/');
// 由于 hexo s 会阻塞脚本命令的执行 所以暂时只能先打开浏览器再打开服务器 等服务器打开后刷新页面即可
1
2
3
// net.js
var open= require('open');
open('http://runtu4378.github.io/');

这样就可以在实现上面便捷输入连串指令的基础上增加一步，打开本地预览的网址或者是网络空间博客地址。

静态资源文件夹

Hexo提供了使用静态资源文件夹的相关设置资源文件夹|Hexo，提供了通过 source/images 来统一放置图片和使用与博文相同名字的文章资源文件夹来组织化管理图片资源的方式。

其中文章资源文件夹的方式是此章节说明的重点，方便不喜欢用图床来管理和使用图片的用户。

首先，在 _config.yml 文件中将 post_asset_folder 设置为 true。

开启了资源文件夹之后，Hexo 会在你每次使用 hexo new [layout] <title> 指令的时候在相同路径下创建一个与文章同名的文件夹。可以通过相对路径的方式来引用图片(将图片和博文视为在同一目录)。

不过我按照文档中的使用并无法实现（我的HExo版本是3.2.2），找了很久，终于找到了一个解决的方法–在 hexo 中无痛使用本地图片。

这个方法的重点是在原有的hexo基础上手动添加一个插件 hexo-asset-image

1
$ npm install https://github.com/CodeFalling/hexo-asset-image --save

安装了这个插件之后，就可以实现官方文档宣称的静态资源文件夹的功能了。假设以下是其中一篇博文的文档结构：

1
2
3
4
5
MacGesture2-Publish
├── apppicker.jpg
├── logo.jpg
└── rules.jpg
MacGesture2-Publish.md

需要注意的是，在md文件中需要按照以下方式才可以正常引用本地图片 ![logo](/logo.jpg)

使用 hexo-admin 进行博客管理

使用 hexo-admin 插件能够提供一个对博文进行管理的管理后台。

安装方法

1
npm i --save hexo-admin

安装完毕之后，输入以下命令启动 hexo 本地服务器

1
hexo server -d

启动完毕会有 Hexo is running at http://localhost:4000/. 的提示，此时打开上述地址即是 hexo 的预览地址。

浏览器输入 http://localhost:4000/admin 进入管理后台，进入如下菜单 Settings -> Settings -> Setup authentification here 进入登录账号的设定。

设置好登录账号、密码之后将如下所示的一系列配置项复制到 hexo 根目录的 _config.yml 文件中，即可生效。

1
2
3
4
5
# hexo-admin authentification
admin:
  username: username
  password_hash: $2a$10$L.XAIqIWgTc5S1zpvV3MEu7/rH34p4Is/nq824smv8EZ3lIPCp1su
  secret: my super secret phrase