[置顶] 在github上搭建octopress博客 Mac

最早的时候,是看见了唐巧大哥的博客,UI上已是觉得耳目一新。后来读到过阮一峰的博文,当知道这是搭建在Github这个程序员的facebook上时,更是心头一震,什么时候自己也搭这么个博客呢。直接用github托管代码,完全不用自己租服务器,实在方便。自己之前也有在csdn上维护了一个博客,虽然那已经是一年前的事情了。 <!--more-->深刻的记得,当时想将自己的weibo账户贴到博客页面上,却发现它不支持一般用户嵌入javascript代码:(。这更让我对octopress的感情与日俱增。

今天终于动手啦。自己从网上搜到了很多中文的博客描述如何安装配置octopress,有些博客讲得算是清晰,但终归每台电脑有不同的环境,每个人的叙述也或多或少的主观。最要命的是,我发现好几篇博文所讲述的命令都不太一样,走了不少弯路之后,倒腾了一下午,最终还是官网救了我。这也让我进一步认识到,信息的流通中的失真在所难免,最好的方法还是直接探寻最权威的内容。

如果对octopress不太了解,不用急着动手,首先看看几个概念。(当然,lz现在也并非精通这几点,初来乍到的,先做出来再说,以后不断学习...)

  • Ruby:octopress框架的实现语言。rvm(ruby version manager)是用于管理ruby版本的,rake是ruby中类似于make工具。
  • 静态站点生成工具:简单地说,不用数据库,直接生成网页文件。Jekyll就是这样的工具,而octopress是构建于它的上层的框架。
  • Git:我主观的认为完虐svn的分布式版本控制工具。git官网貌似被gfw墙了=.=
  • Github:程序员的Facebook,为程序员托管了很多代码的站点。
  • Github pages:github推出的,给与程序员自由创造静态网页的功能。支持Jekyll,因此也支持octopress。
  • homebrew:mac os下的软件包管理工具,类似于linux下的dpkg。它使用ruby脚本,mac os下自带了ruby。
  • octopress 其官网的help中有搭建octopress的足够的权威指导
  • YAML: YAML 试图用一种比 XML 更敏捷的方式,来完成 XML 所完成的任务。在octopress中,是使用yaml做配置文件的书写的。

窃以为,最好的学习方式还是从最源头的资料入手。这里仅针对我的配置过程做简单描述,经验浅薄,有差错的地方还请指教:)

1. 配环境

1.0 homebrew

万事开头难,第一步还是配环境。为了软件包安装的方便,可以先安装好homebrew.

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

其使用方法,参见官网。

1.1 ruby

mac os x 10.8.1 的系统自带了Ruby,但是版本是1.8.3,而octopress官网所支持的最新版是1.9.3(2013.3),兼容起见,先对版本进行升级。

$ rvm install 1.9.3 && rvm use 1.9.3 
$ rvm ruby gems latest

lz在升级过程中遇到了奇怪的错误,于是又参考另一篇博文,重新安装了rvm,再升级ruby到1.9.3版本。

1.2 git

使用homebrew安装git。

$ brew install git

2. 搭建octopress

环境配置完成后,就可以开始参照官网的指导搭建octopress,并在github建代码仓库,同步管理啦。

3. 配置

具体配置同见官网。

在配置_config.yml的过程中要注意,配置项的:后有空格。否则会报错。

另附个性化配置方案:(这些内容大都能在官网文档中找到)

3.1 装饰边栏(加weibo、豆瓣信息)

3.2 增加weibo评论: 友言版

3.3 CNAME

如果你有自己的域名,可以CNAME到github pages上。以我的配置为例。

1.在工作目录的source目录下创建CNAME文件,并输入新域名:biaobiaoqi.com

2.在域名管理中,创建或修改A记录,指向204.232.175.78这个地址。

3.创建CNAME记录,www.biaobiaoqi.com -> biaobiaoqi.github.com

网上很多CNAME的操作指南,对于A记录的IP都写着~~207.97.227.245~~,或者其他的IP。实际上,这是github pages更换了地址所致。再一次证明**官方文档才是最可靠的!**

3.4 让链接在新窗口中打开

markdown不支持这一语法,如果要自己用html标签实现,也太得不偿失了。参考这篇博文,可以通过将如下代码添加到 {OCTOPRESS_HOME}/source/_includes/custom/head.html文件末尾来实现:

<script type="text/javascript">
function addBlankTargetForLinks () {
  $('a[href^="http"]').each(function(){
      $(this).attr('target', '_blank');
  });
}

$(document).bind('DOMNodeInserted', function(event) {
  addBlankTargetForLinks();
});
</script>

3.5 列表的排版

默认情况,所有文字的排头会对齐,但如果有列表项的情况下也如此,列表头就会冲出文章的主体区块了。

在octopress/sass/custom/_layout.scss文件中找到#$indented-lists: true行,去掉#注释即可。

$indented-lists: true

3.6 404ERROR页面

在ocotopress/source目录下,增加404.markdown,并做出自定义的呃编辑。本博客使用了腾讯公益404,推荐大家使用,为社会贡献一分正能量。公益404

---
layout: page
title: "404 Error"
date: 2013-4-21 02:35
comments: false
sharing: false
footer: false
---
<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>

4. 发博文和在线部署

同样的,参考官网即可。 这里大致的列出我所常用到的几条命令:


#创建一篇博文
rake new_post["post title"] #octopress将在工作目录的source/_post/目录下生成相应的markdown文件。然后可以使用mou工具去修改编辑内容。

#生成预览
rake preview #可以通过localhost:4000在本机实时观察最新的编辑效果。

#在线发布
rake deploy #完成编辑后,可以将最新的内容部署到github上去。成功后,即可在线访问。

#向github提交源文件更新
git add -A
git commit -m "提交内容"
git push


其中推荐到的mou,是一个mac下的markdown编辑器。试用后发现有些格式兼容问题,但似乎mac下也只有他这个可视化工具了=。=

另附markdown语法



PS:博客地址: http://biaobiaoqi.me/

你可能感兴趣的:([置顶] 在github上搭建octopress博客 Mac)