浮生猎趣

ls *.fun >> 罗列一切乐趣

用Octopress在Github搭建博客,并绑定独立域名

| Comments

11月中旬在Godaddy购买了一个域名,一直没派上用场,想到经常在各个个人博客找到各种问题的解决方案,于是决定先成立一个博客,记录并分享一些浮生小记、程序问题、解决方案,顺便在互联网上表示,“来过”。

这是第一篇博文,记录一下使用Octopress搭建博客,发布到Github Pages免费空间,并绑定个人域名的步骤。

概述

什么是Github Pages

Github Pages Github提供的一个免费空间,拥有一个独立的二级域名,允许开发者提交静态网页文件,用于介绍自己,或者自己的开源项目,可以看作是个人或项目主页。每个Pages有300M的存储空间,于是很多人就当作个人博客来发布博文。特点:

  • 轻量级,配置简单
  • 无需自己提供空间
  • 使用标记语言,如Markdown
  • 可以绑定独立域名

什么是Octopress

Octopress主页上的标语“A blogging framework for hackers”就可以看出,这是一个比较Geek的博客系统,提供了一套自动化的工具和模板,帮助用户简便地创建一个博客。

Octopress生成的博客可以很方便地部署到Github Pages上,网上已有很多教程介绍怎么利用Octopress在Github上搭建博客。不过,由于生成的博客都是静态文件,所以也可以部署到任何一个服务器上。随着Wordpress越来越臃肿庞大,相对而言更加方便快捷的Octopress则日渐流行。特点:

  • 以Ruby为运行环境,使用简单的命令生成静态页面
  • 默认使用Markdown语法
  • 可离线编写博文,方便备份、预览
  • 可从Wordpress迁移过来

安装

安装Git

以Mac系统为例,安装Git的方法有很多,这里只说两种:

  1. 下载git-osx-installer安装包,使用Gui安装。
  2. 使用Homebrew的包管理工具,命令行安装。

前者无需多说,后者的命令如下:

1
$ sudo brew install git

安装后,运行下面命令查看是否成功:

1
$ which git    

应该得到/usr/bin/git,说明已成功安装git。

安装Rvm和Ruby

安装Rvm:

1
curl -L https://get.rvm.io | bash -s stable --ruby

安装Ruby1.9.3(或更新版本):

1
2
rvm install ruby-2.0.0-p353  && rvm use ruby-2.0.0-p353
rvm rubygems latest

官方文档建议安装1.9.3版本,不过我安装的是2.0.0,一样可用。

安装Octopress

按官方文档http://octopress.org/docs/setup/操作即可,下面简述步骤,及可能会出现的问题。

利用终端,或Finder在本地建立一个用于存放Octopress的文件夹,并在终端切换到该目录,然后按以下步骤操作。

1)从Github将源码clone下来:

1
2
git clone git://github.com/imathis/octopress.git octopress
cd octopress

2)安装依赖:

1
2
3
gem install bundler
rbenv rehash    # If you use rbenv, rehash to be able to run the bundle command
bundle install

这里可能会很慢,因为国内访问官方的ruby更新源速度奇慢……解决方法是,修改gem更新源地址。输入以下命令:

1
2
3
gem sources -a http://ruby.taobao.org/
gem sources -r http://rubygems.org/
gem sources -l

然后更改Octopress目录下的Gemfile文件,将source "http://rubygems.org/" 改为 source "http://ruby.taobao.org/",保存,再运行2)安装依赖的命令就一气呵成了。

3)安装默认主题

1
rake install

4)测试。 这时已经安装成功了,下面两天命令可以生成本地静态页面并在4000端口启动预览:

1
2
rake generate
rake preview

打开浏览器输入http://localhost:4000就可以看到预览页面了。

部署

下面介绍怎么将本地博客发布到Github Pages上。

创建Github Pages

注册github账号

首先我们得注册一个github账号,如果不打算绑定独立域名的话,这个账号就是你github pages的域名,如:yourname.github.io,所以要考虑好账号名。注册地址:https://github.com/join

创建git repository

注册后,创建一个名为yourname.github.com的代码仓库,yourname是你的帐号名,不要省略后面的.github.com

设置博客使用的git repository的路径

1
2
3
 $ rake setup_github_pages
