不知道为什么部分图片上传失败，一直上传不成功，如果有需要大家可以去我的小站观看

背景

作为一个开发者不能没有博客，最近花了几天的时间搭建了这个博客，处理了很多细节，在这篇文章中我会把我从开始到现在以及后续的优化整理出来，帮助更多的人搭建、维护、更新、自己的博客。

[图片上传失败...(image-a6d642-1517989244362)]

一开始我所有的博客都写在新浪微博，因为微博上更容易推广自己的文章，微博用户量大，但是后来微博的弊端慢慢的显示出来了，毕竟不是开发者的天地，我的博客中经常会插入大量的代码，而微博不支持markdown编辑，普通的编辑器对代码块的兼容性非常差，别说高亮了，有时候排版都会错乱，最后外观很不好看，如下图：

微博代码

而且微博的账号系统也存在一定的弊端，所以后来转向简书、掘金等技术平台，不得不承认相对于微博来说这些平台对开发者就要友好多了，不过后来又发现一个问题。因为我在写文章的时候使用的是本地的markdown编辑器，而这些平台对markdown语法的一些小细节并不严谨或者说统一如下图：

简书VS掘金

两个平台的编辑器无法做到统一，以至于每次写完文章都需要针对两个平台做不同的修改。

综上所述，最简单的也最一劳永逸的方法就是搭建自己的博客平台，而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 g

• hexo 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 在文章 </body>的上面添加如下代码

<script type="text/javascript"
color="255,255,255" opacity='1' zIndex="-2" count="100" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

然后 保存 -> 三步即可看到效果 其中src为JS的路径，有兴趣的可以自定义效果。

八：添加评论页面

HEXO的评论页面官方推荐了disqus，无奈已经被墙，即使开发时候自己有克服的方法但是也不能保证所有看你博客的人都有克服的方法。所有我们打算采用其他的的一些第三方来实现，首先先对市面上的几个产品做下对比：

比较：

• disqus

比较大牌的评论系统，服务稳定，唯一的缺点是国内无法使用。暂不考虑

• 多说
  国内比较出名的评论系统，已经关闭服务暂不考虑。

• gitment
  一款基于github issue的评论系统，风格很像github，只是目前还不是太稳定，且界面无法自定，可能会于博客有些不协调。而且评论需要github账号

• livere
  中文名字叫来必力，是一款韩国的评论系统，在不带有任何民族情感的前提下来看确实棒子的东西还是不错的，也是我目前在使用的一款，我主要用它的原因有几点

  • 支持很多种格式的评论导入，你可以很方便的吧之前在其他平台上的评论数据导入进来，支持多种json格式。

  • 简介的UI提供多种主题。

  • 国外的东西不受国内的限制。

集成：

先去livere的官网注册m，具体过程我就不讲了，一步一步安她的来就行，之后他会给你一个安装代码，像这样：

[图片上传失败...(image-795328-1517989244362)]

里面主要的信息就是data-uid。
NEXT主题本身是已经集成了livere评论的，只不过被注释掉了。找到主题配置文件 _config.yml 找到如下代码

[图片上传失败...(image-293656-1517989244362)]

打开注释填入你在livere中注册后它给你的UID即可。然后 保存 -> 三步即可。

多终端操作

背景

大家都知道HEXO是静态博客，所有的页面都是静态的通过本地文件渲染然后再部署上去，这就带来一个多终端部署的问题，比如公司电脑配置好了，想回家在进行写作，发现家里什么都没有还需要重新配置环境，不过这倒是次要，关键是如果不能保证两个终端的内容完全一样就会造成服务器上的数据会被最后一次部署覆盖，导致前几次的都被覆盖掉。

解决

其实大家应该也看出HEXO整体的一套流程下来就是git的工作流程，不管你用github还是bitbucket都是遵循gitflow的，而gitflow就是一种多终端多人协同工作的解决方案。所以我们可以用它来解决多终端同步的问题。

流程

我们先来了解下hexo的整体流程。我们正常的为文件夹结构如图：

[图片上传失败...(image-b1f92e-1517989244362)]

第一步：hexo g

source文件夹下存放着我们的文章，tag、归档之类的信息，也就是我们的博客的内容。当我们在终端执行 hexo g 的时候会被source中的文件按照某种规则方式渲染成静态的页面文件放到public中：

[图片上传失败...(image-e20d2c-1517989244362)]

