搭建octopress博客的文章很详细已经有很多了，文章末尾就有相关的参考，我这里只简单记录下mac电脑上搭建octopress博客的步骤。

1、搭建环境

1
2
3
4
git clone git://github.com/imathis/octopress.git octopress
cd octopress
gem install bundler
bundle install

遇到的问题：

  • gem install bundler失败了，需要更改一下octopress/Gemfile文件当中的源，将第一行source "https://rubygems.org" 更改成 source "http://ruby.taobao.org/"就行了。

  • 如果安装的时候报
    You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory这样的错误，请加上sudo权限。

之后，输入下面命令：

1
rake install

2、将博客部署到github上

在github上创建一个username.github.io的仓库，然后输入下面命令

1
rake setup_github_pages

回车，之后出现下面内容

1
2
3
4
Enter the read/write url for your repository
(For example, '[email protected]:your_username/your_username.github.io.git)
           or 'https://github.com/your_username/your_username.github.io')
Repository url:

粘贴username.github.io仓库对应的url，例如我的就是
https://github.com/liuchungui/liuchungui.github.io.git

3、生成并编辑博客

首先，使用下面命令生成新文章，其中title就是博文名，你也可以输入rake new_post回车，然后在再输入博文名。文章在source/_post/目录下，文件名构成为时间和标题的拼音。可以进入到octopress/source/_posts目录，找到对应的博文进行修改。博文采用的markdown语法，我推荐一款不错的编辑工具Mou，它可以实时编辑实时查看。

1
rake new_post['title']

然后，使用下面命令生成并在本地进行预览。rake preview开启一个web服务，此时就可以预览了，使用localhost:4000打开看查看效果。

1
2
rake generate
rake preview

之后，查看效果没有问题，则使用下面命令上传到github。这条命令会将octopress/public下的文件上传到你的仓库master分支下。

1
rake deploy

最后，将源代码上传到github仓库的source分支下，如下所示：

1
2
3
git add .
git commit -m 'add source file'
git push origin source

4、删除twitter、google相关东西：

  • 修改文件octopress/_config.yml文件，设置title、subtitle、author，注意最好把里面的 twitter 相关的信息全部删掉，否则由于 GFW 的原因，将会造成页面 load 很慢。
    修改头部模块source/_includes/head.html
    将//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js替换成http://cdn.staticfile.org/jquery/1.9.1/jquery.min.js，否则会很慢。
  • 修改定制文件 source/_includes/custom/head.html 把 google 的自定义字体去掉，原因同上。

5、自定义博客

新标签打开网站中第三方链接默认是从当前界面打开，这导致网站浏览者跳转到第三方链接后很难回来。将以下代码加入 source/_includes/custom/head.html文件中，我们是新建一个界面打开，仍然保持当前网页。

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
	function addBlankTargetForLinks () {
		$('a[href^="http"]').each(function(){
			$(this).attr('target', '_blank');
		});
	}
	$(document).bind('DOMNodeInserted', function(event) {
		addBlankTargetForLinks();
	});
</script>

默认情况，所有文字的排头会对齐，但如果有列表项的情况下也如此，列表头就会冲出文章的主体区块了。在 octopress/sass/custom/_layout.scss 文件中找到#$indented-lists: true 行，去掉#注释即可。

1
$indented-lists: true

其它，界面、侧边栏、底部栏、添加top回到顶部等，请参考自定义你的Octopress博客

注意：当自定义了博客时，修改了头、侧边栏、底部栏、添加评论等配置文件后，使用rake generate生成一下。

6、新增

1、发布博客（2016.4.5）

添加这个，是因为某一天不小心使用命令行全删了，后来发现自己的博客只是rake deploy，却没有将源代码的样式和博客的markdown文件提交到github，当时瞬间懵逼，难道要一个一个恢复？因为这件事情，中间还断过一段时间，好在后来一一在另外一个目录下找到了。但是，这种事情不允许再次发生，所以专门写了一个简单的blogPublish脚本。
脚本的内容特别简单，就是deploy文章，然后将源代码push到github上。

1
2
3
4
5
6
#!/bin/bash
rake generate
rake deploy
git add .
git commit -m 'update blog'
git push origin source

2、表格添加边框（2016.4.5）

2016.4.5 为表格添加边框，参考为Octopress追加数据表格的CSS

3、删除博客后，重新搭建（2016.8.1）

前段时间，系统出现问题，硬盘被锁，只能格盘重装，博客自然没了。因为博客已经搭建过，源代码存在我们的source分支下，所以我们只需要执行以下命令就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
#clone下代码
git clone https://github.com/liuchungui/liuchungui.github.io.git
#切换到source分之
git checkout source
#安装
sudo gem install bundler
bundle install
rake install
#预览
rake preview
#发布
git clone https://github.com/liuchungui/liuchungui.github.io.git _deploy
rake deploy

参考

添加评论和分享系统，请参考象写程序一样写博客：搭建基于github的博客

使用 Octopress 2.0 搭建基于 Github Pages 个人博客的详细过程及原理分析

octopress博客搭建和个性化配置

定制Octopress