使用Github与Hexo搭建blog | Focus on MySQL,Focus on Life

Contents

在csdn，blogjava，cnblogs，新浪等写过博客后，都觉得的不太理想。无意中看到hexo搭建的博客，觉得可以玩一玩。hexo是Node.js驱动的一款快速简单、功能强大的博客框架。其比jekyll更快更轻量。这里说下使用github和hexo搭建个人博客的步骤

安装hexo

参考文档

Hexo初始化

创建Hexo文件夹

安装完hexo后，进入放置blog的目录中，执行如下命令，初始化blog，这里假设blog名为blog：

1
2
3

$ hexo init blog
$ cd blog
$ npm install

发布测试blog

命令如下：

$ hexo g

本地查看效果

每次写blog时，可先在本地运行hexo server来预览效果。初始化完blog后，也可以先看看效果，输入如下命令：

$ hexo s

在浏览器上打开 http://localhost:4000 查看效果。如下：

helloworld

配置github

注册并设置github

注册github
在github中配置ssh key
点击右上角的”+”，”New Repository”新建仓库，仓库名为username加github.io，如注册github的用户名为 mattshma，则仓库名为mattshma.github.io
首次创建等待约10分钟的审核后，在浏览器上打开 http://.github.io 即可

404页面

如果首次创建<username>.github.io，在没有index.html存在的情况下会出现404。此时只需要添加index.html页面即可。如

1
2
3

<html>
Congratulations!
</html>

再次打开<username>.github.io，即可看见效果。

部署网页到github

编辑配置文件

打开_config.yml，找到如下行：

1 2	deploy: type:

修改为

deploy:
  type: git
  repository: git@github.com:mattshma/mattshma.github.io.git
  branch: master

保存退出。

安装hexo-deployer-git

执行命令：npm install hexo-deployer-git --save

同步本地文件到github

运行命令 hexo d同步文件到github中，此时在浏览器中打开 http://mattshma.github.io 即可看到内容。

更换主题

在主题中找到合适的主题，如使用Tinny。安装见README.md。

这里以Tinny为例进行一些说明，在 Tinny/_config.yml中，menu默认没有/tags和/categories，如果需要启用的话，可以在hexo n page tags和hexo n page categories，然后编辑index.md，内容为：

1
2
3

layout: tags (或categories)
title: tags (或categories)
---

发布文章

新写文章

1	$ hexo n [layout] <title>

编辑生成的.md，内容如下：

title: title #文章标题
date: 2015-02-05 12:47:44 #文章生成时间
categories: #文章分类目录，可以省略，后面需有空格
tags: #文章标签，可以省略，后面需有空格。多标签使用[tag1, tag2, tag3, ...]的形式
description: #你对本页的描述 可以省略
---
这里开始使用markdown格式输入你的正文。

生成html

$ hexo g

发布文章到github

$ hexo d

Hexo 常见插件

RSS 订阅

安装hexo-generator-sitemap插件即可

$ npm install hexo-generator-feed

Sitemap站点地图

安装hexo-generator-sitemap插件即可

$ npm install hexo-generator-sitemap

在全局配置（_config.yml）中开启插件

1
2
3

plugins:
  - hexo-generator-feed
  - hexo-generator-sitemap

访问<username>.github.io/sitemap.xml即可看到sitemap.xml。关于在google中开启sitemap的内容可查google。此略

更多插件可参考这里。

开启多说

如Tinny中，开启多说后，在打开浏览器时，可能会报请设置正确的 data-thread-key 属性。

编辑themes/hexo-theme/Tinny/layout/_partial/post/comment.ejs，修改两个地方：

1	<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>

替换为

1	<div class="ds-thread" data-thread-key="<%- config.root %><%- item.path%>" data-title="<%- item.title %>" data-url="<%- item.permalink %>"></div>

及设置

var duoshuoQuery = mattshma;

重新发布即可。

更换markdown渲染器

这里我使用hexo-renderer-markdown-it来代替原先的hexo-renderer-marked。设置方法参考hexo-renderer-markdown-it wiki。

#

其他技巧

概要

文章都放在source/_post中，在编辑文章时，使用more格式将文章分隔。pacman这一些主题都会截取前140个字。所以推荐将简介写在description中。

多标签

格式如下：

tags:
- 标签1
- 标签2
- 标签3
- etc...

图片

文章中显示图片
在source目录下，新建目录images，在需要插入图片的地方，输入![image_description](/images/image_name.png)即可。
概要中显示图片
在description前添加如下photos块：

1 2	photos: - http://xxx.com/photo.jpg

代码高亮

这里是个坑，折腾了很久才发现，基于pacman的主题，需要在主题本身的配置文件中开启高亮，编辑themes/hexo-theme/Tinny/_config.yml，添加如下行：

1 2	highlight: enable: true

保存退出后，运行

1 2	$ hexo g $ hexo s

刷新页面可以看到效果。