第二步：hexo d

然后我们执行 hexo d 这一步暂时我们可以认为就是对public中的文件进行push到我们的git仓库的过程。所以在我们的仓库中 XXXXXX.bitbucket.io 大家看到的文件只有public中的文件。

附加：hexo clean

其实这一步是和gitflow没有关系的，但是既然讲到流程我这边也在说下，之前说过这步是用来清理缓存的，其实他的作用是运行在第一步之前，将整个public文件删除，然后我们再执行 hexo g 重新渲染进public，之后再 hexo d 进行部署，这样就避免之前的内容对我们造成影响。

具体操作

通过上一步流程我们知道如果git服务器上只有public是不够的，我们需要有我们整个博客文件夹下的所有文件才能进行多终端操作。所有这边有两个方法：

• 新建另一个仓库我们暂时命名为MyProject，把我们所有的文件传到这个Git仓库上，当我们换另一台电脑时候我们直接拉这个新仓库的代码然后进行写作 -> 三步走最后在将所有文件推到MyProject以后所有的git操作都在这个仓库中进行。

• git给我们提供了多分支操作，我们可以做xxxx.github.io这个仓库中创建一个新的分支暂时命名为hexo分支，这个分支的作用和上一个方法里MyProject的作用以及里面的文件一模一样，只不过我们这个方法就省的我们再创建一个仓库了。以后所有的git操作都去这个分支进行，本地的文件一直保持在这个分支就行，不过有一点需要注意的就是，即使所有的操作都在hexo分支下进行也必须保证master分支为主分支(default branch)，不然你就打不开你的博客了。

以上两种都是属于基本的git操作，本文不再赘述。不过有一点这里要强调下，还记一开始我跟大家说的主题的是推荐大家直接去主题所在的repo下载zip然后解压拖进博客目录里面吗？如果你不是拖拽进来的而是clone下来的话在这一步你会涉及到git的 add submodule操作。其实操作不难，具体的命令网上也是大把。不过如果你像我一样使用bitbucket的话可能发现无法进行submodule操作，不知道这个是bitbucket的BUG还是什么其他原因，同样的命令使用github托管博客的时候是没有问题的，而bitbucket就不行，当你使用另一台电脑的进行拉去的时候执行 git submodule init 操作的时候他会提示找不到。至今未解决，如果哪位大神有什么方法及时联系我。

绑定个人域名

<font color=red>注意：bitbucket 从2015年开始关闭了个人博客自定义域名的功能，也就是说如果你是按照上面操作把个人博客部署在bitbucket中的话就无法使用自己的域名，关于这一点bitbucket文档已经有明显的说明</font>

[图片上传失败...(image-984603-1517989244362)]

准备工作

在github上创建仓库，仓库的名字为 username.github.io。然后修改站点配置文件中部署地址（repo对应的字段），将原本的bitbucket的仓库地址改为github的地址

[图片上传失败...(image-64560c-1517989244362)]

之后进行保存然后三步走，部署成功后你的博客就从bitbucket上迁移到github中了，这样一来，你整体的博客仓库还是在bitbucket中的私有库中，但是public文件夹中的公开文件已经被你部署到github的仓库中。该保密的信息仍然保密，同时也不影响你绑定自己的域名，一举两得。正常情况下按照上面步骤完成后的博客地址是 xxx.github.io，下面就开始绑定自己的域名。

域名购买

这个渠道有很多，我就不再一一赘述，我这边以阿里云的万网域名购买为例,找到合适自己的域名

[图片上传失败...(image-c64667-1517989244362)]

域名解析

购买域名并且按照他的步骤实名认证之后，需要把域名解析到我们的博客中，在阿里云的控制台找到域名右侧对应的解析按钮。点击然后添加解析

[图片上传失败...(image-c4323a-1517989244362)]

[图片上传失败...(image-cd952d-1517989244362)]

然后按照如下填写添加解析，记得把记录值替换成你自己的博客地址

[图片上传失败...(image-d1911f-1517989244362)]

之后记得启用该记录，不过如果你像我一样是阿里云购买并且配置的话是不需要启用的，默认帮你启用。

仓库配置

然后回到你的github仓库，进入你的仓库设置页面，找到如下字段，在红框处添加你的域名，然后保存即可

[图片上传失败...(image-d18d39-1517989244362)]

博客配置

