最近两天加周三的一个晚上，参照网上的博客搭建了属于自己的博客，其实之前也对比过Jekyll，Octopress，Python实现的myblog, 以及第三方博客，如Blogger，cnblogs，csdn等等，只能说各有千秋吧，还是希望能够有一个属于自己的空间。为避免忘记，也为了表示对社区的感谢，现在对部署过程进行一下纪录。主要包括：

基本Hexo的搭建
主题的选择
扩展功能的介绍

开始之前，先对系统环境进行一下说明，Hexo的部署需要Node.js的支持。我的网站部署在Github上，也有其他的开源空间（如Coding）可选，本文以Github为例，并假设你已经有了Github帐号。

系统环境：

OS X 10.11
Xcode 7.2
Node.js v4.4.6 LTS 直接官网下载，一路默认安装即可
Git 2.6.2(Windows用户请下载客户端)
SSH

以上对于Mac用户来说，只需下载并安装Node.js即可。
在Terminal下进行测试：

$ npm -v

显示版本号

$ 2.15.5

说明Node.js安装成功。

SSH连接Github（可选）

本步骤可选，但是为了避免每次访问Github都需要输入密码，可以选择配置SSH Key，直接上步骤：

1.设置git参数：

1 2	$ git config --global user.name "Your Name" $ git config --global user.gmail "Your Email"

这里的用户名和邮箱不一定是你的Github帐号的用户名和邮箱

2.生成SSH密钥（此处省略备份已有密钥的步骤）

1	$ ssh-keygen -t rsa -C "kingsleynuaa@gmail.com"

按三次回车即可，可以在~/.ssh目录下看到id_rsa（私钥，注意保密）和id_rsa.pub(公钥，可随意公开)两个文件

3.添加私钥到SSH，添加公钥到Github页面

1	$ ssh-add id_rsa

在Github－setting－key页面添加公钥，即id_rsa.pub里面的内容（可用vim打开查看并复制）

4.测试是否成功

1	$ ssh git@github.com

出现类似提示表示成功

1 2	$ Hi kingsleynuaa! You've successfully authenticated, but GitHub does not provide shell access. Connection to github.com closed.

此处推荐学习Git的好书Pro Git

OK, 现在开始用Github正式搭建Hexo.

基本Hexo的搭建

cd命令进入你要部署的文件目录，在Terminal下运行以下命令（去掉＃以后的说明文字）：

$ cd ~/                    #进入用户目录
$ mkdir AC4Fun             #建立文件夹，你的网站将部署在这里，名称可自行修改
$ cd AC4Fun					
$ npm install -g hexo      #安装Hexo
$ hexo init
$ npm install

至此，Hexo已经在本地部署完成。来试试写一篇文章吧

1	$ hexo new "文章名字"

然后使用vi或者其他编辑器编辑文档并保存，生成网页文件，并开始服务器

1 2	$ hexo generate $ hexo server

此时，即可在本地浏览器中打开页面http://localhost:4000 查看啦，😄，第一次看到自己的网站的时候是不是还有一些激动呢？

OK，此时，网站文件仍然在本地，需要部署到Github才能被更多人看到呢

安装Git部署插件

首先在你的Github中新建一个Repository：用户名.github.io (如kingsleynuaa.github.io)，接下来安装插件：

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

配置 _config.yml 文件

在Hexo安装的目录，如 ~/AC4Fun/ 中找到 _config.yml 文件,打开并翻到最后，找到 deploy 字样，改成如下格式：

deploy: 
  type: git 
  repo: https://github.com/用户名/用户名.github.io.git 
  branch: master

需要注意的是：冒号后面有一个空格；使用github可以不用写branch那一行。接下来就可以将网站从本地部署到Github啦（你也可以选择修改以上标签部署到别的空间），输入命令:

1	hexo deploy

至此，如果没问题的话，打开你的github同名网站就可以看到属于你自己的个人博客啦～
如我的博客：kingsleynuaa.github.io

下面对上述经常需要使用的命令做一下简单总结：

1
2
3

$ hexo clean    #清楚public文件夹，重新部署之前的步骤
$ hexo generate #修改配置或者提交新文章后都需要重新部署，主要是生命public文件夹里面的内容
$ hexo deploy   #将更新后的的博客上传至你的github空间

现在你已经部署好了你的个人博客，并且学会了如何写一篇博客。

不过，这个网站仍然有很多不足，比如，界面你就不太喜欢，怎么办呢？我们可以更换主题啊～

选择主题与优化

在开始选择合适的主题与优化之前我们先来了解一下Hexo博客的结构，并做一下简单的说明。
Hexo的结构如下：

.deploy_git：执行hexo deploy命令部署到GitHub上的内容目录
public：执行hexo generate命令，输出的静态网页内容目录
scaffolds：layout模板文件目录，其中的md文件可以添加编辑
scripts：扩展脚本目录，这里可以自定义一些javascript脚本
node_modules安装的一些Hexo工具，每个都会在这里建立一个文件夹，并以Hexo－开头
source：文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、 favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录。
- _drafts：草稿文章
- _posts：发布文章
themes：主题文件目录
_config.yml：全局配置文件，大多数的设置都在这里。详情可以查看源文件注释。
package.json：应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

下面开始修改主题，一般都去官网选择自己喜欢的主题，clone到自己的theme文件夹下并修改全局配置文件下的theme标签，Hexo默认为landscape。每个主题的作者都会比较详细的介绍自己主题的配置说明。这里就不详述了。

