盒子
盒子
文章目录
  1. 前言
  2. Get ready!
  3. 搭建博客
  4. hexo常用命令
  5. hexo美化
    1. 为博客添加“多说”评论
    2. 添加翻页
    3. 分享功能
    4. 友情链接
    5. 添加RSS
    6. 添加sitemap

hexo使用

记录下hexo配合gitcafe搭建博客的林林总总,做个备忘录把

前言

hexo需要Git和Node.js的支持,本文不详细讲述这两个方面的技术。只做简单介绍把。博客系统“托管在”gitcafe上面,这里涉及git pages的概念,读者可以去网上查阅相关概念。博客通过使用markdown语法编辑,然后hexo生成静态博客,再发布到gitcafe的项目中。通过git pages的支持,博客就可以被正常浏览了。

Get ready!

搭建博客之前首先要学会使用git,强烈推荐大家使用命令行方式的。linux系统一般集成了这个常用工具,windows平台下推荐msysgit。图形界面的怎么都感觉用着别扭。

然后学习方面推荐几篇文章把:
关于git使用:
Git详解之一:Git起步
Git详解之二:Git基础
Git详解之三:Git分支
Git详解之四:服务器上的Git
Git详解之五:分布式Git
Git详解之六:Git工具
Git详解之七:自定义Git
Git详解之八:Git与其他系统
Git详解之九:Git内部原理
关于markdownu用法的简单说明:献给写作者的 Markdown 新手指南
markdown编辑器:stackedit

搭建博客

下面就开始搭建博客,搭建博客涉及到一点node.js的知识,但是设计较少,只需要把环境搭好就差不多了,更多了解请自行查阅相关资料。
node.js官网有node.js安装指南,Just Follow!也附上官方的hexo相关介绍,你要做的还是Read and Follow!

初始化
npm install hexo -g

npm就是node.js的包管理器,其实和python的包管理是差不多的,这一步的操作类似于安装了hexo这个包。

执行init命令初始化hexo到你指定的目录:

1
2
3
4
hexo init blog
cd blog
npm install
hexo server

到这里基本工作就完成了,你的初始工作目录下的blog目录就是你的博客目录了,以后每次执行hexo相关的命令都要切到blog目录下面。

生成静态页面

cd 到你的init目录,执行如下命令,生成静态页面至hexo\public\目录。
hexo generate

新建文章
hexo new [layout] "postName" #新建文章

[layout]指的是blog/scaffolds目录下的四种博客模板之一,也可以不指定,默认为post。


hexo常用命令

1
2
3
4
5
6
7
$ hexo init [folder] # 初始化一个网站
$ hexo new [layout] <title> # 创建新文章
$ hexo generate # 生成静态网页
$ hexo server # 启动服务,以便本地查看
$ hexo deploy # 发布你的blog
$ hexo migrate wordpress wordpress.2013-10-03.xml # 从wp迁移,效果差,仍需要手动调整
$ hexo clean # 清理缓存(db.json)和生成的文件(public)

hexo美化

这里只介绍简单的几种美化方面的方法技巧,网上这方面的文章很多,爱折腾的你可以自己去倒腾,让你的博客更美。当然好的东西别忘了和我分享。

为博客添加“多说”评论

  1. 在多说进行注册,获得通用代码。
  2. 将通用代码粘贴到themes\light\layout\_partial\comment.ejs里面,如下:
1
2
3
4
5
<% if ( page.comments){ %>
<section id="comment">
通用代码
</section>
<% } %>

添加翻页

在多说评论框<% if ( page.comments){ %>代码的前面

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>

分享功能

本人不是很喜欢那个分享功能所以直接去掉了
在themes\light\layout_partial\article.ejs中想去掉哪个删掉哪个

<%- partial('post/category') %>
<%- partial('post/tag') %>
<%- partial('post/share') %>

友情链接

在themes/light/layout/_widget中新建名为blogroll.ejs的文件,编辑内容如下:

1
2
3
4
5
6
<div class="widget tag">
<h3 class="title">友情链接</h3>
<ul class="entry">
<li><a href="http://baidu.com/" title="Baidu">Baidu</a></li>
</ul>
</div>

在themes/light/_config.yml中,添加如下:

1
2
widgets:
- blogroll

添加RSS

hexo提供了RSS的生成插件,需要手动安装和设置。步骤如下:
安装RSS插件到本地:npm install hexo-generator-feed --save
开启RSS功能:在themes/light/_config.yml中,编辑

1
2
3
4
feed:
type: atom
path: atom.xml
limit: 20

在站点添加链接:
themes/light/layout/_partial/header.ejs中,<ul></ul>之间,添加一样代码<li> <a href="/atom.xml">RSS</a> </li>

添加sitemap

同样的,我们使用hexo提供的插件,方法与添加RSS类似。
安装sitemap到本地:npm install hexo-generator-sitemap --save
开启sitemap功能:编辑themes/light/_config.yml,添加如下代码:

1
2
sitemap:
path: sitemap.xml

访问ohroot.com/sitemap.xml即可看到站点地图。不过,sitemap的初衷是给搜索引擎看的,为了提高搜索引擎对自己站点的收录效果,我们最好手动到google和百度等搜索引擎提交sitemap.xml。