Hexo的安装与学习

环境准备

Git
Node.js

安装Hexo

采用全局安装脚手架方式，因此在命令行的任意路径下，执行如下命令：

1	sudo npm install hexo-cli -g

💡 提示：之所以使用sudo，是因为在安装hexo时需要访问/usr/local目录，会提示权限拒绝的错误。

这样，Hexo就算安装完成了!

使用Hexo

初始化Hexo项目工程

创建这个项目，主要是用于本地编写博客、配置博客网站、发布博客。

创建命令： hexo init [folder]

其中的folder表示项目的目录名称，可以任意取名。

Hexo配置

Hexo主要有两个配置文件，其名称都是 _confi.yml 。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

进入刚初始化的项目目录中，Hexo项目的目录结构如下：

站点配置文件

参考地址：https://hexo.io/zh-cn/docs/configuration

根目录下的_config.yml文件配置信息大致如下：

参数	描述
`title`	网站标题
`subtitle`	网站副标题
`description`	网站描述
`keywords`	网站的关键词。支持多个关键词。
`author`	您的名字
`language`	网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 `zh-Hans`和 `zh-CN`。
`timezone`	网站时区。Hexo 默认使用您电脑的时区。请参考时区列表进行设置，如 `America/New_York`, `Japan`, 和 `UTC` 。一般的，对于中国大陆地区可以使用 `Asia/Shanghai`。

其中，description 主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author 参数用于主题显示文章的作者。

扩展配置：

参数	描述
`theme`	当前主题名称。值为`false`时禁用主题
`theme_config`	主题的配置文件。在这里放置的配置会覆盖主题目录下的 `_config.yml` 中的配置
`deploy`	部署部分的设置
`meta_generator`	Meta generator 标签。值为 `false` 时 Hexo 不会在头部插入该标签

Hexo部署

在部署前，先说明几个Hexo常用命令。

参考地址：https://hexo.io/zh-cn/docs/commands

命令	简写命令	作用
hexo new		新建一篇文章。title表示文件名，当文件名有空格时，需要使用双引号括起来。
hexo clean		清除缓存文件 (db.json) 和已生成的静态文件 (public)。
hexo server	hexo s	启动服务器。默认情况下，访问网址为： http://localhost:4000/。
hexo generate	hexo g	生成静态文件。
hexo deploy	hexo d	部署网站。

部署前提：

修改配置文件
安装部署发布插件

修改配置文件：

以发布到github为例，在部署之前，需要修改站点配置文件，按照如下配置修改即可，其中repo指向自己的github地址。

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

deploy.branch表示发布的分支。

💡提示：repo指向的git仓库必须要是名为username.github.io的仓库，username就是自己github的帐号名。

安装部署发布插件：

在需要部署的项目路径下执行如下命令即可：

1	npm install hexo-deployer-git --save

平常部署一般分为三部曲：

hexo s本地运行调试；
hexo g生成静态文件；
hexo d部署网站，发布到指定服务器（例如github）。

依次执行成功后，浏览器访问username.github.io，就可以看到自己的博客了。

常见问题

一. hexo d时报错ERROR Deployer not found: git

按照错误提示，理解应该是需要安装hexo-deployer-git插件，但自己明明已经安装了。

最后发现是安装插件的路径不对，一定要在项目路径下执行。

二. 使用Typora上传图片，以及hexo不显示图片问题

解决步骤如下：

修改站点配置文件_config.yml 的post_asset_folder属性为true；
修改Typora设置，将图像的文件保存路径改为如下配置；
安装插件，用于hexo g生成静态文件时，将图片资源更新到文章目录下。
1
npm install https://github.com/CodeFalling/hexo-asset-image --save

三. Typora的emoji表情符不能被hexo识别问题

根据查资料了解，是因为hexo默认的md渲染器是 hexo-renderer-marked，这个默认渲染器不支持emoji功能，同时也不支持扩展。

因此，需要更换一个渲染器hexo-renderer-markdown-it，它支持扩展，再安装emoji的扩展包就可以正常识别表情符了。

解决步骤：

// 1. 卸载默认渲染器 并从package.json中移除
npm un hexo-renderer-marked -S
// 2. 安装mardown-it渲染器 并添加到package.json中
npm i hexo-renderer-markdown-it -S
// 3. 安装需要的插件  emoji支持表情符，task-lists支持tasks
npm i markdown-it-emoji markdown-it-task-lists -S
// 4. 在站点配置文件中 增加如下配置
markdown:
  render:
    html: true # 在 markdown 文本中支持 html tag 标签
    xhtmlOut: false # 需要 xtml 文档，使用 <br /> 替代 <br>
    breaks: false # 用 <br> 开始新的一行
    linkify: false # 自动将 可能是链接的内容转换成链接
    typographer: false # 印刷标识转换
  plugins:
    - markdown-it-emoji 
    - markdown-it-task-lists
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false,
    permalinkClass: 'header-anchor'
    permalinkSymbol: ''
    case: 0
    separator: ''