Bob Playground

Welcome to Bob‘s blog.

• 分类: 配置环境 • 标签: Hexo

使用 Hexo - Huno 搭建个人博客

Hexo 官网 提供了详细的文档。

本文就一部分最主要的工作进行了记录。

安装

$ npm install -g hexo-cli
$ npm install hexo --no-optional

$ hexo init <folder>
$ cd <folder>
$ npm install

主题

在 Hexo 的网站上就提供了很多主题，默认的主题是 Landscape。

此博客是在 Huno 主题的基础上修改的。

Huno 在 Github 上的主页

配置

_config.yml 是全局配置文件。

参照 hexo 全局配置文件文档 配置即可。

theme/<theme_name>/_config.yml 是主题的配置文件，参见使用主题的文档配置。

开始写作

新建一个草稿：

$ hexo new draft <file_name>

实际上就是在 source/_draft/ 下新建一个 <file_name>.md 文件。 草稿不会被发布到你的博客上。

使用文本编辑器书写：

$ vim ./source/_draft/<file_name>.md

书写完毕，可将该文转移至发布区。

$ hexo publish post <file_name>

实际上就是将文件从 source/_draft/ 目录下移动到 source/_post 目录下。

本地测试

$ hexo g
$ hexo s

hexo g 生成静态页面。 hexo s 启动本地服务器。 可以使用 $ hexo clean 清除之前生成的静态文件。

部署到 Github

  1. 安装 Git 插件：

    $ npm install hexo-deployer-git --save

  2. 在 Github 上新建一个仓库，必须命名为 <user_name>.github.io。user_name 是你在 Github 上的 name。

  3. 编辑 _config.yml 文件末尾：

    deploy:
  type: git
  repo: git@github.com:<user_name>/<user_name>.github.io.git
  branch: master

  4. 推送博客到 Github：

    $ hexo g
$ hexo d

即可访问 <user_name>.github.io 访问你的博客。

自定义语法高亮

修改模板文件 theme/huno/layout/layout.ejs：

  1. 在<head>标签中添加

    <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">

    可前往 https://highlightjs.org 下载各种样式的css。

  2. 在</body>标签前添加

    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script >hljs.initHighlightingOnLoad();</script>

可以通过修改 theme/huno/layout/ 中的模板文件自定义你的页面结构。 另外，css 文件位于 themes/huno/source/css/。

后面语法高亮我改为了 prism，同样是在模板文件中配置 css 和 js 文件即可。

Renderer

hexo-renderer-marked 是默认的 renderer，支持和 HTML 标签混编，但是对于 Markdown 语法的解析没有 hexo-renderer-markdown-it 好，有些格式不能被正确解析。

hexo-renderer-markdown-it 默认不支持和 HTML 标签混编。

需要在 hexo 的 _config.yml 文件中添加如下配置，以支持和 HTML 的混编：

markdown:
    render:
       html: true

卸载原renderer，使用新的renderer

$ npm un hexo-renderer-marked --save
$ npm i hexo-renderer-markdown-it --save

流程图

https://github.com/bubkoo/hexo-filter-flowchart

https://github.com/bubkoo/hexo-filter-sequence