Blog = GitHub + Octopress

发表于 分类于 阅读次数： Waline：
介绍基于作者Fork的Octopress版本在GitHub上建立博客的完整流程。包含版本改动说明和八个详细步骤：本地环境安装、主题安装、GitHub Pages连接、博客配置、备份准备、文章创建、部署发布、备份管理。详细说明每个步骤的具体操作命令和注意事项，提供完整的从零开始搭建个人博客的指南，帮助用户摆脱WordPress转向Octopress静态博客系统。

最近有些同学让我分享我的博客主题，其实主题早已经放在 GitHub 上了。下面索性基于 我 Fork 的 Octopress，讲一下如何使用 Octopress 在 GitHub 上建博客。先来看看我的版本和原始版本的主要不同之处：

2012-04-13: 允许单篇文章独立引用 CSS 和 JS，具体文件内容变动见 commit0aa27bb 和 05fcdbf。

  1. .rvmrc 改成使用我机子上装的 Ruby 版本（1.9.3），Octopress 最低要求是 1.9.2。
  2. Gemfile 把源改成 ruby.taobao.org，去掉部分 gem 的版本号限制，咱都用最新的。
  3. Rakefile 用 haml 替换 markdown（这个根据自己喜好来，只要是被支持的），时间改成东八区的，降低主题对 custom 目录的依赖。
  4. _config.yml 这里都是一些定制化的配置信息，比如日期格式、永久链接、新浪微博等。
  5. plugins/sh_js.rb [新增] 代码高亮插件，具体介绍看：Using SHJS for Jekyll
  6. plugins/tag_generator.rb [新增] 其实 Jekyll 是支持 Tag 的，只不过 Octopress 目前没有官方插件支持，所以我自己搞了个，支持中文。
  7. .themes/blog/ [新增] 这个就是我博客的主题了。

OK，现在让我们正式开始。

Step1 - 在本机安装 Octopress 首先，必须先在本机安装配置

Git 和 Ruby，然后就是把 Octopress 源码从 GitHub 上拉下来：

$ git clone git://github.com/jsw0528/octopress.git

运行上面的代码后，你会看到：

Cloning into octopress...
remote: Counting objects: 4103, done.
remote: Compressing objects: 100% (1835/1835), done.
remote: Total 4103 (delta 2341), reused 3556 (delta 1946)
Receiving objects: 100% (4103/4103), 1.03 MiB | 316 KiB/s, done.
Resolving deltas: 100% (2341/2341), done.

现在源码已经在你机子上了，继续：

$ cd octopress
$ bundle install

至此，Octopress 所需的环境已经搭建成功。

Step2 - 安装主题 由于我博客的主题以

submodule 的方式引入了我们前端团队的 基础样式库，所以需要进行下面两步，把样式库的文件全部拉下来：

$ git submodule init
$ git submodule update

现在可以安装主题了，

blog 是主题名称。其实这步就是把 .themes/blog/ 内的两个目录复制到项目根目录。

$ rake install['blog']

Step3 - 连接 GitHub Pages

首先，你得有一个 GitHub 的帐号，并且已经创建了一个新的 Repository。如果你准备用自己的域名的话，Repository 的名称可以随便取，不过正常人在正常情况下，一般都是以域名取名的^_^。如果你没有自己的域名，GitHub 是提供二级域名使用的，但是你得把 Repository 取名为

你的帐号。github.com，并且，部署的时候会占用你的 master 分支。Tips：

  1. 如果用自己的域名，记得把 source/CNAME 文件内的域名改成你的。还有把域名的 A Record 指向 IP：207.97.227.245；
  2. 如果用 GitHub 提供的二级域名，记得把 source/CNAME 删掉； 完成上述准备工作后，运行：
$ rake setup_github_pages

它会提示你输入有读写权限的 Repository Url，这个在 GitHub 上可以找到。Url 形如：

`git@github.com:jsw0528/MrZhang.me.git`，其中，`jsw0528`是我的帐号，`MrZhang.me`是我的Repository的名称。

Step4 - 配置你的博客 所有配置项都在

_config.yml 文件内，用你喜欢的编辑器打开它，然后改成你的数据即可。

Step5 - 为备份 Posts 做准备

数据备份很重要，我们可以把文章备份到另一个分支，比如

store。在安装完主题后，系统会自动创建一个空目录 source/_posts，以后创建的文章都会保存在这个目录内。我们先定位到该目录，然后初始化 git（建议新开一个终端窗口，省得不停地切换目录）：

$ cd source/_posts/
$ git init
$ touch README.md
$ git add *
$ git commit -m 'first commit'
$ git remote add origin git@github.com:[Username]/[Repository].git

commit 即可，无需 push，因为我们重点是要新建

store 分支。接下来我们创建并切换到 store：

$ git checkout -b store

回到刚才的窗口，继续下面的步骤。git 入门，推荐看下

这篇文章，小清新风格。当然，你也可以使用 GitHub for Mac，备份的准备步骤如下：

  1. 把 source/_posts 目录拖到仓库列表界面的左下角，在弹出新建空仓库的确认框后点「Yes」；
  2. 双击进入这个仓库，切换到「Settings」项，填入 git@github.com:[Username]/[Repository].git 后点「Update Remote」；
  3. 回到仓库列表界面，点底部的刷新按钮，刷新成功后，列表上的 _posts 将换成你的仓库名；
  4. 随便创建一个文件，比如上面的 touch README.md；
  5. 再次进入这个仓库，切换到「Changes」项，你会看到刚刚创建的文件了，点「Commit」按钮；
  6. 这个时候可以新建 store 分支了，点软件左下角的分支图标，输入 store，回车。

Step6 - 创建一篇文章 码字时，我们可以先在本地起一个服务，预览无误后再部署。新开一个终端窗口（保证定位到项目根目录），运行

$ rake preview

然后你就可以使用
http://localhost:4000 访问你的本地博客了。创建文章：

$ rake new_post['Hello World']

然后到

source/_posts 目录内找文件名形如 YYYY-MM-DD-hello-world.haml 的文件。用你喜欢的编辑器打开它，码字。如果你对 .themes/blog 内的主题文件做了改动，可以运行下面的命令更新：

$ rake update_source['blog']
$ rake update_style['blog']

Step7 - 部署

先把整个项目静态化，然后再部署到 GitHub：

$ rake generate
$ rake deploy

当你看到「Github Pages deploy complete」后，就表示你大功已成。Enjoy!

Tips： Octopress 提供的所有 rake 方法，可以运行 rake -T 查看。

Step8 - 备份

回到 source/_posts 目录内，运行下面的命令把文章备份到 GitHub 上：

The Why·Liam·Blog by WhyLiam is licensed under a Creative Commons BY-NC-ND 4.0 International License.

由WhyLiam创作并维护的Why·Liam·Blog采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于Why·Liam·Blog (https://blog.naaln.com)，版权所有，侵权必究。

本文永久链接：https://blog.naaln.com/2013/10/blog-github-octopress/