最近两天加周三的一个晚上，参照网上的博客搭建了属于自己的博客，其实之前也对比过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参数：
$ git config --global user.name "Your Name"
$ git config --global user.gmail "Your Email"
这里的用户名和邮箱不一定是你的Github帐号的用户名和邮箱
2.生成SSH密钥（此处省略备份已有密钥的步骤）
$ ssh-keygen -t rsa -C "kingsleynuaa@gmail.com"
按三次回车即可，可以在~/.ssh目录下看到id_rsa（私钥，注意保密）和id_rsa.pub(公钥，可随意公开)两个文件
3.添加私钥到SSH，添加公钥到Github页面
$ ssh-add id_rsa
在Github－setting－key页面添加公钥，即id_rsa.pub里面的内容（可用vim打开查看并复制）
4.测试是否成功
$ ssh git@github.com
出现类似提示表示成功
$ 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已经在本地部署完成。来试试写一篇文章吧
$ hexo new "文章名字"
然后使用vi或者其他编辑器编辑文档并保存，生成网页文件，并开始服务器
$ hexo generate
$ hexo server
此时，即可在本地浏览器中打开页面http://localhost:4000 查看啦，😄，第一次看到自己的网站的时候是不是还有一些激动呢？
OK，此时，网站文件仍然在本地，需要部署到Github才能被更多人看到呢
安装Git部署插件
首先在你的Github中新建一个Repository：用户名.github.io (如kingsleynuaa.github.io)，接下来安装插件：
$ 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啦（你也可以选择修改以上标签部署到别的空间），输入命令:
hexo deploy
至此，如果没问题的话，打开你的github同名网站就可以看到属于你自己的个人博客啦～
如我的博客：kingsleynuaa.github.io
下面对上述经常需要使用的命令做一下简单总结：
$ 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地址即可。参考
扩展功能的介绍
评论框
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下的标签。
页面统计
- 注册并登录百度统计，获取你的统计代码。
- 在主题配置文件下新建
baidu_tongji: true
- 在\layout_partial\目录下新建baidu_tongji.ejs并添加如下代码：
<% if (theme.baidu_tongji){ %>
<script type="text/javascript">
#你的百度统计代码
</script>
<% } %>
- 编辑文件layout_partial\head.ejs，在『/head』之前增加：
<%- partial('baidu_tongji') %>
站内搜索
本部分来自教程［3］，当然使用Baidu站内搜索功能也可以的。
主要步骤如下：
- Swiftype官网注册帐号，按照提示输入你的自定义域名，起名字（最好和你的域名一致）
- 安装。按照提示一步步往下即可，一路Next，注意“Results container”部分如果不喜欢弹出模式可以选择否，然后点击Active激活
- 在主题配置文件_config_yml中添加标签：
swift_search:
enable: true
然后在Hexo主目录下新建search文件夹并新建index.md文件，在index.md写入：
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个小时。不得不说，自己知道了，然后总结出来，还是很耗费时间的，但是我相信这个是十分有意义的，而且也能够方便自己以后查阅。
另外，以前总觉得前端的工作比较烦，但是现在感觉能做好做美观一个页面还是挺有意义，也挺不容易的。昨晚这个博客，希望以后能够好好写博客，做好自己的知识管理。定期和自己来一次约会。如果有人能够看到这里，我真是非常感动的呢～哈哈，也希望通过博客能够找到志同道合的人。如果博客中有什么问题，也希望大家能够告诉我，我会及时修正的。如果有什么可以改进的地方，只要能方便大家理解的，也希望大家能够及时提出来，谢谢啦～
好吧，这是博客开通以来，第一篇博客，希望能够一直坚持下去，争取做到一周一篇。
