不知道为什么部分图片上传失败，一直上传不成功，如果有需要大家可以去我的小站观看
背景
作为一个开发者不能没有博客，最近花了几天的时间搭建了这个博客，处理了很多细节，在这篇文章中我会把我从开始到现在以及后续的优化整理出来，帮助更多的人搭建、维护、更新、自己的博客。
[图片上传失败...(image-a6d642-1517989244362)]
一开始我所有的博客都写在新浪微博，因为微博上更容易推广自己的文章，微博用户量大，但是后来微博的弊端慢慢的显示出来了，毕竟不是开发者的天地，我的博客中经常会插入大量的代码，而微博不支持markdown编辑，普通的编辑器对代码块的兼容性非常差，别说高亮了，有时候排版都会错乱，最后外观很不好看，如下图：
而且微博的账号系统也存在一定的弊端，所以后来转向、掘金等技术平台，不得不承认相对于微博来说这些平台对开发者就要友好多了，不过后来又发现一个问题。因为我在写文章的时候使用的是本地的markdown编辑器，而这些平台对markdown语法的一些小细节并不严谨或者说统一如下图：
两个平台的编辑器无法做到统一，以至于每次写完文章都需要针对两个平台做不同的修改。
综上所述，最简单的也最一劳永逸的方法就是搭建自己的博客平台，而HEXO很好的帮我们解决了这个问题，其实对于一个开发者来说并不是什么难事，整个流程对于大部分有代码基础的开发者来说一上午时间就可以搞定，不过最难的也是最头痛的就是对细节的调整，对UI的修改、优化等，不过本文会对此逐一讲解。
环境配置
- Node.js
cURL:
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
安装完成后，重启终端并执行下列命令即可安装 Node.js。
$ nvm install stable
- Git
一般的开发者不会没有这个吧，我是安装Xcode就会有这个了，
使用 Homebrew, MacPorts ：brew install git;或下载 安装程序 安装
- bitbucket账号
一般都会使用HEXO+GitHub page的形式搭建自己的博客，但是这里有个问题就是GitHub是开源的，任何人都能在上面看到你的源代码，虽然这并没有什么太大的影响，不过对于我来说感觉怪怪的，所以我就用了bitbucket page来处理我的博客，所有的东西都一样只不过这个是个私有库罢了（免费五个人）
[图片上传失败...(image-e0b2dc-1517989244362)]
开始建站
第一步：创建仓库
进入github/bitbucket（后续都以github为例）新建repo，这里要注意repo的名字一定要满足your Account Name/github.io。如果是bitbucket那就是your Account Name/bitbucket.io，因为只有这样的仓库名称最后才能以静态页面展示。如图：XXX的内容一定要与红色的框里的文本一致。
[图片上传失败...(image-793498-1517989244362)]
第二步：创建本地文件夹
创建文件夹之后CD到你创建的文件夹中执行hexo的初始化相关命令
$ hexo init
$ npm install
执行完毕之后你的文件夹里就有内容了，标准的目录结构是这样（只列出几个必要的文件夹及其子目录）
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml：
其中我们以后的大部分操作都会在_config.yml中进行，这个文件是我们的站点的配置文件。scaffolds：
模板文件，规定了我们创建一篇文章的时候最开始的样子，source：
可以暂时的理解成我们文章的存放处themes：
主题文件
第三步：部署到Git
修改我们的的站点配置文件_config.yml中如下字段
[图片上传失败...(image-2a6825-1517989244362)]
其中：
type值对应的是你所部署的的服务器类型，我们这里填写git就可以。repo是你的仓库地址，也就是仓库克隆的地址，推荐用https的链接。branch不写默认是master，通常我们写成master就可以。
以上配置完成后保存 然后回到终端执行npm install hexo-deployer-git --save安装一个插件，这样才能将你写好的文章部署到github服务器上并让别人浏览到。安装完成后在终端中依次执行如下代码(为了简单后续统称为三步)
hexo clean清理缓存hexo generate进行渲染 简写hexo ghexo server部署到本地(调试使用) 简写hexo s。然后浏览器输入http://localhost:4000就可以看到你博客的效果啦，不过这是本地调试用，其他人是看不到的。(调试完毕后记得control + C关闭本地端口，不然下次就进不去啦)调试完毕后使用
hexo deploy简写为hexo d来部署到git服务器。
执行完以上操作后打开浏览器地址了输入http://你github名字.github.io就可以看看到效果啦，这回是所有人都能看到的，用手机也可以。至此第三步已经完成,最终的结果如下图：
[图片上传失败...(image-92c5da-1517989244362)]
第四步：写文章
使用如下命令 hexo new post “文章名字” 就可新建文章啦，建立好的文章在 source/_posts 中，你可以用markdown语法编辑内容就可以。编辑完成后执行第三步中终端的操作就可以啦，刷新下浏览器就可看到你的新文章啦。如下图:
[图片上传失败...(image-bed833-1517989244362)]
个性化
一：主题
获取
主题是我么个性化的基础和前提，我们想做任何个性化上的修改基本上都是在我们主题上的修改，先找到一个自己满意的主题是首要任务。关于主题网上有很多很多，HEXO官方的主题目录也收录了好多来着世界各地开发者的主题。或者开发者也可以直接去网上搜索HEXO theme关键字来获取主题。
安装
主题一般都是repo，只要讲起clone到博客目录themes/XXXX下就可了，XXXX对应的就是你给主题起的名字，像这样：git clone https://github.com/huyingjie/hexo-theme-A-RSnippet.git themes/a-rsnippet 这样就可以保证每次主题的作者有更新了我们就可以 pull获取更新。不过这样有个问题后面我会在HEXO多终端同步一栏讲到，所以这里我们选择另一种方式去安装，就是直接把主题的repo下载下来
然后解压放到themes中。其实对于已经稳定的主题作者一般不会频繁更新，不稳定的主题我们也不会用，所以用后者安装也是一样的。
然后我们回到刚才的站点配置文件中_config.yml修改如下字段，对应的名字就是你刚才那个主题文件夹的名字：我这边是next，
[图片上传失败...(image-ab7a4c-1517989244362)]
然后保存，再去终端执行那三步，接着刷新网页就可以看到新的界面啦。下面是我换了NEXT主题刷新后的效果。因为该注意已经非常完善，所有后续用该主题做例子来讲
[图片上传失败...(image-af4ce3-1517989244362)]
二：主题菜单
添加按钮
主题菜单也可以说是主题按钮。也就是上面顶部的两个，next主题默认的两个是Home、Archive，我们一般会加上tag about category等。这些都是需要在主题上进行修改，我们需要修改主题的配置文件，首先在主题的文件夹下找到_config.yml文件，没错和之前的站点配置文件同名，只不过他们的路径不同，大家千万不要弄混，站点配置文件是配置站点通用的东西，而主题配置文件是配置一些主题的元素。在主题配置文件找到menu字段
[图片上传失败...(image-2220fe-1517989244362)]
可以看到主题作者注释掉了一部分按钮只保留了两个最基本的，这里需要注意前面的Key并不是代表的是按钮名字，因为该主题是支持多语言，所以这个key只是个标识，具体的按钮名字要去该路径下查找
[图片上传失败...(image-a8242e-1517989244362)]
其中每一个文件对应了不同的语言，我们以汉语为例，进入zh-Hans.yml中修改这些字段
[图片上传失败...(image-82bc96-1517989244362)]
其中key就是之前我们在主题配置文件中的key，而后面的value则是简体中文状态下按钮的名字。修改完成后我们保存执行那三步就可以看到我们新添加的按钮了。
添加页面
添加按钮后我们需要点击按钮显示统一的页面。这时候我们需要添加页面。以tag页面为例，hexo中添加页面的命令是hexo new page XXXXX 后面XXX则是要添加页面的名称，我们这里写tags。为了测试新建的tag页面我们对之前的页面添加个tag。去 source/_post中找一篇文章我们在开头添加如下字段,多标签以此类推
[图片上传失败...(image-a80002-1517989244362)]
然后编辑我们刚才生成的tag页面(source/tags/index.md)指定其type为tags
[图片上传失败...(image-1ac6fa-1517989244362)]
然后保存执行那三步就会有如下效果
[图片上传失败...(image-9e1eea-1517989244362)]
点击对应的tag即可跳转到改tag所对应的文章。其他页面同理。
三：添加阅读更多button
我们在首页的时候其实就是我们的文章列表，但是这时候有个问题，如果我们某一篇或者某几篇文章很长，那首页是不是更长呢？其实在首页我们可以只显示文章部分内容，通过点击阅读更多按钮来进入文章详情。这个时候就需要截断文章。我们在文章的合适地方采用``来截断,用默认文章来看
[图片上传失败...(image-d25afc-1517989244362)]
然后执行那三步就会如下效果
[图片上传失败...(image-4086d9-1517989244362)]
点击阅读更多。
四：更改主题背景
首先找到如下路径 themes\next\source\css_custom\custom.styl 会发现里面是空的，这个文件是Next主题为我们预留的做一些自定的css样式的地方，我们添加如下代码。
//背景图片相关
@media screen and (min-width:1200px) {
body {
background-image:url(/images/bg.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size: cover
}
#footer a {
color:#eee;
}
}
这里大家应该就可以看出括号里面的图片路径就是我们的背景图片，我们只需把图片放入 themes\next\source\images 中即可，记住图片名字要写对，要有后缀。同理括号里面我们可以直接放一个图片的链接比如 https://tpc.googlesyndication.com/simgad/6893153702744595670 做完这些操作保存，然后执行那三步即可看到效果，不过可能浏览器有缓存，可以清理下缓存再刷新看看。
五：修改博客背景透明度
既然再上一步中修改了背景图片，如果被NExt本身的白色挡住确实不好看，我们可以尝试把本身的白色背景变成透明的，这样会美观很多，同样还是修改刚才的文件 themes\next\source\css_custom\custom.styl 在上一步的基础上我们可以添加如下代码
//改变背景色和透明度
.main-inner {
background: #fff;
opacity: 0.9;
}
其中第一个属性为颜色值，第二个属性就是我们的透明度啦。适当修改，不然会适得其反连字都看不清啦。做完上两步就是我的这个博客的效果。
六：修改作者头像为圆形，
我们默认是方形的头像，想修改为圆形的话同样是上两步的那个路径下添加如下代码
.site-author-image {
border-radius: 100%;
padding: 2px;
border: 2px dashed #fff;
animation: cycle 2s 0.5s forwards;
transition: border-radius 2s;
}
保存 -> 三步 即可看到效果
[图片上传失败...(image-b8fc62-1517989244362)]
七：添加背景动画
背景动画使用Js来处理，会JS的同学可以自己写喜欢的动画，我这边就用了网上比较通用的动画。找到以下路径 themes\next\layout\_layout.swig 在文章