安装Jekyll

Jekyll用Ruby写的，jekyll是把原文上传github，可以直接生成博客，也可以用在线编辑器处理。

1. 搭建ruby环境（ruby版本最好大于2.2.2），详见：Ruby开发环境搭建
2. 安装kramdown（Markdown文档处理器）
   gem install kramdown
3. 安装rouge（语法高亮）
   gem install rouge

4. 动态处理插件exec
   gem install execjs
5. 安装ruby工具集管理工具Bundler
   gem install bundler
6. 安装rails WEB框架（可选，不安装运行jekyll时可能报错）
   gem install rails
   7.安装Jekyll（“Mac的安装见错误解决”）
   gem install jekyll

之后需要添加功能，要安装其他gems插件时，进入该项目目录再安装，不然不会被包含，就不会生效。
错误解决：
Mac：

mkdir -p /usr/local/Cellar/ruby/bin
sudo gem install jekyll -n /usr/local/Cellar/ruby/bin

关闭终端窗口再打开，输入jekyll看这个指令是否存在，如果提示不存在，那就再修改
/Users/用户名/.bash_profile文件，把Jekyll的路径写进去。
export PATH=/usr/local/Cellar/ruby/bin:$PATH再重新打开终端，这时候Jekyll指令应该ok了。
注：whereis gem可以看到路径是**/usr/bin/gem**,当前的gem路径是系统默认的gem版本，这个版本用了是会报错的，用这个版本安装Jekyll默认安装Jekyll到相同目录下，所以同样会出现permission denied的报错信息。有人说可以用symlink，但即使用了sudo也会是permission denied的报错。所以直接安装Jekyll并同时指定安装路径了。

Windows：
如果安装jekyll或bundle报错，则需要安装编译工具。

打开：http://rubyinstaller.org/downloads/ 下载对应的DevKit-mingw，解压到没有中文、空格、特殊符号的文件夹，

1. cmd进入该目录
2. 命令行下运行ruby dk.rb init
3. 编辑目录下的config.yml文件 最尾加上- C:\Ruby23-x64 #即ruby安装目录
   
4. 运行ruby dk.rb review #（可选，一般不用运行）
5. 运行ruby dk.rb install
6. 如果上述步骤只有info输出而没有warning输出，则应该安装成功了
7. 测试gem install json --platform=ruby如果安装成功，则表示devkit安装成功。
8. 如果失败，可以重装ruby和ruby-devkit，或者选择2.0.0以上版本的ruby版本，或https://rubygems.org/pages/download 按提示更新gem版本。

ok,安装完成啦！

---

建立站点

jekyll new new-site   #创建新站点
cd new-site           #进入站点目录下一步才能开启服务
jekyll serve --watch  #加--watch参数修改后会自动刷新页面，而不用手动重启jekyll
jekyll build          #写了新文章后，编译文档

然后访问localhost:4000就能看到blog的页面了。

注：运行报Could not find a JavaScript runtime.错误
答：在gemfile中加入

gem 'execjs'  
gem 'therubyracer'  

然后安装gem install therubyracer 再运行就好了。

一个基本的 Jekyll 网站的目录结构一般是像这样的：

├── _config.yml  #配置文件 
├── _drafts      #草稿目录
| ├── begin-with-the-crazy-ideas.textile
| └── on-simplicity-in-technology.markdown
├── _includes    #你可以加载这些包含部分到你的布局或者文章中以方便重用。可以用这个标签 {\% include file.ext \%} 来把文件 _includes/file.ext 包含进来。
| ├── footer.html  #HTML尾
| └── header.html  #HTML头
├── _layouts
| ├── default.html #默认模板
| └── post.html    #文章模板
├── _posts         #文章目录
| ├── XXXX.md
| └── XXXXXX.md
├── _data
| └── members.yml
├── _site         #生成的站点文件存放目录
└── index.html    #入口index文件
└──Other Files/Folders   #其他一些未被提及的目录和文件如 css 还有 images 文件夹， favicon.ico 等文件都将被完全拷贝到生成的 site 中。

安装完成后，如果你要配置你自己的站点信息，那么你就要修改**_config.yml**这个文件。里面可以配置站点名称，描述，多说，统计，友链等等。
参考：
http://jekyll.com.cn/ 中文官网
http://pwnny.cn/original/2016/06/26/MakeBlog.html

写文章在_posts里，文件名按YEAR-MONTH-DAY-title.md创建文件，
在文章头部添加YAML头信息（YAML front- matter）：

---
layout: post
title:  "第一篇博客"
date:   2016/10/26 13:03:42
categories: 文章阅读
tag: 第一篇博客,jekyll搭建博客
---

这里开始用Markdown的语法编写文章。

每次都自己写yml文件头太麻烦，配置中会说到用Rakefile脚本自动生成文件。**注意：yml文件头不要有中文，.md文件名也不要有中文，**否则网页会显示404错误（原因未知）

---

配置优化、美化站点

主题部分

