Windows环境下Jekyll+Github搭建个人博客

萌新来讲讲如何使用 Jekyll 搭建个人博客，从安装到配置！炒鸡详细！。原文地址https://zhangmingemma.github....

介绍

jekyll是一个静态站点生成器，会根据网页源码生成静态文件。

• 简单。无需数据库，评论功能，不需要不断更新版本，只用关注你的博客内容
• 静态。只用Markdown(或者Textile)、Liquid、HTML&CSS就可以构建可部署的静态网站
• 博客形态。自定义地址、分类页面、分类博客内容以及自定义的布局设计
• 使用GitHub Pages可以运行jekyll，很简单就可以完全免费的在GitHub上发布网站

环境配置

1. 注册Github账号，并新建仓库教程第一部分内容,照做即可
2. 下载安装Git,git for Windows,安装教程
3. 安装Ruby & Devkit, Window 系统下，我们可以使用 RubyInstaller 来安装 Ruby 环境，下载地址,安装教程
4. 配置jekyll环境(前提是你的电脑有Python、easy_install)

安装 jekyll

$ gem install jekyll     

创建博客

$ jekyll new myBlog    

进入博客目录

$ cd myBlog  

启动本地服务

$ jekyll serve

在浏览器里输入： http://localhost:4000，就可以看到你的博客效果了。

Error: Auto-regeneration: enabled for ‘c:/Devkit/MyBlog‘
Configuration file: c:/Devkit/MyBlog/_config.yml
jekyll 3.4.1 | Error:  Permission denied - bind(2) for 127.0.0.1:4000

*解决方法：先关掉后台开启的Apache、MySQL服务，重新启动jekyll serve，继续错误，则在_config.yml文件最后一行加入port : 4001

目录结构

　
Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是： 你用你最喜欢的标记语言来写文章，可以是 Markdown，也可以是 Textile,或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置URL路径, 你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。

一个基本的 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

这些目录结构以及具体的作用可以参考 官网文档

进入 _config.yml 里面，修改成你想看到的信息，重新 jekyll server ，刷新浏览器就可以看到你刚刚修改的信息了。

到此，博客初步搭建算是完成了，

博客部署到远端

在本地新建一个文件夹blog，在文件夹内打开git bash，运行命令

$ git clone https://github.com/(github的用户名)/(github的仓库名).git

可以看到文件夹内多了文件夹(github的仓库名).git(内含隐藏的.git文件夹和READme文件)

将它们全部移动到blog目录下，并将你本地创建的博客文件下的所有内容_config.yml，_layouts,_posts等，删掉(github的仓库名).git文件夹

运行命令

git add .
git commit -a -m "first commit"
git remote add origin https://github.com/(github用户名)/(github仓库名).git
git push -u origin master

如果是绑定到一级域名：

1. 首先在项目根目录下创建一个叫CNAME文件，里面写上自己的以及一级域名（如这个博客就是skyinlayer.com）
2. 在DNS中为自己的域名增加一条A记录，指向207.97.227.245
3. 将项目提交到github上，等一会儿（不会超过1小时）
4. baseurl应该为"/"
5. 访问自己的域名看看结果吧

如果是绑定到二级域名，需要额外在DNS中增加一条CNAME，指向(github用户名).github.io，然后再CNAME文件中修改为自己的二级域名即可

编写文章

所有的文章都是 _posts 目录下面，文章格式为 mardown 格式，文章文件名可以是 .mardown 或者 .md。

编写一篇新文章很简单，你可以直接从 _posts/ 目录下复制一份出来 2016-10-16-welcome-to-jekyll副本.markdown ，修改名字为 2016-10-16-article1.markdown ，注意：文章名的格式前面必须为 2016-10-16- ，日期可以修改，但必须为 年-月-日- 格式，后面的 article1 是整个文章的连接 URL，如果文章名为中文，那么文章的连接URL就会变成这样的：http://baixin.io/2015/08/%E6%... ， 所以建议文章名最好是英文的或者阿拉伯数字。 双击 2016-10-16-article1.markdown 打开

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

正文...

title: 显示的文章名， 如：title: 我的第一篇文章
date: 显示的文章发布日期，如：date: 2016-10-16
categories: tag标签的分类，如：categories: 随笔

注意：文章头部格式必须为上面的，.... 就是文章的正文内容。

我写文章使用的是 Sublime Text3 编辑器，Markdown简单语法

使用博客模板

虽然博客部署完成了，你会发现博客太简单不是你想要的，这里有很多漂亮的模板。

选择你喜欢的模板下载解压到目录下， 将_config.yml、_posts修改成自己的信息与文章，使用命令部署本地服务

$ jekyll server   

可能会出现一些错误：

/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 `‘
    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 `
‘
    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 `
‘

原因： 没有安装 bundler ，执行安装 bundler 命令

$ gem install bundler

提示：

Fetching: bundler-1.13.5.gem (100%)
Successfully installed bundler-1.13.5
Parsing documentation for bundler-1.13.5
Installing ri documentation for bundler-1.13.5
Done installing documentation for bundler after 5 seconds
1 gem installed

再次执行 $ jekyll server ，提示

Could not find proper version of jekyll (3.1.1) in any of the sources
Run `bundle install` to install missing gems.

跟着提示运行命令

$ bundle install

提示

Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
。。。
Installing jekyll-watch 1.3.1
Installing jekyll 3.1.1
Bundle complete! 3 Gemfile dependencies, 17 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.

bundler安装完成，后再次启动本地服务

$ jekyll server

继续报错

Configuration file: /Users/tendcloud-Caroline/Desktop/XXXXXXXXXXXXX/_config.yml
  Dependency Error: Yikes! It looks like you don‘t have jekyll-sitemap or one of its dependencies installed. In order to use Jekyll as currently configured, you‘ll need to install this gem. The full error message from Ruby is: ‘cannot load such file -- jekyll-sitemap‘ If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/! 
jekyll 3.1.1 | Error:  jekyll-sitemap

表示没有安装gem 的jekyll-sitemap

gem install jekyll-sitemap

并将Gemfile中加入

gem ‘jekyll-sitemap‘, ‘~> 1.0‘

再次启动本地服务

$ jekyll server

提示

Configuration file: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/XXXXXXXXXXXXX/_config.yml
            Source: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/XXXXXXXXXXXXX
       Destination: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/XXXXXXXXXXXXX/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.901 seconds.
 Auto-regeneration: enabled for ‘/Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/XXXXXXXXXXXXX‘
Configuration file: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/XXXXXXXXXXXXX/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

表示本地服务部署成功。

在浏览器输入 127.0.0.1:4000 ， 就可以看到博客效果了。