红薯的技术博客

git+github+markdown+jekyll blog系列（三）

2015-04-10
  • 作者：tomfans
  • 本文地址：http://f-olivia.github.io/ruby/2015/04/10/jekyll/
  • 转载请注明出处

#####三、实现

系列(一)学习完阮一峰同学的文章后，你就已经有能力搭建自己的独立博客了，但是这个博客 只有最基本的功能，并且也不好看。想想，有几种方式打造自己的blog：

  • 完全自己定制博客
  • 找一份框架，修改后使用
  • 从GitHub上fork别人的博客代码，在其中添加自己的文章

遵从简单原则，我选择第三种方式，fork了寞踪，做了简单的修改，然后发表自己的文章。 好，开工吧。

  1. 使用GitHub Pages建立博客；阮一峰是通过本地创建自己blog，然后推送到github。我呢，利用github Pages自动生成一个blog，然后clone到本地。具体怎么做呢？还是建议参考Github Pages极简教程 - 雁起平沙的网络日志；这里就罗列一下步骤：

    1）、创建代码库：登录github，选择New repository，输入项目名称xxxx.github.io

    2）、点击按钮create repository

    3）、点击按钮admin，选择按钮Automatic page generator，生成静态网页

    ok，你所创建的xxxx.github.io的blog已经生成

  2. clone上面所创建的库，命令：git clone git@github.com:F-olivia/F-olivia.git 或者 git clone https://github.com/F-olivia/F-olivia.github.io.git；

    在开始菜单里找到RailsInstaller –> Git Bash，执行上面的命令， 然后就在本地目录，C:\Sites\F-olivia.github.io生成一个文件夹F-olivia.github.io，保留文件夹.git

  3. clone别人的库，git clone https://github.com/xpmozong/xpmozong.github.io.git；删除其目录下文件夹.git

  4. 简单修改：主要是针对文件夹xpmozong.github.io内容进行调整，

    1）、删除文件夹.site

    2）、清空文件夹.post下的所有文件

    3）、全文搜索一下关键字xpmozong，用自己的库名替换

    ok，感觉做贼一样，偷了别人的劳动成果。那没办法谁让我web方面一窍不通，还不想太多浪费时间。

  5. 拷贝xpmozong.github.io下所有内容，复制到自己库目录下

  6. 用markdownpad2 创建一个文件2015-03-28-markdonnote.md，内容：

     ---
 layout: default
 title: 你好，世界
 category: 日志
 comments: true
	
 ---
	
 <h2>git+github+markdown+jekyll blog系列（三）</h2>
	
 <p>我的第一篇文章</p>
	
 <p>10 Apr 2015</p>

  7. 发布自己的库，命令：

     jekyll build    #编译生成静态网页
 git init    #--初始化本地库
 git add -A    #--添加本地库新增文件
 git commit -m "first commit"    #--提交
 git push -u origin master    #--推送到github远程库

  8. 介绍一下jekyll的结构，

     ```
 .
 ├── index.html
 ├── _config.yml
 ├── assets
 │   ├── blog-images
 │   ├── css
 │   ├── fonts
 │   ├── images
 │   └── javascripts
 ├── _includes
 ├── _layouts
 ├── _plugins
 ├── _posts
 └── _site
 ```
  • _config.yml

这是针对 Jekyll 的配置文件， 决定了 Jekyll 如何解析网站的源代码,下面是一个示例：

	```
	baseurl: /StrayBirds
	markdown: redcarpet
	safe: false
	pygments: true
	excerpt_separator: "\n\n\n"
	paginate: 5
	```

我的网站建立在 StrayBirds 项目中，所以 baseurl 设置成 StrayBirds， 我的文章采用 Markdown 格式写成，可以指定 Markdown 的解析器 redcarpet。 另外，安全模式需要关闭，以便 Jekyll 解析时会运行插件。 pygments 可以使得Jekyll解析文章中源代码时加入特殊标记，例如指定代码类型， 这可以被很多 javascript 代码高度库使用。 excerpt_separator 指定了一个摘要分割符号，这样 Jekyll 可以在解析文章时， 将文章的提要提取出来。 paginate 指定了一页有几篇文章，页数太多时，我们可以将文章列表分页，我们在 后文还会提到。

  • _layouts

