MacOS下安装Github+Jekyll 搭建博客

区别于其他的博客系统比如WordPress，Jekyll仅仅是一个解析引擎。它的作用是分析用户的配置文件并生成静态网页文件。 而访问者实际访问的是位于_site文件夹内的html。写了这么长时间的服务器动态脚本，Jeklly仿佛又回到了原点。 不过在Github的博客服务和其他工具的支持下，Jekyll有其他博客系统无法相比的优势：

• 速度

  因为是静态网页，没有后台逻辑各种复杂交互。另外在Github支持下，你可以免费地获取一个还不错的博客系统。

• 安全

  因为是静态网页，所以。。

• 版本控制

  借助Github的代码仓库，天然融合了版本控制功能。而且也不用担心丢失问题。

安装

1. Sign in

DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe

默认认为MacOS lion 10.7 下已经装好了ruby,macport,python,git,esay_install

1. 注册Github

   到github.com注册就可以了。

2. 安装gem

   先把gem源码克隆下来

    $ git clone https://github.com/rubygems/rubygems.git
   

   进如gem工程的目录,运行setup.rb

    $ sudo ruby setup.rb
   

3. 安装Jekyll

   运行命令

    $ sudo gem install jekyll
   

   安装完Jekyll后，基本上就可以生成网页文件了，方法可以参见这个链接

4. 安装Jekyll-Bootstrap/部署到Github

   我们可能没有耐心从零开始配置一个blog，Jekyll提供了一个模板。 http://jekyllbootstrap.com/
   另外Github把名字为 USERNAME.github.com 的工程自动视为用户blog，我们可以借助这点直接部署到github上。
   以下引用http://jekyllbootstrap.com/index.html#start-now的安装方法

    $ git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com
    $ cd USERNAME.github.com
    $ git remote set-url origin [email protected]:USERNAME/USERNAME.github.com.git
    $ git push origin master
   

   push到Github上后，大概等待10分钟，服务器会把你的文件解析完成，然后访问 USERNAME.github.com 便可以看得到效果 另外在本地运行

    $ jekyll --server   
   

   也可以看到效果

配置

1. RDiscount

   自带的markdown解析器有问题，对中文支持不好，下载RDiscount解析器：

    $ sudo gem install rdiscount
   

   修改 _config.yml 文件，修改或添加以下属性：

    markdown: rdiscount
   

2. 实现代码高亮

   安装Pygments

    $ sudo easy_install Pygments
   

   在 _config.yml 中开启 Pygments

    pygments: true
   

   在 HOME_PATH/assets/themes/twitter/syntax 下放置default.css文件
   修改 HOME_PATH/_includes/themes/twitter/default.html 文件，在引用的样式表最下面加入

    <link href="/assets/themes//syntax/default.css" rel="stylesheet">
   

   之后就可以实现代码高亮了，如以下代码（百分号前的下划线是转义字符，粘贴时实际应该去掉）

        {\% highlight cpp \%}
        #include <iostream>
        int main(){
            std::cout << "Hello World!" << std::endl;   
            return 0;
        }
        {\% endhighlight \%}
   

3. 新建Page

    rake page name="testpage.md"
   

   可以在新建的文件头部修改显示信息

    ---
    layout: page
    title: "testpage"
    description: ""
    group: navigation
    ---
   

   当group设置成navigation时，其会显示在网页的上边栏

4. 新建Post

    rake post title="testpost"
   

   同样可以修改显示信息

    ---
    layout: post
    title: "testpost"
    description: ""
    category: category1
    tags: [tag1, tag2]
    ---
   

   tags标签可以是多个，用逗号隔开，逗号后面必须有空格

5. 修改tagline BUG：在POST中，tagline一直显示固定信息. 将文件 HOME_PATH/_includes/themes/twitter/post.html 第二行改为(去掉反斜杠)

    <h1>\{\{ page.title \}\} <small>\{\{ page.tagline \}\}</small></h1>
   

