Hexo搭建自己的博客

本文仅做备份使用，部分超链接可能失效，原文链接于文章底部

4 Hexo

官网主题(模板)： https://hexo.io/themes/
中文版官网：https://hexo.io/zh-cn/docs/

step 0 前提安装有Node.js

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。安装 Node.js 的最佳方式是使用 nvm。

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

或者您也可以下载安装程序来安装。

Windows 用户
对于windows用户来说，建议使用安装程序进行安装。安装时，请勾选Add to PATH选项。
另外，您也可以使用Git Bash，这是git for windows自带的一组程序，提供了Linux风格的shell，在该环境下，您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行，您可以考虑始终使用Git Bash来进行操作。

step1 安装 Hexo

开始正题,所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

step2 init Hexo

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

$ hexo init hexofolder
$ cd hexofolder
$ npm install

新建完成后，指定文件夹的目录如下：

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml 网站的配置信息，您可以在此配置大部分的参数。

package.json 应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。(具体看官方文档，这里就不赘述了)

scaffolds 模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes 主题文件夹。Hexo 会根据主题来生成静态页面。

step3 Hexo 命令

在文件夹下就可以执行

$ hexo g #hexo generate 生成
$ hexo s #启动本地web服务器

这时，通过http://localhost:4000 ，访问页面。就可以看到，hexo默认带的主题landscap的效果。

Hexo常用的几个命令：
hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
hexo server (hexo s) 启动本地web服务，用于博客的预览
hexo deploy (hexo d) 部署播客到远端（比如github, heroku等平台）
另外还有其他几个常用命令：

$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面

常用简写

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy

常用组合

$ hexo d -g #生成部署
$ hexo s -g #生成预览

step4 添加其他主题

官网主题(模板)： https://hexo.io/themes/，在上面选择自己喜欢的模板，进入它对应的git页面，获得clone的链接。

这里以我改的主题Hexo-theme-zilan为例进行说明，我这个主题增加了。安装主题

$ hexo clean
$ cd hexofolder/themes
$ git clone https://github.com/CatherineLiyuankun/Hexo-theme-zilan.git

可以看到themes文件夹下多了一个文件夹Hexo-theme-zilan。启用主题

修改Hexo目录下的_config.yml配置文件中的theme属性，将其设置为Hexo-theme-zilan。

###更新主题

$ cd themes/Hexo-theme-zilan
$ git pull
$ hexo g # 生成
$ hexo s # 启动本地web服务器

现在打开http://localhost:4000/ ，会看到我们已经应用了一个新的主题。

step5 部署到git pages

这一步恐怕是最关键的一步了，让我们把在本地web环境下预览到的博客部署到github上，然后就可以直接通过http://CatherineLiyuankun.github.io/访问了。

首先需要明白所谓部署到github的原理。

之前步骤中在Github上创建的那个特别的repo（CatherineLiyuankun.github.io）一个最大的特点就是其master中的html静态文件，可以通过链接http://CatherineLiyuankun.github.io来直接访问。 Hexo -g 会生成一个静态网站（第一次会生成一个public目录），这个静态文件可以直接访问。需要将hexo生成的静态网站，提交(git commit)到github上。明白了原理，怎么做自然就清晰了。

使用hexo deploy部署 hexo deploy可以部署到很多平台，具体可以参考这个链接. 如果部署到github，需要在配置文件_config.xml中作如下修改：

deploy:
  type: git
  repo: git@github.com/CatherineLiyuankun.github.io
  branch: master

注意部署到git需要提前安装一个扩展：

$ npm install hexo-deployer-git --save

然后在命令行中执行

hexo d

即可完成部署。

去自己的git pages看下部署的成果吧！https://catherineliyuankun.github.io/

step5 添加分类

添加分类页

新建一个页面，命名为 categories 。命令如下：

hexo new page categories

编辑刚新建的页面/source/categories/index.md，将页面的类型设置为 categories ，主题将自动为这个页面显示所有分类。

title: 分类
date: 2018-8-22 12:39:04
type: "categories"
--

注意：如果有启用多说或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

title: 分类
date: 2018-8-22 12:39:04
type: "categories"
comments: false
--

在菜单中添加链接。编辑主题的 _config.yml ，将 menu 中的 categories: /categories 注释去掉，如下:

  menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

但是这样部署之后，在分类页面还是看不到任何分类的，同时官方的next教程中并没有写。其实为文章添加分类关联的教程已经在hexo教程给出了。。下面仅仅做个简单的介绍，全面的教程参照hexo官方教程

文章内添加分类：

--
title: Installing MySQL on Mac
catalog: true
date: 2018-09-29 14:23:53
subtitle: "zsh: command not found"
header-img: "https://github.com/CatherineLiyuankun/PictureBed/raw/master/blog/post/Installing-MySQL-on-Mac/mysql-header.png"
tags:
MySQL
categories:
TECH
Database
--

###添加文章分类关联 hexo中有Front-matter这个概念，是文件最上方以 — 分隔的区域，用于指定个别文件的变量。举个栗子，在hexo new post article时会生成article.md文件，文件生成好的文章属性。

--
title: hexo next 为文章添加分类
date: 2018-8-22 18:12:43
tags:
--

在其中添加categories属性，再部署之后就可以在分类页看到分类了

---
title: hexo next 为文章添加分类
date: 2018-8-22 18:12:43
tags:
categories: 
Frontend
---

step5+ 分类显示页面

参考hughshen的文章

我的Commit代码1：[categories] page and category page work

Commit 代码2：重构archive，category, tags
├── archive.ejs //文章归档，包括单个分类与单个标签，调用 _partial/archive.ejs
├── categories.ejs //显示所有分类的布局，
├── category.ejs //单个分类显示的布局，调用 _partial/archive.ejs
├── tags.ejs //显示所有显示的布局，调用 _partial/archive.ejs, 调用_partial/tags.ejs

step6 多级分类显示

利用系统的list_categories([categories], [options])辅助函数生成分类列表;

<%- list_categories([options]) %>

参数	描述	默认值
orderby	分类排列方式	name
order	分类排列顺序。1, asc 升序；-1, desc 降序。	1
show_count	显示每个分类的文章总数	true
style	分类列表的显示方式。使用 list 以无序列表（unordered list）方式显示。	list
separator	分类间的分隔符号。只有在 style 不是 list 时有用。	,
depth	要显示的分类层级。0 显示所有层级的分类；-1 和 0 很类似，但是显示不分层级；1 只显示第一层的分类。	0
class	分类列表的 class 名称。	category
transform	改变分类名称显示方法的函数

具体代码见Commit: [categories][sidebar]Make categories display as hierarchical structure in sidebar

step6+ 分类页面显示不同背景图片

见下方原帖

看我的commit：侧边栏添加微信二维码widget step8 模板

在layout布局文件夹中, 可以看到有的主题布局文件是.ejs 结尾，有的是.swig结尾，其实是使用的模板不同。用于存放主题的模板文件，决定了网站内容的呈现方式，Hexo 内建 Swig 模板引擎，您可以另外安装插件来获得 EJS、Haml 或 Jade 支持，Hexo 根据模板文件的扩展名来决定所使用的模板引擎。对于下载的jade的模板，需要在安装插件。终端下输入

npm install hexo-renderer-jade --save

对于下载的Ejs的模板，需要在安装插件。终端下输入：

npm install hexo-renderer-ejs --save

对于下载的Haml的模板，需要在安装插件。终端下输入：

$ npm install hexo-renderer-haml --save

转载