搭建之前参考过比较多的博客,大多是根据官方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到底是什么,不过这个源应该就类似于服务器吧,需要从服务器上下数据,国外的源很慢或者直接访问不到,通过一下方式可以更改。
- 通过
gem sources
查看当前使用的源,默认是https://rubygems.org/
- 首先删除那个源
gem sources --remove https://rubygems.org/
- 使用
gem sources -a http://ruby.taobao.org/
增加国内淘宝源 - 使用
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
执行时,可以看到实际在执行一些常用的命令如cp
和mkdir
。主要是从.themes/classic
下拷贝source和sass文件夹的内容到当前目录下。另外还构建了两个空目录source/_posts
和public
。原来这里还有一个隐藏文件夹.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
,官方上有说明这个命令执行的操作有:
- 要求输入Pages的版本库url,我这里是
git@github.com:monotone/monotone.github.io
- 重命名原来指向
imathis/octopress
的地址的origin
为octopress
。 - 增加Pages的Pages的版本库url作为默认的源,命名为
origin
。 - 从master切换到source分支(原来没有就创建source)。
- 根据提供的Pages Url来配置博客的url地址。
- 在_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 deploy
和git 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语法的熟练度。
最后的最后,整理一遍搭建这个环境的流程:
- 创建空的GitHub个人用户网址项目monotone.github.io
- 克隆octopress到本地:
git clone git@github.com:imathis/octopress.git
- 进入到octopress目录:
cd octopress
- 修改淘宝源,然后安装bundler:
gem sources --remove https://rubygems.org/
,gem sources --a http://ruby.taobao.org/
,sudo gem install bundler
- 搭建bundle环境:
bundle install
- 安装默认主题:
rake install
- 去掉那些需要连接被墙网站的插件(可选)
- 关联GitHub:
rake setup_github_pages
- 部署到GitHub:
rake deploy
- 上传octopress源码配置:
git add .
、git commit -m "message"
、git push origin source
- 去浏览器中输入:
monotone.github.io