区别于其他的博客系统比如WordPress，Jekyll仅仅是一个解析引擎。它的作用是分析用户的配置文件并生成静态网页文件。 而访问者实际访问的是位于_site文件夹内的html。写了这么长时间的服务器动态脚本，Jeklly仿佛又回到了原点。 不过在Github的博客服务和其他工具的支持下，Jekyll有其他博客系统无法相比的优势：

• 速度

  因为是静态网页，没有后台逻辑各种复杂交互。另外在Github支持下，你可以免费地获取一个还不错的博客系统。

• 安全

  因为是静态网页，所以。。

• 版本控制

  借助Github的代码仓库，天然融合了版本控制功能。而且也不用担心丢失问题。

安装

1. Sign in

DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe

默认认为MacOS lion 10.7 下已经装好了ruby,macport,python,git,esay_install

1. 注册Github

   到github.com注册就可以了。

2. 安装gem

   先把gem源码克隆下来

    $ git clone https://github.com/rubygems/rubygems.git
   

   进如gem工程的目录,运行setup.rb

    $ sudo ruby setup.rb
   

3. 安装Jekyll

   运行命令

    $ sudo gem install jekyll
   

   安装完Jekyll后，基本上就可以生成网页文件了，方法可以参见这个链接

4. 安装Jekyll-Bootstrap/部署到Github

   我们可能没有耐心从零开始配置一个blog，Jekyll提供了一个模板。 http://jekyllbootstrap.com/
   另外Github把名字为 USERNAME.github.com 的工程自动视为用户blog，我们可以借助这点直接部署到github上。
   以下引用http://jekyllbootstrap.com/index.html#start-now的安装方法

    $ git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com
    $ cd USERNAME.github.com
    $ git remote set-url origin [email protected]:USERNAME/USERNAME.github.com.git
    $ git push origin master
   

   push到Github上后，大概等待10分钟，服务器会把你的文件解析完成，然后访问 USERNAME.github.com 便可以看得到效果 另外在本地运行

    $ jekyll --server   
   

   也可以看到效果

配置

1. RDiscount

   自带的markdown解析器有问题，对中文支持不好，下载RDiscount解析器：

    $ sudo gem install rdiscount
   

   修改 _config.yml 文件，修改或添加以下属性：

    markdown: rdiscount
   

2. 实现代码高亮

   安装Pygments

    $ sudo easy_install Pygments
   

   在 _config.yml 中开启 Pygments

    pygments: true
   

   在 HOME_PATH/assets/themes/twitter/syntax 下放置default.css文件
   修改 HOME_PATH/_includes/themes/twitter/default.html 文件，在引用的样式表最下面加入

    <link href="/assets/themes//syntax/default.css" rel="stylesheet">
   

   之后就可以实现代码高亮了，如以下代码（百分号前的下划线是转义字符，粘贴时实际应该去掉）

        {\% highlight cpp \%}
        #include <iostream>
        int main(){
            std::cout << "Hello World!" << std::endl;   
            return 0;
        }
        {\% endhighlight \%}
   

3. 新建Page

    rake page name="testpage.md"
   

   可以在新建的文件头部修改显示信息

    ---
    layout: page
    title: "testpage"
    description: ""
    group: navigation
    ---
   

   当group设置成navigation时，其会显示在网页的上边栏

4. 新建Post

    rake post title="testpost"
   

   同样可以修改显示信息

    ---
    layout: post
    title: "testpost"
    description: ""
    category: category1
    tags: [tag1, tag2]
    ---
   

   tags标签可以是多个，用逗号隔开，逗号后面必须有空格

5. 修改tagline BUG：在POST中，tagline一直显示固定信息. 将文件 HOME_PATH/_includes/themes/twitter/post.html 第二行改为(去掉反斜杠)

    <h1>\{\{ page.title \}\} <small>\{\{ page.tagline \}\}</small></h1>