回到你的博客目录，在source目录下创建一个<font color=red>不带任何后缀的</font>文件，命名为 CNAME，里面填写你的域名，我是这样，只添加你的域名不要添加其他东西。然后保存 执行三步之后就可以通过你的域名访问你的博客啦，如果不能访问可能是因为运营商DNS缓存问题。等几分钟就可以了。

[图片上传失败...(image-3722c6-1517989244362)]

实现https协议

按照以上步骤完成后可以通过域名访问，但是有个问题就是如果你用谷歌浏览器或者Safari，他就会提示你网站不被信任，只有你点击仍要继续才会展示你的博客，并且地址栏里面还是有个红色的×，虽说不影响使用和阅读，但是还是感觉别扭，这次我们来讲如何将自己的博客协议改为Https。这里有几种方法：

• 购买证书

• 使用免费CA证书。腾讯云阿里云都有提供。不过有时间限制

• 使用CDN进行反向代理

如果使用上两步的话基本上证书的服务商都会告诉你如何配置，他们的文档讲的一定比我的详细，不过主要原因是我们使用的github Page是不支持上传证书的，所以这里主要说下第三步，通过CDN配置反向代理，这里就需要用到一个国外的CDN服务提供商Cloudflare:

[图片上传失败...(image-d2b256-1517989244362)]

原理

Cloudflare 提供DNS解析服务，而且速度很快，在阿里云半个小时才能生效的解析在它这里瞬间就生效，它提供了免费的https服务(但不是应用SSL证书)。实现模式就是，用户到CDN服务器的连接为https，而CDN服务器到GithubPage服务器的连接为http，就是在CDN服务器那里加上反向代理。

[图片上传失败...(image-8a229d-1517989244362)]

用户看到的小锁其实是用户连接到Cloudflare的证书，而由Cloudflare到github是没有https的，不过对于我们静态博客已经够了。

配置

第一步：

还是先去官网注册，然后添加你的域名，注意添加的是你购买的域名。

第二步：

进入DNS解析界面填入如下解析，因为我们使用clouldflare做DNS解析所以一会我们需要把我们购买域名的那个地方的解析删掉。

[图片上传失败...(image-ea9f1a-1517989244362)]

其中前两个是使你的域名指向github的服务器地址，github文档中给的就是这个两个地址，最后那个CNAME记录指向的是你的github仓库域名username.github.io。一定要严格按照这个来配置。

第三步：

记录下cloudflare给你的DNS解析服务器，就在上一步那个页面下边，用这个记录去把你域名购买处（我的是阿里云）的DNS解析服务器替换掉，同时删掉阿里云里面的DNS解析记录，因为我们以后就靠clouleflare来解析DNS啦。

[图片上传失败...(image-be875a-1517989244362)]

[图片上传失败...(image-d9e9e3-1517989244362)]

[图片上传失败...(image-b0c9a3-1517989244362)]

第四步：

回到clouldflare 上面选择crypto选项然后下面选择full或者是Flexible

[图片上传失败...(image-54f46f-1517989244362)]

选项中几个的区别如下图

[图片上传失败...(image-c690c2-1517989244362)]

最后那个是需要证书支持的。然后滚动到下面打开always use HTTPS开关

[图片上传失败...(image-6105d2-1517989244362)]

第五步：

以上步骤配置好之后基本就完成了，但是如果直接有人在地址栏里面输入http://XXXXX 进入你的博客的话你这边还是会出现非Https的效果，所以我们这里要做一个强制跳转。

[图片上传失败...(image-596cc4-1517989244362)]

这样就万无一失了。

坑点：

我之前按照以上步骤操作完成后发现首页虽然是https了也不显示红叉了，但是也没有显示绿色的小锁，而是一个叹号，但是有些博文页面可以正常显示https绿锁。后来发现是因为当前页面中有非https的链接导致，比如图片图床不是https的，或者评论插件不支持https，不过我博客中使用的来必力评论是支持https，只是我当时的图床无都是http所以只能是显示叹号了，后来把所有图片图床换成https的就好啦。

最后

整篇文章只有开始一小部分在讲解如何搭建博客，后续的基本都是交给大家如何优化，调整一些细节问题如UI、用户体验之类的，当然我们能做的远远不止这些，如果有什么问题欢迎与我探讨。下面的留言我都会看的。此外当本人对HEXO有新的看法或者玩法的话该文章会不断的更新，希望大家关注我的小站，感谢。