个人博客搭建

本篇文章记录了博客选择和试用的过程，旨在为同样想开始维护博客的同学一些帮助。

写篇博客吧

一直从网络上获取帮助，自己也想将自己遇到的问题和解决方案发布出来，或许能够帮助遇到同样问题的人。

csdn，博客园，简书等有很多平台提供写博客的功能，但这些毕竟不是自己能够控制的，虽然不担心它们运营不下去，但是自己辛苦成果就这么放到别人家的平台上总会不甘心。搭建自己的博客平台就是一个很好的解决方案。

搭建自己的博客

hexo

hexo是基于NodeJS环境的静态博客生成和发布工具。安装完hexo之后，你能够使用hexo将本地 markdown 文件转化为静态网页（html，css，js）。

通常情况下，我们的博客不是单独光秃秃的一片文章， 需要首页，归档，关于等一个主页应用的部分，隐藏我们需要将博客安装一定组织结构整合起来，然后使用 g命令生成静态网页。

github等当前主流代码管理平台支持的pages服务能够让你上传的静态网页以网页形式而非代码展示出来。

为了方便发布，hexo提供d （deply）命令，通过配置将博客发布到指定远程分支。

不是所有修改都需要发布的，有些内容需要在本地预览，hexo提供 s (server) 命令，在本地运行一个http容器服务，这样就可以查看效果。

流程梳理

特点

• hexo 保留了一份原始 .md 数据；
• hexo 可以将转化后的静态网站发布到多个git站点；

不选用的理由

使用过hexo一段时间，按照教程很方便的便搭建完成自己的静态博客，但是有一点比较麻烦的是需要同时维护原始md文章和静态站点。

期间我把md文章单独同步到一个git项目，这样需要切换目录再能同步。有次因为在整理电脑文件，手动备份了一下整个博客项目；之前也整理过一次，因此有另一个更古老的版本。在替换回去时使用了之前旧版。并且下意识的将所有备份文件删除清空回收站之后发现坏事了，一下回到解放前。 保存md文章的git项目页有段时间没有同步了，新的有几篇文章并没有发布，md项目也没有实时同步，最终只找回来一部分文章。

WordPress

php是最好的编程语言！好吧，我承认我不会php，但是这并不妨碍php的流程和各大云服务平台对php的偏爱。阿里，新浪等云平台都提供虚拟容器直接支持php运行环境，而虚拟容器价格与云服务器价格相比又相当便宜，因此使用WordPress 搭建自己的博客平台是很划算的。阿里云独享云虚拟主机 新浪云。 因为只是想使用一下wp，正好有台腾讯云服务器，于是直接开搞。

服务器提供商都有很好的教程，并且对于WordPress 这种明星应用都有意见部署工具。

安装完成之后,访问服务器ip或者部署的域名即可进入WordPress开始配置，基本上傻瓜式操作就可以了。

特点

• 丰富的插件和主题；
• 完全开源免费，各路教程丰富，产品好用；
• 支持文章内容导入导出；

不选用的理由

• 文章管理只能通过在wp后台，导入导出的文件不支持友好编辑；
• 占用服务器，作为一个程序员还想用服务器做些其他工作，拿来做wp博客就不能随心所欲的用服务器了。

Jeklly

现在的代码管理平台基本都支持pages服务，并且直接都说明支持Jeklly，了解下Jeklly总是好事。

Jeklly 是什么？

跟hexo相同，jeklly 可以将纯文本内容转化为静态网站。github 是直接支持jeklly的，也就是说你不需要将你的文章从md转换为静态网站再push，只需要直接安装指定格式将你的文章push到github，github就会自动生成静态网站。 并且不会影响你整体结构。

流程梳理

可以看出，只需要同步你自己的文章即可更新整个网站。

从零开始 Jeklly

仅安装jekyll 基本框架即可转换静态文件，但是我们通常需要一些额外插件来创建完整博客，比如 paginate 实现分页。

