参考

自己的建立过程主要参照了下面两个链接的内容

  1. 阮一峰老师的介绍：[搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门][ruan]
  2. github官方的指引：https://pages.github.com/ [ruan]:http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

创建blog用的仓库

1.创建一个已自己用户ID开头的reposiory

例：xiagn825.github.io

2.clone工程到本地

git clone https://github.com/username/username.github.io

3.进入项目目录，新建index.html文件，并随意添加些内容进去

cd username.github.io
echo "Hello World" > index.html

4.上传文件到远程仓库

git add --all
git commit -m "Initial commit"
git push -u origin master

5.之后就可以在浏览器中输入远程仓库的名字进行查看

使用jekyll管理你的blog

jekyll介绍：http://jekyllrb.com/

安装jekyll

  1. 安装ruby：因为jekyll是基于ruby的。
    官方下载地址：https://www.ruby-lang.org/zh_cn/downloads/

  2. 安装bundler：gem install bundler。 如果一直出现网络问题不能安装，请参考这里的解决方案

  3. 安装jekyll：在安装之前先要创建ruby的安装文件Gemfile，其内容如下

     source 'https://rubygems.org'
 gem 'github-pages'

之后执行bundle install完成jekyll的安装

运行jekyll

在项目根目录输入bundle exec jekyll serve就可以运行jekyll，浏览器中输入 http://localhost：4000就能把index.html的内容显示出来。

配置jekyll

  1. 创建jekyll的配置文件_config.yml

  2. 创建用来存放模版的目录_layouts,在目录内创建default.html.其中创建默认的blog模版。

     参考内容：
 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title>｛｛ page.title ｝｝</title>
 </head>
 <body>
     ｛｛ content ｝｝
 </body>
 </html>

  3. 创建_post目录用来存放blog内容
    进入该目录，创建第一篇文章。文章就是普通的文本文件，文件名假定为2012-08-25-hello-world.html。(注意，文件名必须为”年-月-日-文章标题.后缀名”的格式。如果网页代码采用html格式，后缀名为html；如果采用markdown格式，后缀名为md。）

     ---
 layout: default
 title: 你好，世界
 ---
 <h2>｛｛ page.title ｝｝</h2>
 <p>我的第一篇文章</p>
 <p>｛｛ page.date | date_to_string ｝｝</p>

  4. 修改首页
    修改原来简单的index.html文件

     ---
 layout: default
 title: 我的Blog
 ---
 <h2>｛｛ page.title ｝｝</h2>
 <p>最新文章</p>
 <ul>
 ｛% for post in site.posts %｝
 <li>｛｛ post.date | date_to_string ｝｝ <a href="｛｛ site.baseurl ｝｝｛｛ post.url｝｝">｛｛ post.title ｝｝</a></li>
 ｛% endfor %｝
 </ul>

  5. 执行jeykll编译，在本地查看效果

     jeykll build

  6. 确认效果后将代码提交到远程仓库，确认效果。

     git add --all
 git commit -m "update layout"
 git push -u origin master
  7. 如果要进一步美化自己的blog请到这里下载jekyll皮肤 或根据jeykll的语法自行美化。