Enter the read/write url for your repository(For example, 'git@github.com:your_username/your_username.github.io.git) or 'https://github.com/your_username/your_username.github.io')
$ Repository url:

这里会提示让你输入刚才创建的代码仓库地址,请输入:git@github.com:yourname/yourname.github.com.git

这个步骤,rake会做以下事情:

  1. 修改.git/config中的origin为你输入的repos,并把原来的origin写到Octopress中。
  2. 创建source分支并切换到该分支。
  3. 在生成的_deploy目录下初始化git repos

设置SSH key

1)终端输入:

 ssh-keygen -t rsa -C "yourname@mail.com" #输入你的注册邮箱

2)按照提示输入两次短语:

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/name/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 

回车后,会看到:

Your public key has been saved in /Users/name/.ssh/id_rsa.pub.

3)打开id_ras.pub文件,复制里面的内容,等一下会用到。

4)登录github,在右上角用户名旁找到“设置”图标,点击进入设置页面进入SSH Public Keys

5)点击右边的Add another public key

6)在Title输入名称,在Key粘贴刚才自己复制的公钥,点击Add key即可。

7)输入以下命令测试ssh:

1
ssh -T git@github.com

将会看到下面输出:

he authenticity of host ‘github.com (192.30.252.128)’ can’t be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

输入yes,回车,就会看到:

Hi yourname! You’ve successfully authenticated, but GitHub does not provide shell access.

8)设置个人信息

$ git config --global user.name "yourname"
$ git config --global user.email "yourname@mail.com"

创建好yourname.github.io项目之后,提交一个index.html文件,然后push到Github的master分支。第一次页面生效需要大概10分钟左右。生效之后,访问yourname.github.io就可以看到你上传的页面了。

配置Octopress

标题与副标题

打开_config.yml,按照注释,修改主页的配置。

如果需要每次更改后都重新生成,添加一行:

auto: true

可以参考唐巧的博文《象写程序一样写博客:搭建基于github的博客》,删除Twitter相关的配置和会拖慢访问速度的Google字体。

修改主题

比如,想要使用darkstripes主题,切换到Octopress目录,使用如下命令:

1
2
3
$ git clone git://github.com/amelandri/darkstripes.git .themes/darkstripes
$ rake install['darkstripes']
$ rake generate

撰写并发布博文

1)创建第一篇博文

这时候我们的部署已经完成,可以创建自己的第一篇博文了:

1
$ rake new_post["My first blog"]

这会在source/_posts下创建一个以时间和标题为名称的markdown文件,这就是创建的第一篇博文。

2)编辑文章

也就是修改source/_posts下的.markdown文件。可以使用自己喜欢的编辑器,比如Vim,或者Mou,和Sublime text2之类。

3)预览和发布 输入以下命令,访问访问 http://localhost:4000查看预览。

1
$ rake preview

觉得没有问题之后,发布:

1
$ rake gen_deploy

这个命令会生成页面到_deploy并提交代码到repos,如果一切顺利,十分钟左右就可以在http://yourname.github.comhttp://yourname.github.io 访问你的博客主页了。

4)保存更改,提交source

1
2
3
$ git add .
$ git commit -m "Source code of my blog"
$ git push origin source

5)总结一下写博客的流程:

  • rake new_post[“Title”],生成博文模板,修改生成的Markdown文件。
  • rake generate,生成静态文件
  • rake preview,在本机4000端口生成预览
  • rake deploy,发布

绑定域名

要想让username.github.io能通过你自己的域名来访问,需要在项目的根目录下新建一个名为CNAME的文件,文件内容形如:yourdomain.com 你也可以绑定在二级域名上:blog.yourdomain.com

1
$ echo 'blog.yourdomain.com' >> source/CNAME

然后在你的DNS服务商,添加相应的CNAME指向yourname.github.com。 如果你使用形如yourdomain.com这样的一级域名的话,需要在DNS处设置A记录到207.97.227.245(地址可以在这里查看),而不是在DNS处设置为CNAME的形式。设置成功后,等待生效即可。

详见:http://octopress.org/docs/deploying/github/#custom_domains

第三方插件

添加多说评论插件

首先我们需要有一个多说网的short_name,在后面的配置中需要用到。于是我们就得先注册一个多说网的账号。

注册多说short_name

这里顺便吐槽一下多说网的交互。它不提供注册功能,只能绑定微博、豆瓣等现有账号,好吧,我绑定了微博,然后登录,发现坑爹了!

