用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: posttitle:  "Welcome to Jekyll!"date:   2016-10-16 11:29:08 +0800categories: jekyll update---正文...

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

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

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

感谢惠读