Octopress + GitHub Page 搭建个人博客

Tips:博客已搬家，新地址:http://wanxudong.top

首先说明两个关键术语：

Octopress

Octopress是基于 Jekyll 的博客框架。他们的关系就像 jQuery 与 js 的关系一样。
它为我们提供了现成的美观的主题模板，并且配置简单，使用方便，大大降低了我们建站的门槛。

What is Octopress?(摘自Octopress官方文档)

Octopress is Jekyll blogging at its finest.
Octopress sports a clean responsive theme written in semantic HTML5, focused on readability and friendliness toward mobile devices.
Code blogging is easy and beautiful. Embed code (with Solarized styling) in your posts from gists, jsFiddle or from your filesystem.
Third party integration is simple with built-in support for Pinboard, Delicious, GitHub Repositories, Disqus Comments and Google Analytics.
It’s easy to use. A collection of rake tasks simplifies development and makes deploying a cinch.
Ships with great plug-ins some original and others from the Jekyll community — tested and improved.

Note: Octopress requires a minimum Ruby version of 1.9.3-p0.

GitHub Pages

GitHub Pages 是 GitHub 提供的一项服务。它用于显示托管在 GitHub 上的静态网页。所以我们可以用 Github Pages 搭建博客，当然我们也可以把项目的文档和主页放在上面。

大致思路是通过Octopress生成本地静态博客网页，然后将静态网页布置到GitHub提供的GitHub Pages上面。

安装

下面是具体的安装步骤(这里使用RVM安装，还可以通过rbenv安装，Octopress给出的官方安装文档：Octopress Setup)：

查看ruby版本

1	`ruby --version # 根据Octopress官方文档Ruby必须 >= 1.9.3-p0`

如果ruby版本 >= 1.9.3-p0 ，跳过RVM和Ruby的安装。

安装RVM

1	`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

安装 Octopress

将 Octopress的项目clone到本地:

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

更新ruby源,将官方的ruby源替换成国内淘宝的源。

gem sources --remove https://rubygems.org/

gem sources -a https://ruby.taobao.org/

gem sources -l

接下来，安装依赖：

1 2	`gem install bundler # 若遇权限问题加上sudo重新执行，并输入密码。 bundle install`

最后安装 Octopress

1	`rake install # 安装octopress默认主题`

修改Octopress初始配置

1 2	`ls # 查看当前目录所有文件 vim _config.yml # 通过vim编辑主要配置`

可以看到如下代码：

# ----------------------- #

#      Main Configs       #

# ----------------------- #

#网站地址，这里是GitHub项目地址,为必填

url: http://userName.github.io

#网站标题

title: user的博客

#网站副标题

subtitle: 天行健，君子以自强不息。

#网址作者

author: userName

#搜索引擎

simple_search: https://www.google.com/search

#网站的描述，出现在HTML页面中的 meta 中的 description

description:

确保在octopress目录，执行命令

1 2	`rake generate # 生成静态站点 rake preview # 预览静态站点，在http://localhost:4000`

在浏览器输入localhost:4000可看到生成的博客。
Tips: 最好把里面的twitter相关的信息全部删掉，否则由于GFW的原因，将会造成页面load很慢。

部署到GitHub Pages上

在 GitHub 上创建一个New repository,Repository name即项目名称命名规则为 userName.github.io，userName必须与用户名称一致。

Tips:最好不要勾选README，免得同步到远程仓库的时候需要做额外的pull操作。

将本地代码仓库同步到GitHub.

1	`rake setup_github_pages`

绑定远程仓库

1	`git@github.com:your_username/your_username.github.io.git # 或者https://github.com/your_username/your_username.github.io`

创建一篇文章

1	`rake new_post["title"]`

生成新的文章在source/_posts/目录下

1 2	`cd source/_posts # 命令行cd到posts目录下 open ./ # 打开目录文件夹`

这个时候会在目录里看到.markdown后缀的文件，我们可以通过一些第三方的Markdown编辑器打开。在这里我使用的是Mou(下载地址：这里)，Mou附带实时预览，文档说明里也将markdown语法说的很详细，这里不再赘述。

编辑完成后生成静态站点，终端执行命令：

1	`rake generate # 此命令需在octopress根目录执行，若当前目录为source/_posts，执行两次cd ..返回到根目录再执行此命令。`

预览本地的站点，执行指令：

1	`rake preview`

在浏览器打开localhost:4000 查看网页效果效果。如果没有问题可以将静态站点同步到 GitHub远程仓库中。执行命令

1	`rake deploy ＃同步到GitHub服务器`

打开GitHub稍等一会儿，就会看到我们的静态网页已经被同步到GitHub仓库的master分支上了。浏览器访问访问username.github.io，就会发现个人博客已经创建成功。

最后，创建source分支。Octopress的Git仓库(repository)有两个分支，分别是master和source。

source分支存储的是生成博客的源文件，在octopress根目录下。
master分支存储的是博客网站本身master的内容，在根目录的_deploy文件夹内，当你push源文件时会忽略，它使用的是rake deploy命令来更新的。

git checkout source

git add .

git commit -m "comment"     ＃"comment"为提交的log日志

git push origin source

git操作代码如下：

git remote -v               # 显示所有远程仓库

git pull origin source      # 取回远程仓库的变化

git branch                  # 列出所有本地分支

git checkout [branch-name]  # 切换到指定分支，并更新工作区

git merge [branch]          # 合并指定分支到当前分支

git log                     # 查看当前分支的版本历史

Tips: 关于Octopress的个性化配置和在多台设备间同步使用，会在之后的文章中更新。

原文地址：http://wanxudong.top/blog/2017/04/07/octopress-plus-github-page-da-jian-ge-ren-bo-ke/

参考文章：