可以在http://jekyllthemes.org/这个上面找找，Hux这个主题还是不错的，喜欢的直接下载，重新修改里面配置就行了。可以fork或下载回来，整个替换，把文章拷过去就行。一个很好的Hux模板：https://github.com/huxpro/huxpro.github.io/

配置文件设置

我用到的参数：

#不要在配置文件中使用 tab 制表符,用空格代替。
#配置请参考：http://jekyllcn.com/docs/configuration/#front-matter-defaults


# Site settings
title: LeoLan的博客
author: Leo Lan
email: 842632422@qq.com
description: > # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.

#自定义站点标题
#webrick:
#  headers:
#    My-Header: My-Value
#    My-Other-Header: My-Other-Value


# Site URL NOTE: if your site is base on subdir /blog you should change base to "/blog"
domain: "http://myleolan.github.io" #你的github网址  the domain URL for your site
base: ""  # the relative path that different with domain so you can test locally

# Source URL NOTE: end with / cause it's [URL + FILE]
w3c_url: "/w3c/"  # the base url of css js and images
postImage_url: "/w3c/images/" # the base url of post images
postfile: "/db/Postfile" # the Database
sitefile: "/db/Sitefile" # the Database

# 3rd URL
duoshuo_short_name: "leolan" # 注册多说是填写的网址前缀 the user of user.domain.com 
duoshuo_user_uid: "a61c3f290749b621688a3f42c7e8e31c" #多说的uid   the admin user uid  
duoshuo_user_name: "leolan" #多说的用户名 the admin user names   
duoshuo_max_depth: "2"  # the max_depth setting in duoshuo comments
duoshuo_url: "/w3c/duoshuo/embed.min.js" # the local duoshuo comment plugin, you can change it to remote "http://static.duoshuo.com/"
jquery_url: "http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js" # use cdn
baiduTemplate_url: "/w3c/js/baiduTemplate.js" #use local
google_analytics_id: "UA-86334360-1"  #Google分析

# Build Settings
excerpt_separator: "\n\n" # you can specify your own separator here, default is "\n\n" String
permalink: /:year/:month/:day/:title.html   #生成html文件的命名方式
highlighter: rouge   #代码高亮
markdown: kramdown   #markdown文档处理器
kramdown:
  input: GFM
  hard_wrap: true # a newline in markdown text would be changed to <br>

#插件（需要包含的插件）
gems:
  - jemoji

lsi: BOOL   #建立文件索引

####---------------------------------------------------------------------
#以下为github的默认设置

# Following is got in Github Help With Configuring Jekyll
# Github Page Default Settings which you can override:

# kramdown:
#   input: GFM
#   hard_wrap: false
# gems:
#   - jekyll-coffeescript
#   - jekyll-paginate

# Github Page override the following settings which you cannot change:
# lsi: false
# safe: true    #安全方式，禁用所有插件
# source: [your repo's top level directory]
# incremental: false
# highlighter: rouge
# gist:
#  noscript: false
# kramdown:
#  math_engine: mathjax

自动生成文件模板

前面说到的带yml信息的文件头

---
layout: post
title:  "第一篇博客"
date:   2016/10/26 13:03:42
categories: 文章阅读
tag: 第一篇博客,jekyll搭建博客
---

文件头可以自动生成，而不用每次都手工码字，在网站根目录下创建Rakefile文件（ruby的一中脚本配置文件）
里面填入代码：

task :default => :new

require 'fileutils'

desc "创建新 post"
task :new do
  puts "请输入要创建的.md文件名："
  @url = STDIN.gets.chomp
  puts "请输入 文章 标题："
  @name = STDIN.gets.chomp
  puts "请输入 文章 子标题："
  @subtitle = STDIN.gets.chomp
  puts "请输入 文章 分类，以空格分隔："
  @categories = STDIN.gets.chomp
  puts "请输入 博客分类 标签，以空格分隔："
  @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: Leo Lan"
      file.puts "date: #{Time.now}"
      file.puts "categories: #{@categories}"
      file.puts "tag: #{@tag}"
      file.puts "published: true"
      file.puts "---"
  end
  exec "vim #{@post_name}"
end

layout表示使用的是post布局，title是文章标题，
date是自动生成的日期，
subtitle是副标题
categories是该文章生成html文件后存放的目录（分类），可以去_site/jekyll/update下找到对应日期下面的html文档。当然你也可以只设置jekyll单一的目录，甚至是更多级别的目录，用空格分开即可。tag是文章的标签。
published表示是否发布文章
下次在命令行输入rake new按提示一步一步就能创建一个很好的文件啦，剩下的只需要专心写作就好了。

参考：http://www.liubaicai.net/articles/733/

---

用Github Pages生成个人博客

Github Pages生成网站的两种方式的基本原理

法一：

在Github上有一个账号，名为 username （任意），有一个项目，名为 username.github.io （固定格式，username与账号名一致），项目分支名为 master （默认固定），这个分支有类似下面的目录结构：