这个目录存放着一些网页模板文件，为网站所有网页提供一个基本模板，这样 每个网页只需要关心自己的内容就好，其它的都由模板决定。例如，这个目录下的 default.html 文件：

	```html
	
	<!DOCTYPE html>
	<html>
	  <head>
	    <meta charset='utf-8'>
	    <title>{{ page.title }}</title>
	  </head>
	  <body>
	    <header>
	    </header>
	
	    <aside>
	    </aside>
	
	    <article>
	{{ content }}
	    </article>
	
	    <footer>
	    </footer>
	  </body>
	</html>
	
	
	```

可以看出，这个文件就是所有页面共有的东西，每个页面的具体内容会被填充在 `

git+github+markdown+jekyll blog系列（二）

2015-04-09
  • 作者：tomfans
  • 本文地址：http://f-olivia.github.io/ruby/2015/04/09/jekyll/
  • 转载请注明出处

#####三、准备工作

（一） 工具介绍：git、github、jekyll、markdown

  1. git：是一个开源的分布式版本控制系统，非常高效的项目版本管理工具。
  2. GitHub：是一个基于Git的非常流行的开源项目托管库。 利用GitHub，可以让全球各地的程序员们一起协作开发。GitHub提供了一种功能，叫GitHub Pages，利用这个功能，我们可以为项目建立网站，当然，这也意味着我们可以通过GitHub Pages 建立自己的网站。
  3. Jekyll：是一个简单的，针对博客设计的静态网站生成器。使用GitHub和Jekyll，我们可以打造自己的独立博客，你可以自由地定制网站的风格，且是免费的。
  4. markdown： 是一种适用于网络的书写语言。严格的说它就是一种标记语言。

（二） 环境配置：我的工作环境是win7系统，因此遵从简单原则，我选择 RailsInstaller来搭建ruby环境（包含Ruby、Rails、Bundler、Git、Sqlite、TinyTDS、SQL Server support和DevKit。），然后来配置git和github；进而安装jekyll。

  1. 安装ruby，上面已经说过了，推介用RailsInstaller（我下载的是railsinstaller-3.1.0.exe），具体步骤：（请参考）

    1）、注册git用户，请登录 github，如图1： Alt text

    2）、安装步骤就不在这里说了，一路next下去。

    3）、安装完会自动弹出git和shh的设置提示，哦，在做这个之前先要注册一个git用户，所以，就有了1）步骤

     ---
 # Rails Environment Configuration.

 Your git configuration is incomplete.
 user.name and user.email are required for properly using git and services such
 as GitHub (https://github.com/).
	
  Please enter your name, for example mine is: Wayne E. Seguin
 name > F-olivia
 Setting user.name to F-olivia
	
  Please enter your email address, for example mine is: wayneeseguin@gmail.com
 email > xxxx@163.com
 Setting user.email to xxxx@163.com
 DL is deprecated, please use Fiddle
	
 git:
     user.name:  F-olivia
     user.email: xxxx@163.com
     version:    git version 1.9.4.msysgit.2

 ruby:
     bin:        D:/RailsInstaller/Ruby2.0.0/bin/ruby.exe
     version:    ruby 2.1.5p273 (2014-11-13 revision 48405) [i386-mingw32]

 rails:
     bin:        D:/RailsInstaller/Ruby2.0.0/bin/rails.bat
     version:    Rails 4.1.8

    4）、填写github注册时的用户名和邮箱，就完成了公钥和密钥的生成，在C:\Documents and Settings\用户名下(C:\Users\xieax.ssh)，有个隐藏目录名为.ssh，id_rsa.pub文件就是公钥，id_rsa就是密钥。

     ---
 ssh:
 public_key_location: C:\Users\xieax/.ssh/id_rsa.pub
 public_key_contents: ssh-rsa AAAAB3NzaC1yc2E........
 .............lGB3Nz F-olivia <xxxx@163.com>


 NOTES:
  		
 Your public ssh key (id_rsa.pub) has been automatically generated and copied to your clipboard.

    5）、ssh密钥与github账户做关联，把4）步骤中文件id_rsa.pub复制，然后登录github找到“Account Settings” > Click “SSH Keys” > Click “Add SSH key”，把密钥串粘贴，如图1： Alt text

    6）、验证git连接，在开始菜单里找到RailsInstaller –> Git Bash，执行它，就打开了下面的命令窗口，以后的操作都是在这个窗口下进行的；输入命令：ssh -T git@github.com

     ---
 $ ssh -T git@github.com
 1.The authenticity of host 'github.com (207.97.227.239)' can't be established.
 2.RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
 3.Are you sure you want to continue connecting (yes/no)?

    选择yes

     Hi F-olivia! You've successfully authenticated, but GitHub does not provide shell access.

    后续设置账户信息，看个人意愿了，我没有做这一步

     ---
 1. git config --global user.name "你的名字"
 2. git config --global user.email "your_email@youremail.com"

    好了，git与github连接成功了，革命的道路走了一半了，继续加油！

  2. 安装jekyll，这个比较繁琐，要安装一堆包（directory_watcher、liquid、open4、maruku和classifier，由于jekyll默认包是maruku来解析markdown，这里用kramdown），具体如下：

    科普一下，Ruby是一种脚本语言，Gem是基于Ruby的一些开发工具包，Rails也算是一组Gem，专门用来做网站的。 而目前最好gem包是淘宝的。

    1）、查看gem包，命令：gem soruces -l

     ---
 C:\Sites>gem soruces -l
 ERROR:  While executing gem ... (Gem::CommandLineError)
 		Unknown command soruces

    2）、更换成淘宝包

     ---	
 C:\Sites>gem sources -a http://ruby.taobao.org/
 http://ruby.taobao.org/ added to sources
	
 C:\Sites>gem sources -l
 *** CURRENT SOURCES ***
	
 http://ruby.taobao.org/

    3）、安装jekyll，命令：gem install jekyll

     ---
 C:\Sites>gem install jekyll
 Fetching: liquid-2.6.1.gem (100%)
 Successfully installed liquid-2.6.1
 Fetching: kramdown-1.5.0.gem (100%)
 Successfully installed kramdown-1.5.0
 ......
 Installing ri documentation for yajl-ruby-1.1.0-x86-mingw32
 Done installing documentation for blankslate, celluloid, classifier-reborn, colorator, fast-stemmer, ffi, hitimes, jekyll, jekyll-coffeescript, jekyll-gist, jekyll-paginate, jekyll-sass-converter, jekyll-watch, kramdown, liquid, listen, mercenary, parslet, posix-spawn, pygments.rb, rb-fsevent, rb-in
 otify, redcarpet, safe_yaml, timers, toml, yajl-ruby after 9 seconds
 27 gems installed

    根据安装成功列表，可以和上面需要的包对照一下，如需安装的，用命令gem install 包名执行。

    ok，

  3. markdown安装，windows下只能用MarkdownPad，这个更简单了，百度一个，一路next下去。

好了，今天就到这里，明天继续，开始创建自己的blog。

blog comments powered by Disqus

中，注意这个 content 两边的标记，这是一种叫 [liquid](https://github.com/Shopify/liquid) 的标记语言。 另外，还有那个 git+github+markdown+jekyll blog系列（三） ，其中 page 表示引用 default.html的 那个页面，这个页面的 title 值会在 page 相应页面中被设置，例如 下面的 index.html 文件，开头部分就设置了 title` 值。

  • index.html

