菜鸟学习使用Octopress+GitHub搭建博客

搭建之前参考过比较多的博客,大多是根据官方Octopress设置教程官方Octopress部署到GitHub教程操作,我这里根据自身的情况做下记录,个人更倾向于按照这个流程去搭建更容易理解。我更推荐读者(如果有的话),先读完整篇博客,再按照octopress官方教程去操作。

熟悉Github Pages

关于GitHub我就不多说了,大把的资料,此外git我也是入门阶段,就不多说废话。在简单的了解过git之后,首先来了解下GitHub Pages

GitHub Pages我个人理解,简单来说就是GitHub提供的网页程序。分为两种类型,一种是个人(或者组织)网址,这种网址需要固定项目名称为username.github.io,因此一个账号有一个,另一种是项目网站,不需要固定项目名称,但是需要固定这个项目上一个分支名为gh-pages,这种类型的网站是和项目相关的,所以可以有多个。

通过 https://pages.github.com 网页上的说明,测试了分别使用命令行和GitHub提供的自动生成工具去创建User Site 和 Projects Site。比较下这四种情况,其实都是按照GitHub的约定,提供一个index.html作为网站入口,至于网站做成什么样子,则是这个index.html里提供的内容了。可以发现通过GitHub自动工具生成的Pages会多一个stylesheets文件夹和params.json文件,姑且不深究这两个文件是做什么的,大概能猜测要么就是index.html里要用的,要么就是GitHub在生成网页时要用到的(感觉会做网页和懂html的童鞋应该很容易就知道这是做什么用的)。

我这里主要目的就是要知道后面octopress到底做了什么,才能在github上搭建博客。通过上面的了解,猜测如果如果对于project site,需要创建gh-pages然后至少要有index.html这个文件来弄出一个首页。

搭建Octopress博客

接下来就是根据 官方Octopress设置教程来配置Octopress了。

修改 RubyGem 默认安装源

这里注意在执行gem install bundler之前,最好重新设置下RubyGem的安装源,虽然我不懂RubyGem到底是什么,不过这个源应该就类似于服务器吧,需要从服务器上下数据,国外的源很慢或者直接访问不到,通过一下方式可以更改。

  1. 通过gem sources查看当前使用的源,默认是https://rubygems.org/
  2. 首先删除那个源gem sources --remove https://rubygems.org/
  3. 使用gem sources -a http://ruby.taobao.org/增加国内淘宝源
  4. 使用gem sources -l确认当前只有ruby.taobao.org这个源

修改bundle的源

Bundler是什么,目前我也不知道。总之在执行bundle insall之前,修改下clone下来的Octopress目录下的Gemfile。将里面source "https://rubygems.org"更改为source "http://ruby.taobao.org/"。这样执行bundle install也会比较快。后面我再测试的时候发现改成了淘宝的这个源反而不行了,直接使用原来的源就可以了

rake install做了些什么

上一步根据Octopress的官方教程进行了配置,最后一步的rake install执行时,可以看到实际在执行一些常用的命令如cpmkdir。主要是从.themes/classic下拷贝source和sass文件夹的内容到当前目录下。另外还构建了两个空目录source/_postspublic原来这里还有一个隐藏文件夹.themes,打开隐藏文件显示,在Finder里出现了不少隐藏文件,这里姑且不管。

Generate & Preview

接下来先不去写博客和部署到GitHub,先来执行一下生成命令rake generate,执行过后去看下clone下的目录,通过修改日期可以看到,public文件夹下的都是刚才增加上去的,另外还有一个source/stylesheets/screen.css

比较一下source文件夹下的内容和public文件夹下的内容,可以发现除了public/sitemap.xml这个文件之外,public文件夹里的内容在source下都有,source还多了_includes、_layouts、_posts三个文件夹。那么到这里我们可以推断,rake generate命令执行的内容大多数就是拷贝文件夹了

接下来执行rake preview,看下命令行提示,大概意思是开启了对source和public的监听,如果发生了改变则会自动generate一下。另外如果需要停止,就按ctrl + C,然后去本地浏览器敲localhost:4000,查看下预览效果。

