懒人李冰

记录我的生活、学习

使用Octopress 搭建个人博客

详细记录使用Octopress的搭建和使用过程中遇到的问题。

安装octorpess

首先,安装gitruby,注册 github 账号。

然后,在终端(Terminal)下执行如下命令:

1
2
3
4
5
git clone git://github.com/imathis/octopress.git octopress
cd octopress
gem install bundler
bundle install
rake install // 安装默认主题

本地安装完毕后,通过rake preview预览安装效果。执行完rake preview后,在浏览器 中输入http://localhost:4000即可查看搭建效果。

部署octopress

登录注册的 github 账号,选择New Repository,进入新建库页面后, 在Repository name一栏填[your_username].github.io,[your_username] 是 github 上的用户名,此处的格式一定要正确,否则部署会失败。 之后点击Create repository按钮提交。

如果创建仓库成功,会有一个 SSH 地址,形如git@github.com:[your_name]/[your_name].github.io.git,后面会用到该地址。

终端下执行如下命令:

1
2
cd octopress
rake setup_github_pages

执行完上面两条命令后,需要把刚刚生成的 SSH 地址粘贴到此处。 继续执行:

1
2
rake generate
rake deploy

其中rake generate用来生成页面,rake deploy用来部署页面。上述完成后, 即可使用http://[your_username].github.io来访问页面。

最后要记得把源文件全部发布到source分支下面。通过下面命令完成:

1
2
3
git add .
git commit -m "commit message"
git push origin source

发布新帖

发布新帖的两种方法:
方法一是在命令行下执行如下命令:

1
2
cd octopress
rake new_post["Post Title"]

其中的Post Title就是你想要的文章标题,然后会有一个名为yyyy-mm-dd-Post_Title.markdown的文件在octopress/source_posts目录下生成,其中yyy-mm-dd是当时的日期。之后打开文件,即可编辑博客。

方法二是直接在octopress/source_posts文件下,生成一个格式相同的文件即可。

生成的文件格式头如下

1
2
3
4
5
6
7
---
layout: post
title: "使用Octopress 搭建个人博客"
date: 2015-05-01 19:47:37 -0700
comments: true
categories: 总结积累
---

基本配置

_config.yml用于基本配置,包括域名、网站标题、作者等等信息。

_config.yml
1
2
3
4
5
6
url: http://yhoursite.com
title: My Octopress Blog
subtitle: A blogging framework for hackeers.
author: Your Name
simple_search: https://www.google.com/search
description:

汉化Categories, 在_config.yml文件中,添加下面一行代码:

1
category_tile_prefix: “分类:”

汉化Read On->按钮:当文章只是显示摘要,点击Read on-> 后才可查看全文时,可以通过在文章中插入如下内容:

1
<!--more-->

在文章中找到如下一行,把其中的Read on改为继续阅读

1
excerpt_link:"Read on"

主题修改

网站底部:一般来讲网站底部会有一些网站的描述信息,比如版权声明、网站 主题,网站使用的系统等等,要修改这部分内容,直接打开source/_includes/custom/foot.html修改相应部分即可。

添加图片

在写 blog 的过程中,经常需要用到插入图片。示例如下:

  1. 把图片 meinv.png copy 到 source/images下。

  2. 在需要的位置添加代码.

1
<img src="/images/meinvp.png">

更多技巧,请参见 Octopress 官网提供的技术支持

添加视频

在写 blog 的过程中,经常需要在博客里添加视频。在此记录添加 YouKu 视频的方法。 首先添加 ruby 插件,添加文件octopress/plugins/youku.rb,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class Youku < Liquid::Tag

def initialize(tagName, markup, tokens)
  super
  
  @params = markup.split(" ")
  if @params.count >= 1
    @id = @params[0]
    if @params.count >= 3
      @width = @params[1]
      @height = @params[2]
    else
      @width = 560
      @height = 420
    end
  else
    raise "No Youku ID provided in the \"youku\" tag"    
  end
end

def render(context)
# "<iframe height=498 width=510 src="http://player.youku.com/embed/XNTEzNzcwNDI0" frameborder=0 allowfullscreen></iframe>"
"<iframe style=\"margin:0 auto; display: block\" height=\"#{@height}\" width=\"#{@width}\" src=\"http://player.youku.com/embed/#{@id}?color=white&theme=light\"></iframe>"
end

Liquid::Template.register_tag "youku", self
end

添加完上述文件后,就可添加 youku 视频文件了,方法是在需要添加视频的位置添加如下 Tag:

youku id width height

其中的youku 是关键字;id 是打开的youku视频的id,可以从网址里找到;width/height 是视频的宽高。

示例如下:

添加文章目录

文章一旦长了之后,想要找某个点就需要目录来索引。添加文章目录方法:

首先,使用 kramdown 作为 Octopress 作为 Markdown 解析器。

① 在Gemfile中添加如下代码.

