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

作者: 啤酒找尿布 | 来源:发表于2016-05-21 17:26 被阅读1695次

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

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

特点

安装设置

安装环境

错误提示

安装jekyll

博客管理

新建博客

发布文章

jekyll目录结构

更换主题

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读