个人博客搭建
本篇文章记录了博客选择和试用的过程,旨在为同样想开始维护博客的同学一些帮助。
写篇博客吧
一直从网络上获取帮助,自己也想将自己遇到的问题和解决方案发布出来,或许能够帮助遇到同样问题的人。
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 成功显示了文章列表。
经过如上三个测试我们能得出如下结论 :
_post
文件下md文章会根据日期转换为静态文件;jekweb
文件夹下其他内容会直接复制到_site
下,这样就可以管理资源文件;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服务。
参考
需要准备的
- 相关于pages服务,如果你不想设置自己的域名,一切都是免费的。
- 如果想使用自己的域名,你需要先购买(coding需要备案),再使用。
- WordPress 需要自己服务器或者网页空间容器。
那些不拘小节的
在该文章中,初略的介绍了hexo和jekyll 静态博客的生成过程,按照网上的步骤我们很容易 不求甚解 的搞定,文中只是简单介绍了一些对 jekyll的思考和验证,还有很多地方没有提到。
如上内容是我等 普通用户 用不到的,而且都有完整的文档来介绍,在此不再赘述。