Project RC

一种标准阿西的设计与实现。

用 Octopress 在 GitHub 上搭建博客

创建于 更新于
分类:Misc
标签:OctopressBlog

1. Octopress 是什么

Octopress 官网给出的引言如下:

First, I want to stress that Octopress is a blogging framework for hackers. You should be comfortable running shell commands and familiar with the basics of Git. If that sounds daunting, Octopress probably isn't for you.

意思是:首先,我想强调一下,Octopress 是为黑客而生的博客框架。你需要熟悉如何运行 shell 命令以及 Git 的一些基础知识。如果这些前提技能你听到就头疼,那么 Octopress 可能并不适合你。

其实,这个引言绝对有点夸张了,那么我的理解是,你只需要有一个经得起折腾的心脏和大脑,知道怎么在网上搜索,那么用 Octopress 就没什么问题。即使你没有它说的那些基础,只要照着步骤做就可以完成,甚至通过搭建博客这个过程,你会收获「熟悉如何运行 shell 命令以及 Git 的一些基础知识」这样一个结果,只要你肯动脑。

本教程适用于 Windows 和 OS X 系统。

2. 安装依赖程序(Windows)

使用 Windows 平台的话,需要安装的依赖程序较多。

首先把下面 4 个全下载好:

注:如果这些链接失效你可以自行谷歌,很容易找到下载。

安装 Git

双击刚下载的 Git-1.8.5.2-preview20131230.exe,一路 Next。

安装 Ruby

同样一路 Next,不过要勾选「Add Ruby executables to your PATH」,将 Ruby 的执行路径加入到环境变量中,如果忘记勾选,也可以手动设置。安装完后可以在命令提示符中输入 cd c:\ 进入 C 盘目录之后执行 ruby –version 来确认是否安装成功。

安装 DevKit

DevKit 下载下来的是一个自解压文件,我们将其解压到 D:\DevKit,当然也可以解压到其他目录,但有两点需要注意:

  • 解压目录中没有有中文和空格;
  • 必须先安装 Ruby,而且 Ruby 需要是 RubyInstallser 安装。

解压 DevKit 后,在命令行输入以下命令来进行安装:

d: #注意 Windows 的命令提示符中进入盘符要直接输入盘符
cd DevKit #进入文件夹用 cd 命令,教程后面将直接用 cd 来表示
ruby dk.rb init
ruby dk.rb install

安装 Python

安装 Python,也是一路 Next 就可以,博客的代码高亮用到了 Python 的 Pygments 模块,在 Python 中安装第三方库需要使用 easy_install,下载 https://bitbucket.org/pypa/setuptools/raw/bootstrap/ez_setup.py,下好后打开命令提示符,输入 cd C:\Python27 进入 Python 安装目录,然后再输入下面命令来安装 easy_install

python PATH/ez_setup.py install

这里的 PATH 是你刚刚下载的 ez_setup.py 的保存位置。

安装好之后在 C:\Python27\Scripts 目录下可以看到 easy_install.exe 等文件,表示安装成功。

右击我的电脑,进入属性-高级系统设置-高级-环境变量,在用户变量下可以看到之前安装 Ruby 时它自动添加了一个名为 Path 的环境变量,双击它打开编辑窗口,在变量值的最后添加一个英文分号,在添加 C:\Python27\Scripts,完成后点几个确定关闭窗口,重新打开命令提示符输入 echo %PATH% 查看输出结果中有没有 C:\Python27\Scripts,有则表示设置成功。

在命令提示符中依次下面命令就可以安装 Pygments 了:

cd C:\Python27\Scripts
easy_install pigments

3. 安装依赖程序(OS X)

由于 OS X 是自带 Git 和 Python 的,所以只需要安装 Ruby。

安装 Ruby

首先在终端运行下面命令,来安装 RVM:

curl -L https://get.rvm.io | bash -s stable —ruby

接着顺次运行下面命令,来安装 Ruby 1.9.3:

rvm install 1.9.3
rvm use 1.9.3
rvm rubygems latest

完成后运行 ruby —version,不出意外的话这里就可以看到 ruby 1.9.3 安装好了。

4. 安装 Octopress

首先如果是 Windows 的话,在开始菜单找到 Git Bash 运行,输入 cd d: 来进入 D 盘(当然也可以换成其它路径),OS X 的话在终端同样可以用 cd 命令来进入指定目录,但默认的目录就可以了。

在终端/Git Bash 中运行下面命令:

git clone git://github.com/imathis/octopress.git octopress

接着在终端/命令提示符中使用 cd 命令进入刚才创建的 octopress 目录。使用下面命令安装相关依赖:

gem install bundler
bundle install

这两条命令可能需要不少时间,请耐心等待。在 OS X 上第二条命令执行时如果提示错误,可将第一条命令前面加 sudo 和空格,会提示输入密码从而获取超级用户权限。Windows 上并没有发现提示错误。

最后是安装默认 Octopress 主题:

rake install

这时候安装就完成了,如果你迫不及待的想看一下成果,就运行下面命令:

rake preview

然后在浏览器中输入 localhost:4000 来预览。