安装jekyll 又需要bundler 这个依赖库来进行转化，因此我们至少需要安装 jekyll，bundler jekyll-paginate 三个应用；

同时，这三个应用时ruby程序，同gem进行管理，我们有需要确保我们有ruby环境；以下介绍在mac上安装的具体步骤

• 1 安装ruby

  brew install ruby

mac本身自带ruby 的运行环境，但自带的运行环境是2.0 版（mac xos 10.12.6） 直接跳过安装 jekyll 时会提示版本太低。

使用过rvm更新ruby版本，版本下载完成之后再编译时出错，有个头文件提示需要 mac xos 10.13之后才有！ 我已经时最新操作xos了好伐！ 最终还是界定用brew 直接安装一下结果顺利搞定了

brew安装成功之后terminal 命令行需要关闭重启一下，这样才能将旧版ruby切换到新版；

• 2 更新/安装 gem

  sudo gem install --system

gem源默认源可能比较慢， 可以通过一下方法切换国内源。

	# 查看源列表
	gem sources -l
	# 将源移除
	gem sources --remove https://rubygems.org/
	# 添加国内源
	gem sources --add https://gems.ruby-china.org/
	# 缓存
	gem sources -u

• 3 安装jekyll三件套

	sudo gem install jekyll
	sudo gem install bundler
	sudo gem install jekyll-paginate

没什么问题，按照如上命令直接安装即可，安装完成之后即可使用了。

• 4 无主题的博客

从jekyll官方网站我们知道使用 jekyll new jekweb 命令可以直接创建一个名为jekweb 的博客项目，我们只需要照葫芦画瓢就可以定制自己简单的博客，为了更清楚理解整个部分，我们先不这么做，一切从零开始。

测试1

手动创建一个 jekweb 文件夹作为整个博客的根项目，并且创建 _post文件夹作为保存文章的文件夹，结构如下：

jekweb
	|_____posts
	| 	|____2017-09-10-git操作.md

命令行cd 进入jekweb 文件夹jekyll build之后会生成 _site文件夹

jekweb
|_____posts
| 	|____2017-09-10-git操作.md
|_____site
| 	|____2017
| 	| 	|____09
| 	| 	| 	|____10
| 	| 	| 	| 	|____git操作.html

执行jekyll server命令，可以在本地启动服务。

测试二

在jekweb文件夹中加入一些文件例如js/css/png等。目录结构如下：

jekweb
|_____posts
| |____2017-09-10-git操作.md
|____assets
| |____jekweb1.png
|____jekyll流程.png

再次build 和 server 结果如下：

jekweb
|_____posts
| |____2017-09-10-git操作.md
|_____site
| |____2017
| | |____09
| | | |____10
| | | | |____git操作.html
| |____assets
| | |____jekweb1.png
| |____jekyll流程.png
|____assets
| |____jekweb1.png
|____jekyll流程.png

测试三

在jekweb文件夹下添加 index.html文件并加入如下内容：

目录结构如下：

jekweb
|_____posts
| |____2017-09-10-git操作.md
|____assets
| |____jekweb1.png
|____index.html
|____jekyll流程.png

运行效果如下：

使用jekyll server 可以跳过 build 过程直接运行起来；

可以看到 index 成功显示了文章列表。

经过如上三个测试我们能得出如下结论 ：

1. _post 文件下md文章会根据日期转换为静态文件；
2. jekweb文件夹下其他内容会直接复制到 _site下，这样就可以管理资源文件；
3. jekyll 定义了一系列的方法类方便你定义自己的博客，例如index.html 的显示列表。

• 5 快速构建美观的jekyll博客

通过第四步无主题的博客， 我们能够基本理解jekyll是怎么运行的了，但是对于我们这种 普通玩家 没必要从零开始构建。让我们试用一下jekyll 主题。

1 默认主题

作为这么被推从博客生成工具， jekyll肯定能够方便快速的生成一个简洁好用的博客，而不是像之前那样丑陋的列表。这个方法就是 new命令。

