Jekyll是一个简单的免费的Blog生成工具,类似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务,例如Disqus。最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名。
特点
- 基于
ruby
- 使用
Markdown
书写文章 - 无需数据库
- 可以使用
GitHub Pages
发布
安装设置
安装环境
- 操作系统:
windows 7 64位 - rubyinstaller:
Ruby 2.3.0-p0-x64
下载页面:http://rubyinstaller.org/downloads - DevKit:
DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe
在安装好rubyinstaller后可以通过命令ruby -v
检测是否安装成功。
C:\Users\song>ruby -v
ruby 2.3.0p0 (2015-12-25 revision 53290) [x64-mingw32]
在以上完成rubyinstaller和DevKit后,使用命令gem install jekyll
安装jekyll。如果安装成功,会安装在C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems
目录下,并把相应的依赖项一起安装下来。
错误提示
在安装的时候,出现错误提示:
C:\Users\song>gem install jekyll
ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)
SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://rubygems-china.oss-cn-hangzhou.aliyuncs.com/quick/Marshal.4.8/jekyll-3.1.6.gemspec.rz)
从错误提示中,可以看出ruby没有包含SSL证书,所以Https的链接被服务器拒绝。
进入网站https://curl.haxx.se/docs/caextract.html,下载最新的证书cacert.pem
,放到指定文件夹。
然后设置系统的环境变量SSL_CERT_FILE
,并把value指向这个文件。
安装jekyll
关掉命令窗口,记住,一定要关掉,然后再打开,重新输入命令gem install jekyll
C:\Users\song>gem install jekyll
Fetching: liquid-3.0.6.gem (100%)
Successfully installed liquid-3.0.6
Fetching: kramdown-1.11.1.gem (100%)
Successfully installed kramdown-1.11.1
Fetching: mercenary-0.3.6.gem (100%)
Successfully installed mercenary-0.3.6
Fetching: safe_yaml-1.0.4.gem (100%)
Successfully installed safe_yaml-1.0.4
Fetching: colorator-0.1.gem (100%)
Successfully installed colorator-0.1
Fetching: rouge-1.10.1.gem (100%)
Successfully installed rouge-1.10.1
Fetching: sass-3.4.22.gem (100%)
Successfully installed sass-3.4.22
Fetching: jekyll-sass-converter-1.4.0.gem (100%)
Successfully installed jekyll-sass-converter-1.4.0
Fetching: rb-fsevent-0.9.7.gem (100%)
Successfully installed rb-fsevent-0.9.7
Fetching: ffi-1.9.10-x64-mingw32.gem (100%)
Successfully installed ffi-1.9.10-x64-mingw32
Fetching: rb-inotify-0.9.7.gem (100%)
Successfully installed rb-inotify-0.9.7
Fetching: listen-3.0.8.gem (100%)
Successfully installed listen-3.0.8
Fetching: jekyll-watch-1.4.0.gem (100%)
Successfully installed jekyll-watch-1.4.0
Fetching: jekyll-3.1.6.gem (100%)
Successfully installed jekyll-3.1.6
Parsing documentation for liquid-3.0.6
Installing ri documentation for liquid-3.0.6
Parsing documentation for kramdown-1.11.1
Installing ri documentation for kramdown-1.11.1
Parsing documentation for mercenary-0.3.6
Installing ri documentation for mercenary-0.3.6
Parsing documentation for safe_yaml-1.0.4
Installing ri documentation for safe_yaml-1.0.4
Parsing documentation for colorator-0.1
Installing ri documentation for colorator-0.1
Parsing documentation for rouge-1.10.1
Installing ri documentation for rouge-1.10.1
Parsing documentation for sass-3.4.22
Installing ri documentation for sass-3.4.22
Parsing documentation for jekyll-sass-converter-1.4.0
Installing ri documentation for jekyll-sass-converter-1.4.0
Parsing documentation for rb-fsevent-0.9.7
Installing ri documentation for rb-fsevent-0.9.7
Parsing documentation for ffi-1.9.10-x64-mingw32
Installing ri documentation for ffi-1.9.10-x64-mingw32
Parsing documentation for rb-inotify-0.9.7
Installing ri documentation for rb-inotify-0.9.7
Parsing documentation for listen-3.0.8
Installing ri documentation for listen-3.0.8
Parsing documentation for jekyll-watch-1.4.0
Installing ri documentation for jekyll-watch-1.4.0
Parsing documentation for jekyll-3.1.6
Installing ri documentation for jekyll-3.1.6
Done installing documentation for liquid, kramdown, mercenary, safe_yaml, colora
tor, rouge, sass, jekyll-sass-converter, rb-fsevent, ffi, rb-inotify, listen, je
kyll-watch, jekyll after 11 seconds
14 gems installed
如果需要安装指定版本,可以使用
C:\Users\song>gem install jekyll -v 3.1.6
Successfully installed jekyll-3.1.6
Parsing documentation for jekyll-3.1.6
Done installing documentation for jekyll after 1 seconds
1 gem installed
检测是否安装成功
C:\Users\song>jekyll -v
jekyll 3.1.6
如果需要卸载
gem uninstall jekyll
博客管理
新建博客
在命令窗口输入jekyll new blogname
,会在当前目录下创建blogname站点的文件目录。
jekyll new blogname
然后进入到博客文件夹目录下,即blogname文件夹目录下,执行jekyll serve --watch
,通过http://localhost:4000
就可以看到默认的页面。
cd blogname
jekyll serve --watch
发布文章
jekyll的所有文章都放在*_posts*
目录下。只需要在此目录内新建一个文件,后缀名为markdown即可。新建文件名为:first-post.markdown,内容如下
---
layout: post
title: "First post"
date: 2016-5-21 03:11:56
categories: article
---
>> Here is my first jekyll post
+ Just for test
* Just for Test
I'm trying to write some code
文件上的日期跟实际页面显示的日期没关系,页面的日期由内容中的date来决定。
进入_post目录,撰写的markdown语法的博文都放在这里。默认会有一篇测试文章:2016-05-21-welcome-to-jekyll.markdown
拷贝测试。虽然文件名改为test,但是文件中的tittle没有改名称,所以在浏览器中两个文件的标题会相同。
2016-05-21-welcome-to-jekyll.markdown
2016-05-21-test.markdown
然后使用命令Jekyll build
生成页面。
C:\Users\song\myblog>jekyll build
Configuration file: C:/Users/song/myblog/_config.yml
Source: C:/Users/song/myblog
Destination: C:/Users/song/myblog/_site
Incremental build: disabled. Enable with --incrementa
Generating...
done in 0.214 seconds.
Auto-regeneration: disabled. Use --watch to enable.
默认情况下,服务会以前台的方式挂起,如果希望用后台进程运行服务,我们可以使用 --detach参数,缩写参数为-B(应该是Background的首字母)
jekyll serve build --detach
//或者
jekyll serve build -B
打开_post目录下的文件,文件开头内容如下
---
layout: post //表示使用的是post布局
title: "Welcome to Jekyll!" //文章标题
date: 2016-05-21 03:00:56 +0800 //自动生成的日期
categories: jekyll update //该文章生成html文件后存放的目录,可以去_site/jekyll/update下找到对应日期下面的html文档
---
如果想自动化格式处理,可以通过类似shell脚本的Rakefile解决,可以使用交互模式。将Rakefile放在站点根目录直接使用,或者将下面的内容修改成合适的文件。
task :default => :new
require 'fileutils'
desc "创建新 post"
task :new do
puts "请输入要创建的 post URL:"
@url = STDIN.gets.chomp
puts "请输入 post 标题:"
@name = STDIN.gets.chomp
puts "请输入 post 子标题:"
@subtitle = STDIN.gets.chomp
puts "请输入 post 分类,以空格分隔:"
@categories = STDIN.gets.chomp
puts "请输入 post 标签:"
@tag = STDIN.gets.chomp
@slug = "#{@url}"
@slug = @slug.downcase.strip.gsub(' ', '-')
@date = Time.now.strftime("%F")
@post_name = "_posts/#{@date}-#{@slug}.md"
if File.exist?(@post_name)
abort("文件名已经存在!创建失败")
end
FileUtils.touch(@post_name)
open(@post_name, 'a') do |file|
file.puts "---"
file.puts "layout: post"
file.puts "title: #{@name}"
file.puts "subtitle: #{@subtitle}"
file.puts "author: pizida"
file.puts "date: #{Time.now}"
file.puts "categories: #{@categories}"
file.puts "tag: #{@tag}"
file.puts "---"
end
exec "vi #{@post_name}"
end
使用Rake输入命令
rake new
rake会启动交互模式,让依次输入title,subtitle,author,categories,tag等信息,并创建好具有头信息的markdown文件。
请输入要创建的 post URL:
testurl
请输入 post 标题:
testpost
请输入 post 子标题:
subtitle
请输入 post 分类,以空格分隔:
jekyll
请输入 post 标签:
技术
jekyll目录结构
生成的目录结构如下:
- 文件夹_layouts:用于存放模板的文件夹,里面有两个模板,default.html和post.html
- 文件夹_posts:用于存放博客文章的文件夹
- 文件夹css:存放博客所用css的文件夹
- _site:jekyll自动生成的目录,为静态的页面
- _coinfig.yml:jekyll的配置文件,里面可以定义相当多的配置参数,具体配置参数可以参照其官网
根据实际需要,可能还需要创建如下文件或文件夹:
- _includes : 用于存放一些固定的HTML代码段,文件为.html格式,可以在模板中通过liquid标签引入,常用来在各个模板中复用如 导航条、标签栏、侧边栏 之类的在每个页面上都一样不变的内容,需要注意的是,这个代码段也可以是未被编译的,也就是说也可以使用liquid标签放在这些代码段中
- image和js等自定义文件夹:用来存放一些需要的资源文件,如图片或者javascript文件,可以任意命名
- CNAME文件:用来在github上做域名绑定的,将在后面介绍
- favicon.ico:网站的小图标
更换主题
jekyll不想hexo有专门的主题目录,下载了主题就相当于jekyll new my-awesome-site
可能出现提示分页错误的问题
Deprecation: You appear to have pagination turned on, but you haven't included the
jekyll-paginate
gemguration file.
解决:只需要在_config.yml里面加一句: gems: [jekyll-paginate]
permalink: pretty
gems: [jekyll-paginate]
paginate: 10