Octopress + GitHub Page 搭建个人博客

时间：2022-11-25 06:11:57

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

1

2

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源替换成国内淘宝的源。

1

2

3

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编辑主要配置

Octopress + GitHub Page 搭建个人博客

可以看到如下代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

#      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必须与用户名称一致。
Octopress + GitHub Page 搭建个人博客
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命令来更新的。
1

2

3

4

git checkout source

git add .

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

git push origin source

git操作代码如下：

1

2

3

4

5

6

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/

参考文章：

相关文章