5. 配置 Octopress

整个框架的主要配置信息在 octopress 主目录的 _config.yml 文件中,这个文件中有三大部分,分别是 Main Configs、Jekyll & Plugins 和 3rd Party Settings。url 先不管,我们之后再填,先把 titlesubtitleauthor 冒号后面的内容改称你想要的,然后我们看到 3rd Party Settings,可以填写一些网站的账号,Twitter、Google Plus、Facebook 之类的如果你没有就可以删掉。关于这个文件里面更多的内容请看 官方的帮助文档

然后就是主题,我们之前安装了默认的主题,但是如果你觉得太丑,是可以更换主题或者自己制作的,这里 有一些别人制作好的主题。安装主题的基本步骤如下:

cd octopress
git clone GIT_URL .themes/THEME_NAME
rake install['THEME_NAME']
rake generate

如果用 Windows 的话,这里的 git 命令是需要在 Git Bash 中运行的,后面的所有 git 命令也都要在 Git Bash 中才能运行,而其他命令在命令提示符运行,别忘了都要先 cdoctopress 目录。

安装好主题后,像之前说的,运行 rake preview 就可以在浏览器预览,如果你想自己调整主题,那就自己摸索吧。

有一个建议就是删掉 /source/_includes/custom/head.html 中的添加 Google 字体的代码,这样可以加快国内的访问速度。

Octopress 在 Windows 上存在中文编码问题,可以通过下面步骤解决:

  • 在环境变量中添加下面的键值对:
LANG=zh_CN.UTF-8
LC_ALL=zh_CN.UTF-8
  • 含有中文的文件需要保存为 UTF-8 无 BOM 格式编码。
  • 在 Ruby 的安装路径找到文件 convertible.rbC:\Ruby193\lib\ruby\gems\1.9.1\gems\jekyll-0.12.0\lib\jekyll\convertible.rb),将 self.content = File.read(File.join(base, name)) 替换为:
self.content = File.read(File.join(base, name), :encoding => ‘utf-8')

6. 添加新文章

现在博客基本上配置好了,但是还空空如也,正等着你去展示文采,所以下面来讲怎么添加新文章。

还是在终端/命令提示符,先用 cd 进入到 octopress 主目录,然后执行下面命令:

rake new_post[‘title’]

这里的 title 并不一定需要是文章的标题,它其实是生成的文件名的一部分,也是 URL 的一部分,尽量不要用中文。

命令执行后生成的文件在 octopress/source/_post/ 目录中可以找到,这个文件的格式是 markdown,可以用文本编辑器打开,当然最好是找一款专门编辑 Markdown 文件的编辑器,Windows 推荐 MarkdownPad,OS X推荐 Mou。Markdown 是一种轻量级的标记语言,很容易学,甚至可以在需要时再去查询它的语法,可以在 http://squidv.com/octopress-markdown/ 查询。

这个文件的最上面几行是默认生成的,Octopress 框架通过它们来获取文章的标题、分类等属性,这里的 title 就是文章真正的标题,你可以按自己需要修改这几项属性。如果你想暂时不公开发表这篇文章,那么可以在这里添加一条属性 published: false,等你想公开发表的时候把 false 改称 true 就可以了。

文章写好后保存,然后执行:

rake generate

执行这个命令不需要关闭之前运行着 rake preview 命令的窗口,直接新建窗口运行该命令即可,生成完毕后,刚才的 rake preview 命令会自动更新内容,同样在浏览器中可以预览。

7. 发布到 GitHub

说了这么多,我们的博客别人看不到,那等于白忙,所以我们要把博客部署到 GitHub,至于 GitHub 是什么可以自己去维基百科了解。

在这里你需要在 官网 注册一个 GitHub 账号,然后到个人页面在 Repositories 页面点「New」按钮新建一个仓库,仓库名称命名为 username.github.iousername 就是你的用户名,README.md 创不创建无所谓。我们的博客的源码将会放到这个仓库的 source 分支,而博客内容放在 master 分支,这个懂不懂没关系。

_config.yml 文件中的 url 后面填上 http://username.github.iousername 就是你的 GitHub 账户名。

在终端/Git Bash 执行下面命令:

rake setup_github_pages

按提示输入刚才创建的仓库地址。

完成后执行:

rake deploy

这个命令将会把博客内容 commitpush 到仓库的 master 分支,就像我们前面说的,博客内容在 master 分支。

如果这一步提示 Permission denied(publickey) 这类错误,请参考 GitHub 的官方帮助文档 Generating SSH Keys,按其步骤生成 SHH Key,之后再从 rake setup_github_pages 命令开始重试。

现在已经可以通过 username.github.io 访问你的博客了(可能有较长时间的延迟,请一定要耐心等待)。

我们还需要把源码给放到仓库的 source 分支,依次执行下面命令:

git add .
git commit -am 'your commit message'
git push origin source

引号里面不限制内容,相当于对这次做的更改进行的备注。

教程到这其实基本结束了,如果你想学习更多内容,那么请看我的另一篇文章 Octopress 搭建博客总结以及可选功能

评论