官方文档修改您的多说二级域名:(在多说后台设置中找到),但是我在设置页面转了一圈,根本没找到可以设置或者创建short_name的地方!!!找遍了各个可以点击的链接,硬是没发现什么后台管理、域名设置的地方。

无奈之下,用了万能的Google,然后找到了这个博客,他也在吐槽不断地点击后,才找到了设置页面:获取多说通用代码,按照要求设置即可,复制它生成的通用代码。

添加多说模块到Octopress模板

1)在source/_inludes/post/下创建duoshuo.html: 粘贴生成的通用代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Duoshuo Comment BEGIN -->
<div class="ds-thread"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"your_short_name"};
(function() {
  var ds = document.createElement('script');
  ds.type = 'text/javascript';ds.async = true;
  ds.src = 'http://static.duoshuo.com/embed.js';
  ds.charset = 'UTF-8';
  (document.getElementsByTagName('head')[0]
  || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- Duoshuo Comment END -->

2)在source/_layouts/post.html,在disqus代码下方添加:

1
2
3
4
5
6
    { % if site.duoshuo_short_name and site.duoshuo_comments == true and page.comments == true %}
  <section>
  <h1>Comments</h1>
    <div id="comments" aria-live="polite">{ % include post/duoshuo.html %}</div>
    </section>
    { % endif %}

3)修改source/_includes/article.html文件,在disqus代码下方添加:

1
2
{ % if site.duoshuo_short_name and page.comments != false and post.comments != false and site.duoshuo_comments == true %}| <a href="{ % if index % }{ % endif %}#comments">Comments</a>
{ % endif %}

4)在_config.yml中添加:

# duoshuo comments
duoshuo_comments: true
duoshuo_short_name: yourname

这时候应该就成功添加多说模块了。

首页侧边栏显示最新评论

1)在_config.yml中插入如下代码

duoshuo_asides_num: 10      # 侧边栏评论显示条目数
duoshuo_asides_avatars: 0   # 侧边栏评论是否显示头像
duoshuo_asides_time: 1      # 侧边栏评论是否显示时间
duoshuo_asides_title: 1     # 侧边栏评论是否显示标题
duoshuo_asides_admin: 0     # 侧边栏评论是否显示作者评论
duoshuo_asides_length: 20   # 侧边栏评论截取的长度

2)再创建source/_includes/custom/asides/recent_comments.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section>
<h1>最近评论</h1>
<ul class="ds-recent-comments" data-num-items="10" data-show-avatars="1" data-show-time="1" data-show-title="1" data-show-admin="1" data-excerpt-length="20">
</ul>
<!--多说js加载开始,一个页面只需要加载一次 -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"your_duoshuo_name"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';
ds.async = true;ds.src = 'http://static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body') [0]).appendChild(ds);
})();
</script>
<!--多说js加载结束,一个页面只需要加载一次 -->
</section>

3)打开_config.yml将custom/asides/recent_comments.html添加到default_asides:

[custom/asides/recent_comments.html]

给网站添加访问分析 Google Analytics

1)到Google Analytics注册GA账户,登记网站名字、地址,获得自己的Track ID,格式如:US-1234XXXX-X

注册GA的网址应与你在_config.yml中url的设置一致。

2)修改_config.xml,将ID写到google_analytics_tracking_id:后。

3)rake deploy。然后就可以到Google Analytics看报告了。

添加About Me到侧边栏

1)修改source/_includes/custom/asides里面的about.html,内容如下:

1
2
3
4
<section>
<h1>About Me</h1>
<p>Your Introduce</p>
</section>

2)修改_config.yml,在default_asides加入custom/asides/about.html

参考

  1. Mac下的Markdown文件编辑器: Mou
  2. 唐巧的博客: 象写程序一样写博客:搭建基于github的博客
  3. 觅珠人: 第一篇博文:用Octopress搭建博客系统
  4. 破船之家: 你好!github页面
  5. opoo.org: Octopress 博客系统 —— a Blogging Framework for Hackers
  6. Ocotpress: Octopress Documentation
  7. Havee’s Space: 为 Octopress 添加多说评论系统
  8. colors4.us: Octopress博客从零开始 III

(全文完)

原文作者: lslin
原文链接: http://blog.lessfun.com/blog/2013/11/27/create-blog-in-github-page-using-octopress-and-binding-domain/
版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

发表评论