StarkerSong Get Busy Living

配置jekyll安装环境与部署博客网站

2016-05-13

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,放到指定文件夹。

cacert.pem

然后设置系统的环境变量SSL_CERT_FILE,并把value指向这个文件。

SSL_CERT_FILE

安装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


Comments