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

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

能够看到以下代码：

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必须与用户名称一致。 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/

---

参考文章：

• 象写程序同样写博客：搭建基于github的博客
• 制做我的博客站（一）：Mac系统下使用 Octopress + GitHub Pages 搭建我的博客
• octopress博客搭建和个性化配置
• Octopress重装或者多台电脑上并行写做同步