懒人李冰

记录我的生活、学习

使用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

| 左对齐标题 | 右对齐标题 | 居中对齐标题 |
| :--------  | ---------: | :----------: |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |
左对齐标题 右对齐标题 居中对齐标题
短文本 中等文本 稍微长一点的文本
稍微长一点的文本 短文本 中等文本

多台机器上同时使用

在新的机器上创建 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/目录下的修改add 、 commit到git，并push到git的master分支。

除此之外，还需要把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 公式了。参考文献