当你访问 http://username.github.io/ 时，Github会使用Jekyll解析用户 username 名下的 username.github.io 项目中，分支为 master 的源代码，为你构建一个静态网站，并将生成的 index.html 展示给你。

法二：

在Github上有一个账号，名为 username （任意），有一个项目，名为 blog （任意），项目分支名为 **gh-pages **（固定），这个分支也有上面那种结构。
那么当你访问 http://username.github.io/blog 时，Github会去解析 username 用户下，project 项目的 gh-pages 分支下的源代码，为你构建网站。

所以要搭建自己的博客你有两种选择：

• 建立名为 username.github.io 的项目，在 master 分支下存放网站源代码
• 建立名为 blog 的项目，在 gh-pages 分支下存放网站源代码
  考虑到第一种项目名复杂不方便同步等，这里用第二种方法，方便管理。
  新建一个仓库，名称随意，ReadMe.md文件随意，不懂的查看教程第4节“创建远程仓库”：git教程

翻到下面，选择Launch automatic page generator

再接着编译一下内容，点Continue to layouts
选好模板，点击Publish page，就生成了Github Pages，并且，分支自动设置为了gh-pages。

打开网站看看效果：https://myleolan.github.io/blog/
以后本地写好的文章，jekyll bundle之后就可以推送到gh-pages分支即可。推送博客到github推荐用命令行，Windows版的客户端不熟悉容易误操作。 博客源码和发布的博客网页在同一个仓库中，可以共同存放。（Hexo是生成的网站和博客原文分开存放的）

Github Pages环境本地化

上面搭建的只是Jekyll的本地环境，当push到Github Pages后环境会有所变化，为了本地看到的效果和托管在Github Pages看到的效果一致，我们最好搭建本地的Github Pages环境。
ruby要2.0.0以上版本，如果ruby --version查看版本低于2.0.0，那么需要升级ruby。
安装ruby工具集管理工具Bundler （前面安装过了就不用安装了）

gem install bundler
bundler -v

进入jekyll创建的网站目录

git init                      #把当前目录加入版本库中
git checkout -b gh-pages      #创建gh-pages分支，用于推送到github上的gh-pages分支上。

创建Gemfile文件 如果本生有Gemfile和Gemfile.lock那就删除掉，内容如下：

source 'https://ruby.taobao.org'  #(淘宝源，国内比较快)
gem 'github-pages', group: :jekyll_plugins
或
source 'https://rubygems.org'   #(官方源)
gem 'github-pages', group: :jekyll_plugins

执行下面的命令安装Github Pages的工具集**（在网站根目录，就是Gemfile文件的路径）**
bundle install
运行起来（一开始创建了网站就可以直接跑起来啦，如果没有创建网站，创建或fork别人的。）
bundle exec jekyll serve

如果出现bundle exec jekyll serve能启动，而jekyll serve不能启动，则删除Gemfile和Gemfile.lock重新运行jekyll serve即可。
更多Github Pages本地化环境搭建，可参考官方文档:https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/

注意：如果是是下载了别人的模板进行修改，只把文件拷到自己项目中进行添加就可以了，不要全选把**.git**文件夹也拷过了，别人的分支和自己的不同时会出现各种问题。

调试好各种东西后就可以推送到Github了。

1. 用markdown写文章，并按规定名称格式保存在_posts里。
2. 用jekyll serve –watch或bundle exec jekyll server启动服务器，在浏览器里查看。(指定端口在**_config.yml**文件中增加port: xxxx)
3. 用git客户端推送到远程仓库里。
4. 通过域名访问。

---

绑定域名

原理是域名提供商的域名指向github或coding的域名服务器，在项目内建立CNAME的域名指向文件后，会自动去自己的域名服务器github或coding上查找该域名，找到啦就绑定在一起，找不到就绑定不了；如果绑定不了，那么域名指向的github和coding（Pages绑定域名时）服务器会报404错误；域名指向的coding（Pages页面没有绑定域名时）域名服务器会把index当做普通超文本解析，不会加载js、cs等资源。

• 1· 在你的项目下新建一个CNAME文件，注意没有后缀名。在里面添加你的域名，一行一个，如我的就是** www.leolan.top和 leolan.top**（github会自动绑定第一个，第二个也要绑定，不绑定访问报404错误），然后推送CNAME文件到远程仓库。（Github不建议在pages页上绑定设置，页面上是只能绑定一个的）；Coding的话要在CNAME文件里绑定两个，在Pages页面也绑定两个。
• 2· 到域名服务商那里增加你的CNAME记录。添加两条记录，@和www的主机记录，记录类型为CNAME，记录值为 username.github.io.，重要的是 io 后面还有一个原点（看官方帮助文档Coding的就不用加点），切记。
  
  过几分钟，刷新网页，就能直接用域名访问了，因为是在项目内建的CNAME文件，所以域名直接指向此项目文件夹，其他项目可以用其他域名设定。

---