我选择的是coney,可以点击AC4Fun查看。一般觉得比较好的还有Pacman等等

自定义域名（可选）

首先需要购买域名，可选网站有GoDaddy（听说有优惠码，会便宜很多），我选择的是阿里云的服务，直接购买了三年的域名，对比价格发现相差不多。
你需要在source文件夹下新建一个文件名为CNAME，文件内容为你的自定义域名（如www.ac4fun.com）,然后在Aliyun后台添加域名解析到你的github地址即可。[参考](http://jingyan.baidu.com/article/3c343ff70fb6e60d3779632f.html)

扩展功能的介绍

评论框

Hexo默认采用的是Disqus，我觉得挺好的，直接在全局配置文件下修改disqus标签enable为true即可。
当然你可以可以配置duoshuo,需要注册多说的帐号，并修改你的主题下_config.yml中配置duoshuo_shortname为多说的基本设置->域名中的shortname，并修改你的主题下文件夹中的layout_partial\comment.ejs

<% if (config.disqus_shortname && page.comments){ %>
<section id="comment">
  #你的通用代码
<% } %>

通用代码见多说官网，注册登录后可以找到。

自定义页面

在hexo\source\下手工新建about和index.md，并在主题配置文件下修改memu下的标签。

页面统计

注册并登录百度统计，获取你的统计代码。
在主题配置文件下新建

1	baidu_tongji: true

在\layout_partial\目录下新建baidu_tongji.ejs并添加如下代码：

<% if (theme.baidu_tongji){ %>
<script type="text/javascript">
#你的百度统计代码
</script>
<% } %>

编辑文件layout_partial\head.ejs，在『/head』之前增加：

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

站内搜索

本部分来自教程［3］，当然使用Baidu站内搜索功能也可以的。

主要步骤如下：

Swiftype官网注册帐号，按照提示输入你的自定义域名，起名字（最好和你的域名一致）
安装。按照提示一步步往下即可，一路Next，注意“Results container”部分如果不喜欢弹出模式可以选择否，然后点击Active激活
在主题配置文件_config_yml中添加标签：

1
2
3

swift_search:
  enable: true

然后在Hexo主目录下新建search文件夹并新建index.md文件，在index.md写入：

1
2
3

layout: search
title: search
----

然后在主题目录下的layout_partial目录下，先打开header.ejs，
在

与

之间添加

<% }else if	(theme.swift_search&&theme.swift_search.enable){ %>
						<form class="search" action="<%- config.root %>search/index.html" method="get" accept-charset="utf-8">
						<label>Search</label>
						<input type="text" id="search" 
class="st-default-search-input" maxlength="20" placeholder="Search" />
						</form>

有一定程序设计经验的人应该很容易看懂，就是在if－else中加入一种情况

然后将search.js文件清空，并替换如下代码：

<% if(theme.swiftype_search.enable) { %>
<div  id="container" class="page">
  <div id="st-results-container" class="st-search-container" 
style="width:80%"> Loading now...</div>
  <style>.st-result-text {
  background: #fafafa;
  display: block;
  border-left: 0.5em solid #ccc;
  -webkit-transition: border-left 0.45s;
  -moz-transition: border-left 0.45s;
  -o-transition: border-left 0.45s;
  -ms-transition: border-left 0.45s;
  transition: border-left 0.45s;
  padding: 0.5em;
}
@media only screen and (min-width: 768px) {
  .st-result-text {
    padding: 1em;
  }
}
.st-result-text:hover {
  border-left: 0.5em solid #ea6753;
}
.st-result-text h3 a{
  color: #2ca6cb;
  line-height: 1.5;
  font-size: 22px;
}
.st-snippet em {
  font-weight: bold;
  color: #ea6753;
}</style>
<!--注意下面到</script>结束的代码块要替换成自己上面保存的Install Code代码--!>
<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');  
  _st('install','zpDUHTyGUc4YVxxVWn9w','2.0.0');
</script>
<% } %>

最后打开footer.ejs（其实header也行，随便你），在最后一个标签之前添加一开始拷贝的那段js代码.

然后重新部署即可。效果

扩展功能介绍就到这里，其他关于如何建立更漂亮的博客，分享，图床，微博秀等我觉得没什么必要或者暂时没有时间，就没有弄了，建议感兴趣的自行摸索，有问题欢迎沟通

总结

其实这是我第一次用markdown写这么长的文章，从下午到晚上九点，整整写了快6个小时。不得不说，自己知道了，然后总结出来，还是很耗费时间的，但是我相信这个是十分有意义的，而且也能够方便自己以后查阅。
另外，以前总觉得前端的工作比较烦，但是现在感觉能做好做美观一个页面还是挺有意义，也挺不容易的。昨晚这个博客，希望以后能够好好写博客，做好自己的知识管理。定期和自己来一次约会。如果有人能够看到这里，我真是非常感动的呢～哈哈，也希望通过博客能够找到志同道合的人。如果博客中有什么问题，也希望大家能够告诉我，我会及时修正的。如果有什么可以改进的地方，只要能方便大家理解的，也希望大家能够及时提出来，谢谢啦～
好吧，这是博客开通以来，第一篇博客，希望能够一直坚持下去，争取做到一周一篇。

汇芳书院

如何使用Hexo和Github搭建静态博客