SEO

• 增加统计工具

博客搭建好了以后，大家一定很想知道每天都有多少的访问量。现在有很多工具都可以帮助我们做这件事，比如Google Analytics、百度统计、CNZZ 等。

其中Google Analytics是Octopress自带的统计工具，使用方式也非常简单，只需要到Google Analytics申请一个app id，填写到_config.yml文件中的google_analytics_tracking_id后面即可。但Google Analytics存在翻墙的麻烦，而且百度统计功能也挺齐全，完全能满足我的需求，就选择了百度统计。

集成百度统计方式非常简单：

只需到百度统计官方网站申请一个账号，将获取的代码添加到source/_includes/custom/footer.html中，重新部署即可。

• 搜索优化

为了让自己搭建的博客更容易被搜索引擎搜到，最好将网站地址提交给各大搜索引擎，下面有两个连接搜集了各个搜索引擎的网站提交入口：

1
2

http://urlc.cn/tool/addurl.html
http://tool.lusongsong.com/addurl.html

我试了下，添加到google以后，搜索关键字的时候自己的博客确实排名靠前了。

光是将网址添加到搜索引擎还不够，你必须得为你的文章添加关键字，才能更好地被引擎搜到，在创建一篇新文章的时候，生成的makedown文件包含以下内容，以本文举例：

1
2
3
4
5
6
7
8
9
10

---

layout: post
title: "自定义你的Octopress博客"
date: 2014-04-28 11:17:31 +0800
comments: true
categories: Octopress

---

实际上我们还可以为其添加以下几项，以本文举例：

1
2
3

tags: [octopress, 博客自定义, seo]
keywords: seo, octopress, analytics, 博客自定义
description: 如何自定义Octopress博客

这样更利于搜索引擎抓取到我们的博客。

事实上，如果我们不做上述设置，Octopress会默认将文章的前150个字作为文章的关键字，供搜索引擎抓取，但那并不一定准确。

Octopress实现该功能的代码在source/_includes/head.html文件中：

1
2
3

此外，还可以在_config.yml里添加默认的description和keywords，不过我没试过。

界面相关

• 博客首页显示文章摘要

默认情况下，博客首页文章列表中都会全部展示，要想让文章在首页中只显示一部分配置也非常简单：

首先在文章列表中你想展示的缩略部分增加标记：

1

然后自定义_config.yml中的对应设置项：

1

 excerpt_link: "阅读更多 →"

这样就有了我博客中现在的效果：

• 自定义侧边栏之增加category列表

下面以增加侧边栏category列表为例。

在创建新文章时，我们会填写以下属性：

1
2
3
4
5
6
7
8
9
10
11
12
13

---

layout: post
title: "自定义你的Octopress博客"
date: 2014-04-28 11:17:31 +0800
comments: true
categories: Octopress
tags: [octopress, 博客自定义, seo]
keywords: seo, octopress, analytics, 博客自定义
description: 如何自定义Octopress博客

---

其中的categories会为当前文章指定一个分类。我们可能有需要通过分类查找文章的需求，而侧边栏中默认只有最近提交列表。下面就介绍如何在侧边栏中显示文章分类列表。

首先，保存以下内容到plugins/category_list_tag.rb中（如果文件不存在就新创建一个）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 module Jekyll
  class CategoryListTag < Liquid::Tag
    def render(context)
      html = ""
      categories = context.registers[:site].categories.keys
      categories.sort.each do |category|
        posts_in_category = context.registers[:site].categories[category].size
        category_dir = context.registers[:site].config['category_dir']
        category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
        html << "
#{category} (#{posts_in_category})
\n"
      end
      html
    end
  end
end

Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)

这个插件会向liquid注册一个名为category_list的tag，该tag就是以li的形式将站点所有的category组织起来。

然后再增加aside，复制以下代码到source/_includes/asides/category_list.html（如果没有就新建）中：

1
2
3
4
5
6

 
Categories
 

  { category_list }
 

注意要将{ category_list }中category_list单词的左右两边分别加个%,即写成下图所示样式：

搞那么复杂是markdown排版问题。。。

最后更改_config.yml文件，让侧边栏链接到刚才新增加的source/_includes/asides/category_list.html文件：

1

default_asides: [asides/recent_posts.html, asides/category_list.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

完成以上步骤后，重新部署就能看到博客的右侧边栏增加了category列表了。

• 自定义侧边栏之增加新浪微博

在博客中增加新浪模块是一个很好的和渎职互动方式，增加方式如下：

首先要从新浪微博秀获取到自定义的微博秀代码，设定好微博秀样式后将代码复制下来。

然后在source/_includes/custom/asides目录下新建weibo.html文件，按照如下格式编辑该文件：

1
2
3
4
5
6
7
8
9
10

    
新浪微博
    

    


   -- 在此插入获得的微博秀代码 --

      
    

将刚才赋值下来的自定义微博秀代码粘贴到上述指定位置。

最后，和自定义category侧边栏一样，我们需要在default_asides中加入custom/asides/weibo.html。

重新部署后，微博秀就能正常展示啦！

• 自定义Navigation

默认的导航栏只有Blog、Archives两项，很难满足大家的要求。下面以增加about界面为例说明如何在导航栏上增加内容。

首先编辑文件/source/_includes/custom/navigation.html，仿照Blog和Archives的写法增加一行About：

然后使用命令：

1

rake new_page['about']

创建一个页面，保存路径为source\about\index.markdown

编辑index.markdown文件成自己想要的样式，然后重新部署，就能看到导航栏上新增了About项目。

• 自定义Footer

界面底部的声明部分同样可以自定义，修改文件：source/_includes/custom/footer.html成自己想要的格式即可。

• 自定义网站主题

目前有很多第三方主题，比如：http://opthemes.com/

该网站搜集了很多漂亮的主题，对应的主题里都有安装方式。

• 新标签页打开网站中第三方链接

Octopress博客中，默认是在当前界面中打开第三方链接，这导致网站浏览者跳到第三方链接后很难回来。

将以下代码加入source/_includes/custom/head.html文件中：

1
2
3
4
5
6
7
8
9
10
11

> 

记得把左侧的>符号都去掉。

不过本站的链接还是会在当前界面中打开。

自定义域名

使用Github Pages服务搭建好博客以后，默认的访问地址是yourname.github.io形式的二级域名。大家一定迫不及待的想换成自己的个性域名了。

• 购买域名

到各大域名购买网站购买自己心仪的域名

• 获取自己github二级域名的IP

以我的域名wangzz.github.io为例，输入以下命令：

1

$dig wangzz.github.io

在输出内容中找到ANSWER SECTION一项，比如我的：

1
2
3

ANSWER SECTION:
wangzz.github.io. 3599    IN  CNAME   github.map.fastly.net.
github.map.fastly.net.    29  IN  A   103.235.222.168

可以看到我的IP是103.235.222.168。

• 添加A记录

得到IP以后，需要到你的域名解析服务商处添加一个A记录，将你的域名解析成对应的IP。

经过以上步骤，访问wangzz.github.io的地址就会自动跳转到自己的域名了。不过更改需要等一段时间才能生效。

参考文章

• SEO统计

• 增加category列表

• Theming & Customization

• Add About Page

• 新标签页打开第三方链接

• 增加新浪微博秀