个人博客搭建

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

写篇博客吧

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

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

搭建自己的博客

hexo

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

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

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

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

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

流程梳理

20171003150703262676299.png

特点

  • 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就会自动生成静态网站。 并且不会影响你整体结构。

流程梳理

20171004150705095677328.png

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

从零开始 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命令,可以在本地启动服务。

2017100415070555239132.png

测试二

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

20171004150705607214256.png

测试三

jekweb文件夹下添加 index.html文件并加入如下内容: 20171004150713211096588.png

目录结构如下:

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

运行效果如下:

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

201710041507058368558.png

可以看到 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启动该博客,运行效果如下:

20171004150710209784922.png

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

2 Xixia主题

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

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

自定义一个头部

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

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

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

2、 修改<ul class="nav navbar-nav">下内容: 20171004150710605096901.png

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

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

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

20171004150710686611379.png

添加umeng网站统计

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

进入umeng web统计 申请账号并添加网站,进入获取代码可以看到如下代码: 2017100415071086376858.png

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

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

代码放入的位置

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

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

添加js调用

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

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

20171004150711183263472.png

百度收录

据说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. 固定链接。

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