【Jekyll】使用GitHub Pages + Jekyll搭建自己的技术博客，Jekyll服务器的搭建

一、前言

前段时间根据大佬-纯洁的微笑的文章-技术人如何搭建自己的技术博客，搭建了自己的个人技术博客http://www.qq764424567.top/，就将搭建的过程，以及Jekyll服务器的搭建和启动，总结一下

PS:话说不会Web的程序员搭建网站感觉蛮难的，又得买域名，又得买服务器，买了个云虚拟主机BCH之后还得自己写网站- -，最后还是写了个静态网站部署上了，后来让朋友帮忙给改成动态的，然后他说要改的太多了，需要从头改。哎。说远了，如今搭建一个个人博客网站很简单了，没错，就是GitHub Pages + Jekyll，使用GitHub的服务器托管

二、参考文章

1、技术人如何搭建自己的技术博客–纯洁的微笑
2、jekyll社区
3、下载 Jekyll，并使用它在本地搭建一个博客
4、Github+Jekyll 搭建个人网站详细教程

三、GitHub Pages

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默认提供的域名 github.io 或者自定义域名来发布站点。Github Pages 支持 自动利用 Jekyll 生成站点，也同样支持纯 HTML 文档，将你的 Jekyll 站点托管在 Github Pages 上是一个不错的选择。

使用 Github Pages 搭建博客有以下几个优点：

• 完全免费，相较其他的同类产品，他能替你省下一笔服务费，节约下的钱可以让你买一些其他的会员服务；
• 无须自己购买云服务进行搭建，只需按步骤一步步操作即可，即使你不懂他的技术细节；
• 支持绑定自己的域名、使用免费的 HTTPS、自己 DIY 网站的主题、使用他人开发好的插件等等；
• 提供流行的网页主题模板
• 当完成搭建后，你只需要专注于文章创作就可以了，其他诸如环境搭建、系统维护、文件存储的事情一概不用操心，都由 GitHub 处理

缺点也是有的：

• 不支持动态内容，博客必须都是静态网页，一般会使用 Jekyll 来构建内容。
• 博客不能被百度索引，因 Github 和百度有过节，所以 Github 就把百度给屏蔽了。
• 仓库空间不大于1G
• 每个月的流量不超过100G
• 每小时更新不超过 10 次
• Github Pages 使用 Jekyll 来构建内容，那么 Jekyll 是什么呢？

综合来看，GitHub Pages 依旧可以说是中小型博客或项目主页的最佳选项之一。

四、Jekyll

Jekyll 是一个简单的博客形态的静态站点生产机器。
它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站
你可以发布在任何你喜爱的服务器上。
Jekyll 也可以运行在 GitHub Page 上

使用 Jekyll 需要使用 Markdown 语法来写你的文章
这个网站下有很多 http://jekyllthemes.org/ 主题，大家可以根据自己的爱好去选择博客主题。

Jekyll的目录
jekyll目录结构主要包含如下目录：

_posts 博客内容
_pages 其他需要生成的网页，如About页
_layouts 网页排版模板
_includes 被模板包含的HTML片段，可在_config.yml中修改位置
assets 辅助资源 css布局 js脚本 图片等
_data 动态数据
_sites 最终生成的静态网页
_config.yml 网站的一些配置信息
index.html 网站的入口

五、个人网站搭建过程

1、首先打开地址https://github.com/764424567/764424567.github.io，点击 Fork 按钮将代码复制一份到自己的仓库。

过上一分钟，你的 github 仓库发现一个 ityouknow.github.io 项目。

2、删除 CNAME 文件

删除项目中的 CNAME 文件，CNAME 是定制域名的时候使用的内容，如果不使用定制域名会存在冲突。

3、设置 GitHub Pages

点击 Settings 按钮打开设置页面，页面往下拉到 GitHub Pages 相关设置，在 Source 下面的复选框中选择 master branch ，然后点击旁边的 Save 按钮保存设置。

4、重命名项目

点击 Settings 按钮打开设置页面，重命名项目名称为：github_username.github.io，github_username 是你的 github 登录用户名。比如我的就是764424567.github.io

5、重命名之后，再次回到 Settings > GitHub Pages 页面

会发现存在这样一个地址： https://github_username.github.io

这个时候，你访问此地址已经可以看到博客的首页，但是点击文章的时链接跳转地址不对，这是因为少配置了一个文件。

6、配置 _config.yml

打开项目目录下的 _config.yml 文件，修改以下配置：

repository: github_username/github_username.github.io
github_url: https://github.com/github_username
url: https://github_username.github.io

这时候在访问地址： https://github_username.github.io，就会发现博客就已经构建完成了。剩下的事情就是去项目的 _posts 目录下删除掉我的文章，然后按照 Jekyll 的语法就写自己的文章就好了。

7、格式丢失问题
这个格式丢失原因是作者引用的格式都是http的，但是网站是https的所以就访问不到：

两种办法：
一种是使用自定义域名，然后取消执行HTTPS

一种就是修改_includes 目录下head.html和 footer.html 两个文件夹，将文件中的 http://改成相对路径/xx/xx/xx.css

