你好HEXO

|
其他
| 随笔

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

博客搭建指南

Hexo的简洁、神秘让我跃跃欲试，在使用过程中遇到了很多问题，整理此文，一是方便其他技术人搭建自己的博客，二是给自己的学习之旅做个总结。本文未完结，欢迎star、fork，如果有错误，请不吝指出。
我搭建的博客地址：limedroid.github.io

Hexo介绍

Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github和Heroku上。

  • 超快速度
  • 支持MarkDown
  • 一键部署
  • 丰富的插件

下面以我的博客为例，limedroid.github.io

环境准备

安装node.js

去nodejs官网下载对应系统的安装包，按提示安装。

检验安装成功：

1
$ node -v

安装hexo

1
$ npm install hexo-cli -g

注意：Mac系统，则需要

1
$ sudo npm install hexo-cli -g

利用Hexo搭建一个博客

创建博客目录

1
2
3
$ hexo init limedroid.github.io
$ cd limedroid.github.io
$ npm install

生成静态页面

1
2
$ hexo clean
$ hexo g

g 即generate

运行

1
$ hexo s

s 即server

然后打开浏览器，输入地址 localhost:4000 即可看到效果

发一篇文章试试

命令方式

1
$ hexo new test

此时会在source/_posts目录下生成test.md文件，输入些许内容，然后保存.

生成下，看看效果

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

访问 localhost:4000 即可

直接方式

在 source/_posts/下新建一个.md文件也可

配置

网站的设置大部分都在_config.yml文件中，详细配置可以查看官方文档

下面只列出简单常用配置

  • title -> 网站标题
  • subtitle -> 网站副标题
  • description -> 网站描述
  • author -> 您的名字
  • language -> 网站使用的语言

坑：进行配置时，需要在冒号:后加一个英文空格

1
title: Droidlover

换一个好看的主题

Hexo 中有很多主题，可以在官网查看。
这里我推荐hexo-theme-next，下面列举更换主题的一般套路：

下载主题资源

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

应用下载的主题

在网站配置文件_config.yml中，配置theme

1
theme: next

next是主题名称，具体的可查看主题的文档

主题其他配置

可在/theme/{theme}/_config.yml 主题的配置文件下进行主题的配置。

接下来，可以执行万能的调试命令看看效果

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

部署到Github

有个github账号xxx

创建一个xxx.github.io的public仓库

如果您的账户名是limedroid,则需要创建一个limedroid.github.io的public仓库.

hexo-deployer-git

1
$ npm install hexo-deployer-git --save

网站配置git

在网站的_config.yml中配置deploy

1
2
3
4
deploy:
  type: git
  repo: <repository url>
  branch: [branch]

branch为分支，默认为master,可以不配置
repo为仓库地址，在github上新建仓库后，可复制此地址

部署

1
$ hexo d

d 即deploy

贴标签，方便搜索

两个确认

  • 确认站点配置文件有 

    1
    tag_dir: tags

  • 确认主题配置文件有

    1
    tags: tags

新建tags页面

1
$ hexo new page tags

此时会在source/下生成tags/index.md文件

修改source/tags/index.md

1
2
3
4
title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false

date 可保持系统生成的时间，

1
2
type: "tags"
comments: false

很重要

在文章中添加tags

在文章xx.md中添加：

1
2
3
4
tags: 
	- Tag1
	- Tag2
	- Tag3

多个Tag可按上面的格式添加。

其文件头部类似：

1
2
3
4
5
6
title: TagEditText
date: 2016-11-19 10:44:25
tags: 
	- Tag1
	- Tag2
	- Tag3

分类，给文章归档

两个确认

  • 确认站点配置文件打开了

    1
    category_dir: categories

  • 确认主题配置文件打开了

    1
    categories: /categories

新建categories文件

1
$ hexo new page categories

此时会在source目录下生成categories/index.md文件

修改categories/index.md

1
2
3
4
title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false

date 可保持系统生成的时间，

1
2
type: "categories"
comments: false

很重要

在文章中添加categories

在文章xx.md中添加：

1
2
categories: 
	- cate

其文件头部类似：

1
2
3
4
title: TagEditText
date: 2016-11-19 10:44:25
categories: 
	- cate

添加评论功能

评论功能在国内一般使用多说。

注册多说账号

创建站点

需要注意的是，填写的多说域名不能更改，会在后面使用，在这里我配置成droidlover

配置

在hexo主题配置文件中搜索：

1
duoshuo_shortname

，然后打开开关，配置成前面设置的多说域名，如下：

1
duoshuo_shortname: droidlover

有时，可能需要一段js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"droidlover"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
<!-- 多说公共JS代码 end -->

现在，你可以运行看下效果了:)

加介绍页面，让全世界认识你