等了半天终于出来了,这么慢据说有两个原因,第一是因为Octopress的配置里有使用Facebook等被墙了的东东,第二是因为我使用的sifari浏览器。姑且不去验证这些。(可以参考一下这篇博客:解决Octopress博客访问慢的问题

总之从这两个命令去比较文件的变化,主要就是增加了public下的若干文件和文件夹。并且public下面明显的有一个index.html,所以我猜测index.html就说最终网页上看到的主页。不信可以直接在浏览器中打开index.html比较下。

发个博文瞧一瞧

总算到了可以测试博文的环节了,参考官方教程如果使用的时zsh终端,那么要注意对于使用“[]”时是需要转意的,比如rake new_post["title"],就需要写成rake new_post\["title"\]或者noglob rake new_post["title"]才行。当然官方推荐直接在.zshrc中加上alias rake="noglob rake"

执行rake new_post之后,会在source/_posts下生成一个markdown文件(这里以2015-05-29-test.markdown为例),这个文件名是以日期和刚才提供给new_post的那个标题组成的(中文会被转成拼音),再次执行rake generate,然后去看public目录,发现其blog文件夹修改日期发生了更改,这下面多了一个2015/05/29/test/index.html。查看一下这个index.html,正好和我们刚才的markdown文件内容对应。

然后再次rake preview,然后去浏览器查看,就多了刚才的博文了。

啰嗦一下

看了下前面写的,好像有点啰嗦,但这确实就是我自己搭建这个博客研究的过程,我在写当前这段文字的时候,还不是很清楚如何在GitHub上既能保存好octopress的配置,又能正常的写博客发布(参考了别人的博客后,还没进行实践)。

总之到了上面那一步,至少知道了在本地,最终我们预览的时候,其实是针对public目录的,后面部署到GitHub上时,官网也告诉我们其实就是把这个目录下的东西弄到了GitHub上,就能看到Octopress搭建的博客了。而Octopress的源码配置如source目录,plugin目录以及外面的配置文件,可以选择保存到GitHub上,也可以保存在本地。

另外上面我也没有记录自己在测试修改_config.yml这个文件来查看效果时的过程。要注意的主要是permalink这个字段,后面的描述是相对于public的,我写成/blog/:categories/:title.html,这里最后一段写成:title.html,因为我不喜欢所有的博文都生成tittle/index.html这种形式。此外博文markdown文件中的categories:字段,注意冒号后面的必须有空格,多个分类是按顺序嵌套的,不存在则会创建。

开始部署到GitHub

是时候部署一下了。前面根据教程的介绍和自己的观察,发现最终反正就是把博客网站要用的内容全部组织起来放到public文件夹下,然后以index.html为入口点,来呈现博客。所以如果想部署到GitHub上,是不是只要把public文件夹下的内容全部上传到username.github.io项目上就可以了呢?

那就测试一下,从GitHub上clone下来我的个人主页git clone git@github.com:monotone/monotone.github.io,然后拷贝public文件夹下的内容到刚才克隆下来的目录下(注意public下本来就没有.git文件夹,也就是说public文件夹本来是没有受版本库控制的)。接着执行git add *,然后git commit -m "增加静态博客内容",最后git push origin master,就可以去浏览器中输入monotone.github.io浏览效果了。实际结果果然和前面使用localhost:4000看到的一样。

大概知道了原理,这里先清空一下 monotong.github.io版本库,然后根据教程Deploing to Github Pages操作一遍。

首先是rake setup_Github_pages,官方上有说明这个命令执行的操作有:

  1. 要求输入Pages的版本库url,我这里是git@github.com:monotone/monotone.github.io
  2. 重命名原来指向imathis/octopress的地址的originoctopress
  3. 增加Pages的Pages的版本库url作为默认的源,命名为origin
  4. 从master切换到source分支(原来没有就创建source)。
  5. 根据提供的Pages Url来配置博客的url地址。
  6. 在_deploy目录下初始化一个master分支用来发布。

之前使用git remote -v查看原来的源(当前是master分支):

origin git://github.com/imathis/octopress.git (fetch)

origin git://github.com/imathis/octopress.git (push)

执行rake setup_github_pages后的源(注意此时分支已经切换到source了):

octopress git://github.com/imathis/octopress.git (fetch)

octopress git://github.com/imathis/octopress.git (push)

origin git@github.com:monotone/monotone.github.io.git (fetch)

origin git@github.com:monotone/monotone.github.io.git (push)

可以看到原来origin对应的是octopress.git,现在对应成monotone.git了。
继续根据教程执行rake deploygit add . git commit -m 'your message' git push origin source。一切顺利的话,到此就算部署完成了。

概括一下,为了让public目录下的东西能发布到GitHub的master分支下,以呈现我们的博客,而又不会同时把octopress的源码放上去,可以单独的把public目录加到monotone.github.io项目的master分支中,Octopress这里是另外弄了一个目录叫_deploy。所以上面的操作首先更改原来octopress.git项目的源的名称origin为octopress,然后将我的源monotone.git更名为origin,然后将_deploy目录加入到monotone.git项目的master分支中。后面执行rake deploy其实就是把public目录下的东西拷贝到_deploy中,然后发布到monotone.git的Master分钟上去。最后执行的git add .git comit -m 'your message'git push origin source这三部,就是将octopress的源码提交到monotone.git的source中去,这样在monotone.git下,就存在两个分支了,并且既保存了我们的博客,又保存了octopress的源码配置,如果我们有更改配置,就提交到source,如果新发布了博客,就提交到master。

总结

我这么懒的人总算驱使自己断断续续的写完了这么长的博客,这个过程增加了我对octopress搭建博客的理解和git命令的熟练度,当然也增加了我对markdown语法的熟练度。

最后的最后,整理一遍搭建这个环境的流程:

  1. 创建空的GitHub个人用户网址项目monotone.github.io
  2. 克隆octopress到本地:git clone git@github.com:imathis/octopress.git
  3. 进入到octopress目录:cd octopress
  4. 修改淘宝源,然后安装bundler:gem sources --remove https://rubygems.org/gem sources --a http://ruby.taobao.org/sudo gem install bundler
  5. 搭建bundle环境:bundle install
  6. 安装默认主题:rake install
  7. 去掉那些需要连接被墙网站的插件(可选)
  8. 关联GitHub:rake setup_github_pages
  9. 部署到GitHub:rake deploy
  10. 上传octopress源码配置:git add .git commit -m "message"git push origin source
  11. 去浏览器中输入:monotone.github.io