上一节我们讲到如何选型以及Github Page的初步搭建
今天我们要做的是用jekyll框架来做一个个人博客的模板
关于jekyll
在开始之前,有必要详细总结一下这个jekyll是什么。上面提到了它实际上是一个模板转化引擎。它同时也是GitHub上的一个开源项目:Jekyll
jekyll本身基于Ruby,它实际上也可以看成是一种模板引擎liquid的扩展。jekyll对liquid的主要扩展在于两点:
- 内建专用于博客网站的对象,可以在模板中引用这些对象:page、site等
- 对liquid进行了扩展,方便构建博客网站
类似其他的模板引擎一样,标记是模板引擎解析的关键,liquid设计了如下两种标记:
{{ }}
:此标记表征的是将其中的变量转化成文本{% %}
:此标记用于包含控制流关键字,比如:{% if %}
、{% for x in xx %}
bash
显而易见的是,有了这种标记的支持,再加上jekyll内建的对象,构建网站就方便不少了。
可能有朋友会更其他的服务器端脚本语言比较,比如asp、razor、jsp、velocity…,但是一定要记得的是,jekyll对模板的解析仅仅只有一次,它的目标就是将模板一次性的转化成静态网站,而不是上述的动态网站脚本语言。
维护流程
- 利用本地编辑器编写博客后维护网站其他页面
- 使用Jekyll-Bootstrap在本地测试网站功能
- 使用Git客户端工具上传模板和页面文件
- Git Server会用jekyll转化你的模板,并生成静态页面
好,简单介绍一下jekyll,然后我们开始搭建jekyll环境
jekyll本身是基于Ruby的,第一步肯定是配置Ruby环境
Ruby环境配置
jekyll本身基于Ruby开发,因此,想要在本地构建一个测试环境需要具有Ruby的开发和运行环境。
我是用的是Mac,Mac安装Ruby很简单,可以通过Homebrew直接安装
安装Homebrew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装使用可见:Mac之安装并使用Homebrew
安装Ruby
brew install ruby
查看Ruby版本
ruby -v
这里可以看见ruby安装版本是2.4.2_1,但是ruby -v
显示的还是2.0(Mac自带的ruby版本)
如何解决这个问题呢?
这个则需要安装rvm
首先查看你是否安装过rvm
rvm -v
如果没有则是需要安装。
安装rvm
curl -L get.rvm.io | bash -s stable
再输入
source ~/.rvm/scripts/rvm
再次查看版本
解决ruby版本不同步的方法
__rvm_rm_rf /Users/LL.F/.rvm/rubies/ruby-2.4.2_1
再次查看ruby版本
具体详情可见:终端更新Ruby步骤和遇见奇葩问题的解决办法
总之,经过漫长的奋斗,终于把Ruby在Mac上配置好了
第二步:安装Rubygems
Rubygems
Rubygems是类似Radhat的RPM、centOS的Yum、Ubuntu的apt-get的应用程序打包部署解决方案。Rubygems本身基于Ruby开发,在Ruby命令行中执行。我们需要它主要是因为jekyll的执行需要依赖很多Ruby应用程序,如果一个个手动安装比较繁琐。jekyll作为一个Ruby的应用,也实现了Rubygems打包标准。只要通过简单的命令就可以自动下载其依赖。
解压后,用终端进入到解压后的目录,执行命令即可:
$ruby setup.rb
注意:存在权限不足的情况下用sudo
解决
就像yum仓库一样,仓库本身有很多,如果希望加快应用程序的下载速度,特别绕过“天朝”的网络管理制度,可以选择国内的仓库镜像,taobao有一个:https://ruby.taobao.org/。配置方法这个链接里面很完全。
安装jekyll
有了上面的基础,安装jekyll就十分轻松了,执行下面gem命令即可全自动搞定:
$gem install jekyll
安装Bundle
直接使用下面命令即可:
$ gem install bundle
jekyll依赖的组件会自动下载安装
Gemfile和Bundle安装
在根目录下创建一个叫Gemfile的文件,注意没有后缀,输入
source 'https://ruby.taobao.org/'
gem 'github-pages'
保存后,在命令行中执行
$ bundle install
命令会根据当前目录下的Gemfile,安装所需要的所有软件。这一步所安装的东西,可以说跟github本身的环境是完全一致的,所以可以确保本地如果没有错误,上传后也不会有错误。而且可以在将来使用下面命令,随时更新环境,十分方便
$ bundle update
使用下面命令,启动转化和本地服务:
$ bundle exec jekyll serve
注意:
实际使用中存在很多问题
1、bundle install
后报错:
Could not find gem ‘github-pages’ in any of the gem sources listed in your Gemfile.
解决方案:
安装github-pages
$ cd
$ sudo gem install github-pages
(Ps:gem update github-pages
命令可以用来更新 Jekyll,以免 Github 服务器更新导致网站本地和线上表现不同)
2、bundle install时报错
Could not fetch specs from http://ruby.taobao.org/
解决方案:
修改Gemfile下的http://ruby.taobao.org/
为:
https://ruby.taobao.org/
3、bundle exec jekyll serve报错
Could not find liquid-3.0.6 in any of the sources
解决方案:
先将bundle更新到最新版本
gem install bundler --pre
然后在根目录再次
bundle install
解决!
使用 Jekyll 模板个性化博客
博客基于jekyll,而新手往往摸不着头脑,幸好有一些现成的模板可以直接使用:
以White Paper这个模板为例,可以直接下载压缩包,也可以使用如下命令clone到本地:
$ git clone https://github.com/vinitkumar/white-paper.git
把克隆下来的文件拷贝到你自己的目录就行了,这样你就有一个现成的网站结构了:
有了现成的网站结构,还是需要bundle install
将相关内容更新下来,然后push给master分支(gh-pages分支的push见一步步在GitHub上创建博客主页 系列文章)
然后打开https://yxys01.github.io/ 便可访问到我的个人博客主页