用GitHub+Jekyll搭建个人博客

部分内容取自Jekll的官方文档

What’s GitHub

我在上篇博文里写了Git的教程，其中有一部分介绍如何使用远程库，而GitHub就是目前全球使用最广泛的Git远程库。

What’s Jekyll

Jekll可以理解为是一个工具。什么工具呢？生成博客的工具。它能将你按一定格式写的内容转变为html的页面，方便你生成你的博客。

“Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown （或者 Textile） 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。” ——来自官方的解释

Jekyll的安装

本教程适用于Linux,Unix或者Mac OS X

首先你需要确保你电脑上有Ruby,RubyGems。博主是用Mac的，所以介绍一下Mac上怎么安装这两个东西，其他两个系统我就爱莫能助了。在Mac上的操作很容易，你只需下载并安装Xcode就可以了。

安装Jekyll仅需一条bash命令:

bash
$ gem install jekyll


如果无法安装，你可以试一下如下命令:

bash
$ sudo gem install jekyll


如果还无法安装，因为情况太多，博主也不全部都了解，这里就介绍一下常见错误，其他情况就请自行百度吧。

• 如收到以下报错，原因即为没安装bundler:

  /Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- bundler (LoadError)
  from /Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
  from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/lib/jekyll/plugin_manager.rb:34:in `require_from_bundler'
  from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/exe/jekyll:9:in `<top (required)>'
  from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `load'
  from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `<main>'
  from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `eval'
  from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `<main>'

  解决方法:执行以下命令安装bundler

  $ gem install bundler

  而且一定要将其更新到最新:

  $ bundler update

  再进行安装:

  $ bundle install

  如果很长时间都没有安装成功的提示的话，你可以尝试修改gem的sourse:（或者翻墙）

  $ gem sources --remove https://rubygems,org/
  $ gem sources -a https://gems.ruby-china.org/

  然后再次执行bundle install即可

Jekyll的基本结构目录

Jekyll也可以理解为一种语言，于是，按照博主的意志，我喜欢在实践之前学习一些基本理论知识。那么就到了我们的基本理论普及环节了～

基于Jekyll的网站的目录结构一般如下一般:

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2016-10-08-welcome-to-jekyll.markdown
├── _sass
|   ├── _base.scss
|   ├── _layout.scss
|   └── _syntax-highlighting.scss
├── about.md
├── css
|   └── main.scss
├── feed.xml
└── index.html

接下来介绍一下它们的功能:

Jekyll环境配置

创建博客:

$ jekyll new <Blog name>

启动本地服务:

$ cd <Blog name>   //进入博客目录
$ jekyll server        //启动本地服务,ctrl+c停止服务

这时打开http://localhost:4000就可以看到你新建的博客了

创建页面

编写相应的html文件即可创建相应页面，html的放置位置有两种选择:

.
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- about.html    # => http://example.com/about.html
|-- index.html    # => http://example.com/
└── contact.html  # => http://example.com/contact.html

或者

.
├── _config.yml
├── _includes/
├── _layouts/
├── _posts/
├── _site/
├── about/
|   └── index.html  # => http://example.com/about/
├── contact/
|   └── index.html  # => http://example.com/contact/
└── index.html      # => http://example.com/

撰写博客

在_posts文件夹下，建立相应的markdown文本文件即可，记得文件的名字一定要是如下格式：year-month-day-name.md.

文本文件的内容如下:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2016-10-16 11:29:08 +0800
categories: jekyll update
---

正文...

将编写完成的博客部署到GitHub远程端

首先，创建一个GitHub仓库，名字为:.github.io

再将本地的博客文件全部上传到这个远程库。在网址里输入.github.io 你想要的博客是不是出现在了你的面前～

感谢惠读