使用Hexo搭建个人博客

Hexo介绍

Hexo是一个基于Node.js的免费开源的简单、快速而功能强大的静态博客程序，生成的网站全由静态网页组成，可以托管到Github或者Gitcafe等代码仓库上面。本博客就同时托管到这两个仓库上。Hexo需要用到Git、Node.js、Markdown等工具，下面将进行详细说明。

Hexo安装

  • 安装Git
    下载Git并执行文件便可以完成安装。

  • 安装Node.js
    访问官网地址，点击Install下载安装包，安装即可。

  • 安装Hexo
    在任意位置点击鼠标右键，选择Git bash，输入下面命令：

1
2
3
npm install -g hexo
npm install hexo-generator-feed
npm install hexo-generator-sitemap
  • 创建一个博客

初始化
创建网站目录（如E:\blog，点击鼠标右键，选择Git bash），执行以下指令(在E:\blog内)，Hexo 即会自动在目标文件夹建立网站所需要的所有文件

1
hexo init

安装依赖包

1
npm install

生成和运行服务器

1
2
hexo generate
hexo server

输入：http://localhost:4000/查看效果

  • 常用命令
1
2
3
4
5
hexo n== hexo new      //新建文章
hexo g== hexo generate //生成静态网页
hexo s== hexo server   //运行服务器
hexo d== hexo deploy   //部署到远程仓库
hexo c== hexo clean    //清理

把Hexo托管到Github和Gitcafe上

由于Github会被墙，所以可以使用国内的Gitcafe，以防万一，这里两个网站都部署。

先注册Github和Gitcafe账号，然后设置ssh免密码登陆，Git bash输入：

1
2
3
git config --global user.name "your name"
git config --global user.email "your email"
ssh-keygen -t rsa -C "your email"   //一直回车即可

然后到C盘文件夹用户->.ssh下面，打开id_rsa.pub文件，复制里面的内容到Github和Gitcafe的SSH Keys中:

编辑_config.yml(在E:\blog下)。你在部署时，要把下面的账户都换成你的账号名：

1
2
3
4
5
6
deploy:
  type: git
  message: ''
  repo:
	  github: git@github.com:xiaoxiaojiok/xiaoxiaojiok.github.io.git,master
	  gitcafe: git@gitcafe.com:xiaojian/xiaojian.git,gitcafe-pages

执行下列指令即可完成部署

1
2
hexo generate
hexo deploy

Hexo写博客

在Git bash中输入hexo new即可生成一篇新的文章:

1
hexo new "newPost"

Hexo的文章都是md格式，使用的是Markdown语法，平时只要记得下面几种情况就可以方便写文章：

这里推荐使用Sublime Text 2作为日常写文章的工具，这个工具十分强大，通过插件来扩展功能，下面列出常用的快捷键：

1
2
3
4
5
6
7
8
9
10
11
12
Ctrl+N：新建文件
Ctrl+O：打开文件
Ctrl+S：保存文件
Ctrl+W：关闭文件
Ctrl+Shift+S 文件另存为
Ctrl+Shift+W：关闭窗口
Ctrl+P：到达任意文件
Ctrl+R：到达函数
Ctrl+G：到达行
Ctrl+Shift+P：命令行（如此时键入SSH或PCI）
Ctrl+J：连接行
Ctrl+Enter 换行

目录结构

下面是我的博客目录结构：

更多

为博客添加顶部功能


1. 添加HTML代码。新建文件/themes/light/layout/_partial/totop.ejs，在文件中加入HTML代码：

1
2
3
<div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;">
<a title="返回顶部"><img src="/imgs/scrollup.png"/></a>
</div>


2. 添加JS代码。新建文件/themes/light/source/js/totop.js，在文件中添加javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
(function($) { 
	// When to show the scroll link
	// higher number = scroll link appears further down the page   
	var upperLimit = 1000;
	
	// Our scroll link element
	var scrollElem = $('#totop');
   
	// Scroll to top speed
	var scrollSpeed = 500;
   
	// Show and hide the scroll to top link based on scroll position   
	scrollElem.hide();
	$(window).scroll(function () {            
		var scrollTop = $(document).scrollTop();       
		if ( scrollTop > upperLimit ) {
			$(scrollElem).stop().fadeTo(300, 1); // fade back in           
		}else{       
			$(scrollElem).stop().fadeTo(300, 0); // fade out
		}
	});
	// Scroll to top animation on click
	$(scrollElem).click(function(){
		$('html, body').animate({scrollTop:0}, scrollSpeed); return false;
	});
})(jQuery);


如果对显示位置和回滚速度不太满意，可以修改以上代码的upperLimit和scrollSpeed参数即可。

3. 添加对HTML和JS文件的引用。修改themes/light/layout/_partial/after_footer.ejs文件，在文件末尾添加以下两行代码：

1
2
<%- partial('totop') %>
<script src="<%- config.root %>js/totop.js"></script>


4. 添加按钮图片。将下图复制到/themes/light/source/imgs目录下，文件名为scrollup.png。



最后，运行hexo s查看效果。

更多参考

Hexo还有很多的插件、widget需要自己去配置，例如网站图标、多说评论、百度分享、百度统计、Google分析、微博挂件等，网上已经有很多完整的教程，这里只是抛砖引玉，更多详细的教程可以参考下面这两个：

Zippera’s Blog
ibruce.info

Hexo
Hexo, Git