1
gem 'kramdown'

② 端执行如下命令。

1
bundle install

③ 修改_config.yml文件中相关内容如下。

1
2
3
4
5
6
markdown: kramdown
kramdown:
    user_coderay: true
    coderay:
        coderay_line_numbers: table
        coderay_css: class

其次,在想要插入目录的地方,插入如下代码即可。

1
2
* list element with functor item
{:toc}

再次,在目录前自动添加本页目录,修改sass/custom/_style.scss,代码如下.

1
2
3
4
#markdown-toc:before{
    content: "本页目录";
    font-weitht: bold;
}

最后,为防止显示摘要时出现目录,在sass/custom/_style.scss添加代码。

1
2
3
.blog-index #markdown-toc{
    display: none;
}

参考博文:Octopress 精益修改Table Of Contents in Octopress

添加表格

语法说明:

  • |-:之间的多余空格会被忽略,不影响布局。
  • 默认标题栏居中对齐,内容居左对齐。
  • -:表示内容和标题栏居右对齐,:-表示内容和标题栏居左对齐,:-:表示内容和标题栏居中对齐。
  • 内容和|之间的多余空格会被忽略,每行第一个|和最后一个|可以省略,-的数量至少一个。
1
2
3
4
| 左对齐标题 | 右对齐标题 | 居中对齐标题 |
| :--------  | ---------: | :----------: |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |
左对齐标题 右对齐标题 居中对齐标题
短文本 中等文本 稍微长一点的文本
稍微长一点的文本 短文本 中等文本

多台Mac上同时使用

在新的Mac上创建 ssh key 并添加到 github 中。

创建ssh-key

1
$ ssh-keygen -t rsa -b 4096 -C "libinglimit@gmail.com"

把生成的key添加到ssh-agent中。

1
$ ssh-add ~/.ssh/id_rsa

把添加的key放到github中。

本地重建Octopress仓库。clonesource分支/master分支:

1
2
3
$ git clone -b source git@github.com:lazybing/lazybing.github.io octopress
$ cd octopress
$ git clone git@github.com:lazybing/lazybing.github.io _deploy

参见 github 官方帮助文档

配置环境。

执行以下命令配置环境:

1
2
3
4
$ gem install bundler
$ rbenv rehash    # If you use rbenv, rehash to be able to run the bundle command
$ bundle install
$ rake setup_github_pages 

使用技巧

及时提交本地修改

1
2
$ rake generate
$ rake deploy

第一条命令会使用本地的修改生成最新的blog网站,并且生成的blog会存放到Octopress根目录下的public/目录下;

第二条命令主要做了两件事:

*用generate命令生成在public/目录下的内容覆盖_deploy/目录下内容;

*将_deploy/目录下的修改addcommitgit,并pushgitmaster分支。

除此之外,还需要把source分支中做到的修改提交到git仓库中,执行以下命令:

1
2
3
$ git add .
$ git commit -am "Some comment here." 
$ git push origin source  # update the remote source branch 

修改前先更新到最新的版本。

1
2
3
4
$ cd octopress
$ git pull origin source  # update the local source branch
$ cd ./_deploy
$ git pull origin master  # update the local master branch

为防止出现non-fast-forward错误,操作顺序示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
$ git clone -b source git@github.com:lazybing/lazybing.github.io octopress
$ cd octopress/
$ git clone git@github.com:lazybing/lazybing.github.io _deploy
$ git pull origin source
$ cd ./_deploy/
$ git pull origin master
$ cd ..
$ git status
$ git branch -a
$ git add .
$ git commit -m "commit comment"
$ git push origin source
$ rake generate;rake deploy

参考博文:让Octopress博客在多台Mac上同时使用

octopress中添加Latex支持

  1. 首先要安装 kramdown,安装命令:gem install kramdown
  2. source/_includes/custom/footer.html添加如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- MathJax -->  
<script type="text/x-mathjax-config">  
    MathJax.Hub.Config({  
                       tex2jax: {  
                       inlineMath: [ ['$','$'], ["\\(","\\)"] ],  
                       processEscapes: true  
                       }  
                       });  
    </script>  
  
<script type="text/x-mathjax-config">  
    MathJax.Hub.Config({  
                       tex2jax: {  
                       skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']  
                       }  
                       });  
    </script>  
  
<script type="text/x-mathjax-config">  
    MathJax.Hub.Queue(function() {  
                      var all = MathJax.Hub.getAllJax(), i;  
                      for(i=0; i < all.length; i += 1) {  
                      all[i].SourceElement().parentNode.className += ' has-jax';  
                      }  
                      });  
    </script>  
  
<script type="text/javascript"  
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">  
    </script>

这样就引入了 MathJax 的 js 包。
3. 在_config.yml文件中,用markdown: kramdown替换markdown: rdiscount

完成上述步骤后,即可使用 Latex 公式了。参考文献