暑假在 GitHub Pages 上搭建了一个 Octopress 博客,趁现在放假总结一下整个流程:

预备知识:

  Why Octopress? 按照官方的说法, Octopress 是一个「为黑客设计的博客框架」。Octopress 是一款基于 Jekyll 的静态站点生成系统,使用 Ruby 实现,所以你需要懂点 Ruby 的知识,但是在整个博客搭建过程中,只要会几个命令就行了;

  Why GitHub? 免费且独立,提供版本控制和代码托管功能。把 Octopress 博客系统搭建到 GitHub Pages 虽是免费,但不失独立性,即便 GitHub 全站关闭,你也将有一份本地全站备份,随时可以重新恢复。不必受托管商之气,而且还免费,如果你愿意,甚至可以自行插入广告挣钱。写文章,建网站,做软件都需要修改,但有时候改完了又会后悔,如果有时光机就好了,Git 就是你的时光机。Octopress 通常会部署在 GitHub 上,所以你需要会一些简单的 Git 命令以及 GitHub 的使用。

  Why GitHub Pages + Octopress? 相对其他托管到 GitHub 上的博客程序, Octopress 更加成熟易上手。打个比方, Jekyll 可以说是毛坯房,Hexo 和 Octopress 算是简装修,但相比 Hexo,Octopress 有更多装修范例和更多熟练的装修工人,更容易获取帮助。当然如果你只想住精装修的房子,那不得不花点钱上 WordPress 了。

  Why Markdown? Markdown 是现在最为流行的轻量级标记语言,也是已故的天才 Aaron Swartz 留给世人最好的礼物,窃以为每个在互联网上发布文章的人都该掌握。只需要花几分钟就可以了解 Markdown 的基本语法规则,在 Windows 下推荐使用 MarkDown Pad 来编辑 Markdown 文件;

准备工作

2.1. OS Platform: Windows 7 Ultimate,Ubuntu 14.04 LTS
2.2. Git: https://github.com/msysgit/msysgit/releases/download/Git-1.9.5-preview20141217/Git-1.9.5-preview20141217.exe
2.3. Python: https://www.python.org/ftp/python/2.7.9/python-2.7.9.msi
2.4. Ruby: http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-1.9.3-p551.exe?direct Octopress 对 Ruby 有版本要求,据说是 1.9.3,但是目前我使用 2.0+(推荐) 也没遇到问题。
2.5. DevKit: https://github.com/downloads/oneclick/rubyinstaller/DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe,与 1.9.3 版本的 Ruby 对应。
2.6. Octopress: [email protected]:imathis/octopress.git,这个在 git bash 里 clone 就可以了。

安装工具

3.1. 安装 Git
  Windows 下安装 Git 很简单,一路 next 就可以了。

3.2. 安装 Ruby
  Ruby 的安装也是一路 next 就可以,不过记得勾选“Add Ruby executables to your PATH”,将 Ruby 的执行路径加入到环境变量中,如果忘记勾选,也可以手动设置。安装完后可以在命令提示符中输入 ruby --version 来确认是否安装成功。

3.3. 安装 DevKit
  DevKit 下载下来的是一个自压缩文件,我们将其解压到 D:/DevKit,有两点需要注意:
  i. 解压目录中没有有中文和空格;
  ii. 必须先安装 Ruby,而且 Ruby 需要用 RubyInstallser 安装。
  解压 DevKit 后,在命令行输入以下命令来进行安装:

1
2
3
4
D:\
cd DevKit
ruby dk.rb init
ruby dk.rb install

3.4. 安装 Python
  安装 Python,也是一路 next 就可以,博客的代码高亮用到了 Python 的 Pygments 模块,在 Python 中安装第三方库需要使用 easy_install,easy_install 会安装在 Python 安装目录的Scripts 目录中,例如我的 Python 目录是 D:\Software\Python 2.7.8,所以需要将 D:\Software\Python 2.7.8\Scripts 目录加入到环境变量中才能在命令提示符中使用 easy_install 命令。在命令提示符中输入如下命令就可以安装 Pygments 了:

1
easy_install pygments

3.5. 安装 Octopress
  首先在 git bash 中输入如下命令将 Octopress 代码拉到本地:

1
2
cd D:\
git clone git://github.com/imathis/octopress.git octopress

3.6. 安装 Octopress 的依赖项:
  安装依赖项需要用到 Ruby 的 gem,使用下面的命令可以更换 gem 的更新源,使用国内的淘宝镜像速度相对快点:

1
2
3
gem sources -a http://ruby.taobao.org/
gem sources -r http://rubygems.org/
gem sources -l

修改 octopress 目录下的 Gemfile 文件,将第一行的 http://rubygems.org/ 修改为 http://ruby.taobao.org/
在命令提示符中进入到 octopress 目录,输入下面命令进行依赖项的安装:

1
2
gem install bundler
bundle install

3.7. 安装 Octopress 的默认主题:

1
rake install

所谓 rake 就是 ruby make 的缩写。

至此,所有的安装工作已经结束,输入下面的命令

1
rake preview


然后在浏览器地址栏输入: http://localhost:4000
可以在本地进行预览:
(不是默认主题)

将 Octopress 部署到 Github Pages 上

4.1. 新建库(Repository)
  如果没有 Github 账号,需要先注册一个 Github 账号,登录到 Github 后,点击 New Repository 跳转到新建库页面,在 Repository name 一栏填 [your username].github.io,[your username] 是你 Github 上的用户名,请务必按照此格式填写,否则无法在 Github 上部署博客。然后点击 Create repository 按钮提交。如果一切顺利会出现一个页面,有一个 SSH 地址,形如 [email protected]:[your username]/[your username].github.io.git,或者 HTTPS 地址,形如https://github.com/[your username]/[your username].github.io.git,下一步会用到。

4.2. 将 Octopress 发布到 Github Pages 上
  在命令提示符中进入到 Octopress 目录,执行以下命令:

1
rake setup_github_pages

在 Repository url 后面输入上一步得到的 SSH 地址或者 HTTPS 地址。
执行以下命令:

1
2
rake generate
rake deploy

第一个命令用来生成页面,第二个命令用来部署页面。或者直接使用命令:

1
rake gen_deploy

上述内容完成,即可使用 http://[your_username].github.io/ 访问页面,将会出现一个和在本地预览时相同的页面。

4.3. 将源文件发布到 source 分支下

1
2
3
git add .
git commit -m "提交信息"
git push origin source

发布新帖

5.1. 在命令提示符中进入到 octopress 目录,执行以下命令:

1
rake new_post["Post Title"]

其中的 Post Title 替换为你想写的文章标题。然后会有一个名为 yyyy-mm-dd-Post-Title.markdown 的文件在 octopress/source/_posts 目录下生成,其中 yyyy-mm-dd 是你当时的日期。

5.2. 进入 octopress/source/_posts 文件夹,找到刚才生成的文件,用 Markdown 编辑器(Windows 下推荐使用 Markdown Pad,收费)或者文本编辑器打开,对文章内容进行编辑。
打开文件后,你会发现文章开头有这么一段信息:

layout: post
title: “Post Title”
date: yyyy-mm-dd hh:mm:ss
comments: true
categories: “”

tags: [tag1, tag3, … ]

</pre>

这其实是这篇文章的元数据:layout 暂时不要理会;title 是这篇文章显示在最终网页上的标题;date 部分是详细的文件生成时间,如 2014-04-28 03:35:00;comment 部分表示是否允许评论,目前显示是允许,如果想关闭评论,请改为 false;categories 指这篇文章的分类,请在后面引号中输入,如果没有该分类,则会自动生成;tags 指这篇文章的标签或者关键词。请不要删除这段信息,在这段信息下面开始你的文章内容。

5.3. 文章编辑完成之后,执行以下命令:

1
rake gen_deploy

遇到的问题

6.1. 安装 Octopress 的依赖项,遇到的问题:

解决方式,更换 Ruby 源:


然后会出现各种依赖问题,这里只能手动一个一个安装解决,在 Ubuntu 下执行 bundle update 可解决:



6.2. 安装 Octopress 遇到的问题:

解决方式:
把 git.exe 添加到 PATH 中,或者在 git bash 里安装: