Jekyll + Github page 搭建自己免费的博客网站

目前这是一篇持续更新的博客

我的作品：菇星独行 | Blog

---

前言

一直都想有自己的域名，搞自己的博客，直到在github上发现了hux的模版，才完成了这个任务，对于不懂前端的我，入门门槛并不低。不过还好，我是一个喜欢折腾的人。

准备

首先就是要配置最新的
ruby
gem
jekyll

我是mac用户，强烈推荐大家在mac中安装homebrew
在神器homebrew的帮助下，是、以上这些都是几条终端语句的问题。
install...install.....install....

关于初次尝试，我推荐阅读这篇文章—Jekyll本地搭建开发环境以及Github部署流程

先来介绍下jekyll

基本的Jekyll结构如下：

|-- _config.yml|-- _includes|-- _layouts|   |-- default.html|   `-- post.html|-- _posts|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile|   `-- 2009-04-26-barcamp-boston-4-roundup.textile|-- _site`-- index.html

_config.yml

配置文件，用来定义你想要的效果，设置之后就不用关心了。但如果用的是别人的模版，那你就要把里面的信息全部改成你自己的。

_includes

可以用来存放一些小的可复用的模块，方便通过{ % include file.ext %}（去掉前两个{中或者{与%中的空格，下同）灵活的调用。这条命令会调用_includes/file.ext文件。

_layouts

这是模板文件存放的位置。模板需要通过YAML front matter来定义，后面会讲到，{ { content }}标记用来将数据插入到这些模板中来。

_posts

你的动态内容，一般来说就是你的博客正文存放的文件夹。他的命名有严格的规定，必须是2012-02-22-artical-title.MARKUP这样的形式，MARKUP是你所使用标记语言的文件后缀名，根据_config.yml中设定的链接规则，可以根据你的文件名灵活调整，文章的日期和标记语言后缀与文章的标题的独立的。

_site

这个是Jekyll生成的最终的文档，不用去关心。最好把他放在你的.gitignore文件中忽略它。

关于改别人的模版

大概要分为几个步骤

1. 改_config.yml里的信息
2. 改img里的图片
3. 改各种后缀为html的文件
4. 做一个Rakefile
5. 改’_post’里面的文章

关于用Rakefile自动生成文章模版并放到固定位置

因为有YAML Front Matter和模板变量的缘故，每次我们写文章前都要写好模版参数，但这毕竟太麻烦，每次写文章都要写好头顶的东西，在根据时间填上日期，再重命名文件，实在有碍写博客的动力，不过我们有更好的方法

首先
你要安装rake
有了gem后，你就可以这样了
gem install rake
详细教程请转：jekyll博客文章生成器制作
关于rake你可以去阅读官方文档做进一步的了解。

以下是我的Rakefile

task :default => :newrequire '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: mgsweet"            file.puts "date: #{Time.now}"            file.puts "categories: #{@categories}"            file.puts "tag: #{@tag}"            file.puts "---"    end    exec "vi #{@post_name}"end

文章URL是在_post目录下的文件名，一个好的文件名有助你更新文章。

发布

终于到了介绍Github page 的时候了
关于git与github的使用，可以查看我之前的文章Git 与 GitHub使用指南汇总，这里默认你已懂得git与github的操作，在github上创建一个”username.github.io”的repo的话，girhub会默认帮你打开github page，这种命名的仓库github允许每个帐号创建一次，在这种仓库下，你可以直接把你的网页目录push到master分支上也没问题，不过如果你还想在这帐号做更多的博客展示的话，可以用github里的项目介绍网址生成功能，就是创建一个repo后，在seting里你可以打开github page，里面有github提供的模版，创建成功后，你要把这个repoclone下来，这时细心的你可能会发现，多了一条分支gh-pages，你只有在这条分支上放你的网页文件github才会帮你生成网站(虽然你在命令行输入git branch时看不到这条分支，但你还是能git checkout gh-pages，它不是master的分支，详细可以在github上阅读它关于github page的英文介绍)，最后把你的网页文件覆盖到clone下来的目录里再push上github，大概过10分钟你就可以在http://username.github.io/repo_name.github.com看到你的网页了。