Xway

The world is full of fascinating problems waiting to be solved~.

Octopress折腾记

| Comments

年初，发现很多技术博客（特别是喜好ruby的）都换了新面孔，简洁大气，开始还以为是wordpress的new theme，后来发现不是，他们用了Ocotopress，其中贴代码的部分十分漂亮，让我心动不已，自己本来有个wordpress的博客在SAE上，但老要买云豆很不爽，于是也摆弄摆弄Octopress，顺便把尘封已久的github账号拿出来抖抖灰，抽空折腾了两天，小记一下，我是将其部署至github，本地系统为mac，整个过程参考了此处。

了解

环境

如果你已经安装了最新的git和ruby，请忽略。

github

安装Octopress

下载Octopress

git clone git://github.com/imathis/octopress.git octopress
cd octopress # 如果使用 RVM, 这里将会询问是否信任该 .rvmrc (选yes).
ruby --version # 应该大于 Ruby 1.9.2

.rvmrc文件中默认的ruby版本是1.9.2，假如你的ruby版本高于1.9.2，修改它。

安装相应的gem

bundle update

生成模板文件

rake install

部署至github

连接至github

rake setup_github_pages

输入url地址，形如

git@github.com:username/username.github.com.git

生成静态页面

rake generate

本地预览

rake preview

访问http://localhost:4000 查看本地效果，用ctrl+c可结束 。

部署

rake deploy

访问 http://username.github.com 查看博客服务器效果 。

更新Octopress

每过一段时间，可能需要更新一下Octopress版本，使之保持最新。

配置博客信息

修改Octopress/_config.yml，参考http://octopress.org/docs/configuring/ ，示例如下，若包含中文，请将文件格式保存成utf-8的格式。

url: http://kleistx.github.com/
title: Xway
subtitle: 
author: xway
simple_search: http://google.com/search
description:

创建新文章

rake new_post["article name"]

文章创建后，可在source/_post文件夹下找到，推荐使用Mou编辑，更新之后需要重新生成静态页面，并重新部署。

rake generate
rake deploy

使用Disqus评论系统

注册一个Disqus账号，记住shortname，然后打开”_config.yml”，找到disqus相关的配置项，修改即可：

#Disqus Comments
disqus_short_name: xway
disqus_show_comment_count: true

记住冒号后面是有空格的。

贴代码

Octopress使用了pygments，所以支持多种编程语言的代码，具体方法见此处，我常用的方式是：

｛% codeblock %｝
  Awesome code snippet
｛% endcodeblock  %｝

效果如下：

1

Awesome code snippet

或者

｛% codeblock Time to be Awesome - awesome.rb %｝
  puts "Awesome!" unless lame
｛% endcodeblock %｝

效果如下：

Time to be Awesome - awesome.rb 
1

puts "Awesome!" unless lame

添加新页面

例如在导航中增加'About' ,首先：

rake new_page["page name"]

会在在source下新建about目录，并在里面添加index.markdown文件。
然后，编辑导航条source/_includes/custom/navigation.html ，添加上

<li><a href="/about">About</a></li>

首页只显示摘要

在文中加入<!--more-->来控制摘要截取位置。
修改_config.yml里的excerpt_link。

修改标题字体

先去google webfonts挑两款字体，将生成的链接拷贝下来，加入 /source/_includes/custom/head.html 。
然后修改 sass/custom/_font.scss，分别将标题和副标题的字体设置为刚才挑选的两款。

保存源代码

在项目里建立source分支用于保存所有的代码（配置，sass，文章）。

git add .
git commit -m 'blog'
git push origin source

Comments