这是网站的首页，访问 http://username.github.io 时，会指向 http://username.github.io/index.html，我们看一下基本内容：

	```html
		---
		layout: default
		title: 首页
		---
	
	
	<ul class="post-list">
	    {% for post in site.posts %}
	        <a href="{{site.baseurl}}{{post.url}}"> {{ post.title }}  </a> <br>
	        {{ post.date | date: "%F" }} <br>
	        {{ post.category }} <br>
	        {{ post.excerpt }} 
	    {% endfor %}
	
	</ul>
	```

注意，文件开头的描述，我们称之为 front-matter， 是对当前文件的一种描述，这里 设置的变量可以在解析时被引用，例如这里的 layout就会告诉 Jekyll, 生成 index.html 文件时，去 _layouts 目录下找 default.html 文件，然后把当前文件解析后，添加到 default.html 的 content 部分，组成最终的 index.html 文件。还有title 设置好的 值，会在 default.html 中通过 page.title 被引用。

文件的主体部分遍历了站点的所有文章，并将他们显示出来，这些语法都是 liquid 语法， 其中的变量，例如 site, 由 Jekyll 设置我们只需要引用就可以了。而 post 中的变量， 如 post.title, post.category 是由 post 文件中的 front-matter 决定，后面马上就会看到。

  • _posts

这个目录存放我们的所有博客文章，他们的名字有统一的格式：

	```
	YEAR-MONTH-DAY-title.MARKUP
	```

例如，2014-02-15-github-jeklly.md，这个文件名会被解析，前面的 index.html 中， post.date 的值就由这里文件名中的日期而来。下面，我们看看一篇文章的内容示例：

ok，今天就到这儿吧，还有个尾巴，明天接着来

blog comments powered by Disqus