8、自定义域名
这个需要做域名解析，比如我在百度云买的域名，打开百度云域名服务BCD

点击解析：

修改域名的地址执行自己的github博客地址，


然后重新打开项目的 Settings > GitHub Pages 页面，Custom domain 下的输入框输入刚才设置的域名：xxx.com，点击保存即可。

重新配置 _config.yml

打开项目目录下的 _config.yml 文件，修改以下配置：

url: http://www.xxx.com

等待一分钟之后，浏览器访问地址：www.xxx.com 即可访问博客。

9、留言功能配置

先看一下配置成功的截图

首先需要新建一个储存库，名字随便起：

然后开启Issues配置

配置Git https://github.com/settings/developers 然后选择 OAuth Apps 点击 New OAuth App

第一个 Application name 是应用名称 随便写

第二个 Homepage URL 是主页地址 写博客地址

第三个 是描述

第四个 是回调地址！！这个最重要！！写你博客的地址就可以了

打卡新建的OAuthApps:

然后打开主题配置文件 _config.yml 找到 gitalk：

repo填你最开始随便新建的存储库
client_id填入你自己的ID
client_secret填入你自己的Secret

第一次评论需要点击“使用Github登录”初始化一下才行

10、文章上传

找到_posts文件夹，然后删除里面的文章，上传自己的文章就行了：

注意只能上传md格式的文件，文件的起名需要是“年-月-日-文件名.md”这种样式，才能被识别出来,例如，以下是有效的POST文件名示例：：

所有博客帖子文件必须有“前页”，通常用于设置布局，或者设置标题等。举个简单的例子：

layout：表示使用的是post布局
category：是该文章生成html文件后存放的目录，可以去_site/jekyll/update下找到对应日期下面的html文档。当然你也可以只设置jekyll单一的目录，甚至是更多级别的目录，用空格分开即可。头信息设置完成后就可以书写正文了。
比如我设置的是Unity3D，下面是Unity3D.html子页面搜索到的文章：

title：显示的标题，文件名可以随便起，因为不显示，但是这个标题会显示出来的
tag：标签

如果每次都输入这些头信息，还要去整理格式，那么一定很烦躁，这种重复性的东西我们就把它自动化，通过Rakefile去解决，它类似shell这样的脚本，可以使用交互模式。以下是我的Rakefile,可以复制后命名为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

ake会启动交互模式，让你依次输入title，subtitle，author，categories，tag等信息，并为你创建好具有头信息的markdown文件。如下一样:

请输入要创建的 post URL：
testurl
请输入 post 标题：
testpost
请输入 post 子标题：
subtitle    
请输入 post 分类，以空格分隔：
jekyll
请输入 post 标签：
技术

我们查看_post目录，发现已经有一篇2016-03-05-testurl.md文章，打开看下

---
layout: post
title: testpost
subtitle: subtitle
author: pizida
date: 2016-03-05 07:31:27 +0800
categories: jekyll
tag: 技术
---

六、Jekyll服务器搭建

1、安装Ruby
下载Ruby：

http://www.ruby-lang.org/en/downloads/

如果是 Window 的话，直接到下面这个链接下载网站推荐的就好，下图中，网站推荐的就是 Ruby+Devkit 2.4.4-2 (x64)

https://rubyinstaller.org/downloads/

安装：

修改默认安装位置：

不勾选那个744.4MB的东西：

安装完成：

Ruby是否安装成功，执行命令ruby -v

2、安装RubyGems

RubyGems 是 Ruby 的包管理器，可以类比为你电脑的下载中心。

去下面这个链接下载 zip 文件到本地，然后解压

https://rubygems.org/pages/download

win 键 +R 键，然后输入 cmd ，接着回车。

进入 cmd 后，cd 到解压目录，输入命令 ruby setup.rb,安装过程可能有点长

3、安装Jekyll
同样的方法进入 cmd，输入以下命令

//更换gem源
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/

//查看gem源
gem sources -l

//更新gem
gem update --system

//安装jekyll
gem install jekyll

4、创建博客站点

打开命令行窗口，执行以下命令：

//创建jekyll工程目录
jekyll new myblog

在这个打开命令行工具，输入以下命令：

jekyll serve

现在可以通过http://127.0.0.1:4000/访问以下了

接下来就分享一下如何在本地调试Jekyll项目

七、Jekyll本地调试

将你在Github Fork的储存库克隆到本地，不会玩Git的可以使用Github的桌面工具GitHub Desktop
https://desktop.github.com/

然后在你的文件里面打开命令行工具，输入jekyll serve：

可能会出现各种错误：
1、比如已经激活了 xxx的 xxx版本，但是你需要xxx的xxx版本：

解决方案：

// 删除指定的gem包，注意此命令将删除所有已安装的版本
$ gem uninstall [gemname]
// 安装指定版本的gem包
$ gem install [gemname] --version=[ver]

2、没有xxx的xxx 版本：

// 从Gem源安装gem包
$ gem install [gemname]

还有各种错误，慢慢摸索吧。。。