用命令行进入逆向创建博客的位置执行

// jekweb 是你想要创建的博客所在文件夹名称，成功后所有默认创建的文件都会放入jekweb文件夹
	jekyll new jekweb

等待完成后，可以看到结构如下

jekyll
|____.gitignore
|____404.html
|_____config.yml
|_____posts
| |____2017-10-04-welcome-to-jekyll.markdown
|____about.md
|____Gemfile
|____Gemfile.lock
|____index.md

使用 jekyll server启动该博客，运行效果如下：

通过 config.yml 配置文件可以配置一下自己的信息，这样的效果基本可用了，但是我们总会想要定制或选择属于自己的主题。于是我们下周更多主题试用。

2 Xixia主题

Jekyll 有丰富的主题，可以在 jekyll主题网站 找自己喜欢的。我选用了Xixia 主题。

主题试用直接下周模板，完全替换jekweb下内容或者重新创建文件夹即可使用。

自定义一个头部

按照自己的信息配置完成博客之后，网站头部 是如下内容。

假如我们现在想添加一个Android分类需要怎么做？

1、 进入 _include 文件夹 可以看到有 header.html 文件，jekyll会根据这个文件构建全局的header。

2、 修改<ul class="nav navbar-nav">下内容：

3、 在jekweb目录下添加category_android.html文件，内容直接复制categories.html 并进行如下修改：

4、在_post 下新建一片文章，为期指定 category: Android 用空格分割多个分类

5、 现在再次启动我们的博客就看到头部导航栏出现了Android分类，并且能够正确的显示 Android 分类的文章。

添加umeng网站统计

想要查看博客浏览量，如果自己实现有些不值得，网上有教程直接添加谷歌分析（Google Analytics）但是这毕竟是国外需要翻墙的服务，不如直接使用我大天朝内部可用的umeng。

进入umeng web统计 申请账号并添加网站，进入获取代码可以看到如下代码：

可以看到，要添加统计有两种方法： 1 添加需要引用js； 2 调用显示文字或图片

umeng为我们调用多种调用方式，可以显示图片或者文字；选取你想要的样式，将代码复制到博客中即可；

代码放入的位置

我们知道整个文件通过jekyll 构建，在_include文件夹下的header.html和footer.html会在构建静态文件时加入所有页面，隐藏这也是唯一两个有<body> 和</body>标签的位置。

添加引用的js 我们知道引用一般在 <header>标签中添加，header 标签可以在 header.html 中找到，这样会在构建生成时会添加到全局文章中。

添加js调用

我们知道js会在加载时就执行，如果此时整个文档还没有加载而js又用到文档中内容，会报错。 因此js调用需要在 <body> 标签结束时。

在footer.html 中有</body>结束标签。直接在其之前添加即可。

百度收录

据说Github Pages 把百度的蜘蛛禁了，隐藏百度是收录不到Github Pages上的内容的。解决办法可以搭建自己的服务器。也可以直接使用Coding提供的pages服务。

参考

Mac下使用Jekyll和github搭建个人博客

需要准备的

• 相关于pages服务，如果你不想设置自己的域名，一切都是免费的。
• 如果想使用自己的域名，你需要先购买（coding需要备案），再使用。
• WordPress 需要自己服务器或者网页空间容器。

那些不拘小节的

在该文章中，初略的介绍了hexo和jekyll 静态博客的生成过程，按照网上的步骤我们很容易 不求甚解 的搞定，文中只是简单介绍了一些对 jekyll的思考和验证，还有很多地方没有提到。

1. jekyll 详细文档，你可以在这里找到中文文档；
2. jekyll 如何支持的Markdown/ Textile；
3. 如何将你其他网站的博客迁移到 jekyll？
4. 自己搞定自己的主题？
5. 固定链接。

如上内容是我等 普通用户 用不到的，而且都有完整的文档来介绍，在此不再赘述。

• Other (2)

• Other (3)