hexo 快速入门

一直想有个github的博客，今天终于得空整好了，都说hexo很好用，今日一试，果然爱不释手。

@Zippera对hexo的介绍已经相当详细，没看过的戳这里。

hexo官方文档戳这里

这里只精简的总结一下，方便自己以后查阅。

介绍

hexo是一个基于Node.js的静态博客程序，可以方便的生成静态网页托管在github和Heroku上。作者是来自台湾的@tommy351。

优势

快速、支持 Markdown、已移植 Octopress 插件、高扩展性、自订性、兼容于 Windows, Mac & Linux、易用、轻、用户多。

安装

1、安装nodejs；windows平台nodejs下载地址: 下载
2、用npm安装hexo

1
npm install -g hexo

3、创建hexo文件，并在其文件下init初始化

1
hexo init

4、安装依赖包

1
npm install

5、生成静态文件

1
hexo generate

6、开启本地服务

1
hexo server

7、Install hexo-deployer-git.

1
npm install hexo-deployer-git --save

8、配置(前提是有自己的xxx.github.io仓库，若没有请参考 这里-github-pages-link
编辑\hexo\_config.yml:

1
2
3
4
deploy:
  type: git
  repository: https://github.com/oulafen/oulafen.github.io.git
  branch: master

9、执行deploy，更新本地静态页面到自己的博客仓库

1
2
hexo generate
hexo deploy

配置

站点配置用到两个文件，一个是对整站的配置..\hexo\_config.yml，另一个是对主题的配置..\hexo\themes\_config.yml，基本都是见文知意，就不多解释。

使用

发表博客

1
hexo new "my new post"

在..\hexo\source\_posts中打开这个文件，配置开头。

1
2
3
4
5
title: my new post #可以改成中文的，如“新文章”
date: 2013-05-29 07:56:29 #发表日期，一般不改动
categories: blog #文章文类
tags: [博客，文章] #文章标签，多于一项时用这种格式
---

之后是正文，用markdown写，使用方法可参照博客Introduction to markdown

添加“多说”评论

1、在多说进行注册-创建站点后，在后台管理-（站点）-工具中获取通用代码。
2、将通用代码复制到themes\light\layout\_partial\comment.ejs里，如下：

1
2
3
4
5
6
7
8
9
10
<% if ( page.comments){ %>
<section id="comment">
<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="<%- page.path %>" data-title="<%- page.title %>" data-url="<%- config.root %><%- page.path %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
......
<!-- 多说公共JS代码 end -->
</section>
<% } %>

其中data-thread-key的值为文章的唯一标识即可，我这里是用的path，也可用其他，注意必须是唯一的，否则很可能会出现不同文章间的评论错乱。

添加页面导航

先检查文件夹themes\light\layout\_partial\中是否有pagination.ejs文件，若有，直接在添加评论代码前加：

1
<%- partial('pagination') %>

且保证pagination.ejs中的内容如下：

1
2
3
4
5
6
7
8
9
<nav id="pagination" >
    <% if (page.prev) { %>
    <a href="<%- config.root %><%- page.prev.path %>" class="alignleft prev" ><%= __('prev') %></a>
    <% } %>
    <% if (page.next) { %>
    <a href="<%- config.root %><%- page.next.path %>" class="alignright next" ><%= __('next') %></a>
    <% } %>
    <div class="clearfix"></div>
</nav>

导航栏添加”关于”

1、执行hexo new page "about"
2、在themes/light/_config.yml中，添加如下：

1
2
menu:
  关于: /about

3、到source/about/index.md中写关于你的内容。

导航栏添加”RSS”

1、安装RSS插件到本地：npm install hexo-generator-feed
2、开启RSS功能：编辑hexo/_config.yml，添加如下代码：

1
2
plugins:
- hexo-generator-feed

3、在站点添加链接
在themes/light/_config.yml中，编辑 rss: /atom.xml;
在themes/light/layout/_partial/header.ejs中，<ul></ul>之间，添加代码<li><a href="/atom.xml">RSS</a></li>。

添加sitemap

方法同rss类似。
1、安装sitemap到本地：npm install hexo-generator-sitemap
2、开启sitemap功能：编辑hexo/_config.yml，添加如下代码：

1
2
plugins:
- hexo-generator-sitemap

总结

hexo命令简写

1
2
3
4
5
6
7
8
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo generate  #可简写成 hexo g
hexo deploy  #可简写成 hexo d
hexo server  #可简写成 hexo s
hexo new #可简写成 hexo n

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

由于hexo是基于nodejs的，所以若了解一些nodejs的用法，则有很多可以自由发挥的地方，甚至可以写一个自己的主题。
而作为web前端的妹子，自己的主题是一定会有的。

还在不断更新中，敬请关注……

blog
hexo