酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

5分でできる簡単 Octopress セッティング

fpu_tmp_1353809908.3768_fa2a67

Octpressは基本機能がツボを抑えているので、有効に活用すればほとんどカスタマイズの必要がありません。そこで、その基本機能を5分で動くようにしようというのが今回のネタです。

目次

(1) Google analyticsの設定
(2) ブログのコメントサービスDisqusの設定
(3) 記事の下にはてなブックマークボタンを設置
(4) linkを新規タブ(ウインドウ)で開くようにする
(5) サイドバーにTwitterのプロフィールを表示
(6) トップページに「続きを読む」を表示(一部だけ表示する)

(7) Octopressでテーブルをmarkdownで編集できるようにするも別記事で書きました!

(1) Google analyticsの設定

まずは、Google analyticsの設定です。 Google analyticsはブログのアクセス状況を解析するWebツールです。

google_analytics_2012-11-24

Google analyticsでサイトを登録すると「UA-xxxxxx-x」といったトラッキングIDをもらえます。それをOctpressの_config.ymlに設定します。

code-google-analytics_20121124

するとあとは、source/_includes/google_analystics.htmlによってgoogle analysticsのトラッキングID付きのHTMLが生成されるようです。

(2) ブログのコメントサービスDisqusの設定

Disqusはブログパーツでコメント欄を提供してくれるサービスです。この機能を使うとOctpressでもコメントを記入できるようになります。

discus_screen_shot_2012-11-24

Disqusでユーザー登録をする際に、ユーザーID(ここではxxxxxx)を設定できます。それを_config.ymlに設定します。

_config.yml
1
2
3
# Disqus Comments
disqus_short_name: xxxxxx
disqus_show_comment_count: false

すると、google analysticsと同じようにsource/_include/disqus.htmlによってdisqus用のコードを生成してくれます。

(3) 記事の下にはてなブックマークボタンを設置

Octpressの記事の最後にはてなブックマークのボタンを設置する方法です。 source/_includes/post/sharing.htmlを以下の様に修正します。
はてなのみ必要な方は、hatebu-start から hatebu-endまでをコピペして下さい。
(バックスラッシュは取り除いて下さい。)

source/_includes/post/sharing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="social_box">
    <ul class="social">
        <li class="hatena">
          <!-- hatebu-start -->
          \{\% if index \%\}
          <a href="http://b.hatena.ne.jp/entry/\{\{ site.url \}\}\{\{ post.url \}\}" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
          \{\% else \%\}
          <a href="http://b.hatena.ne.jp/entry/\{\{ site.url \}\}\{\{ page.url \}\}" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
          \{\% endif \%\}
          <!-- hatebu-end -->
        </li>
        <li class="twitter">
            \{\% if site.twitter_tweet_button \%\}
                \{\% if index \%\}
                <a href="http://twitter.com/share" class="twitter-share-button" data-url="\{\{ site.url \}\}\{\{ post.url \}\}" data-via="\{\{ site.twitter_user \}\}" data-counturl="\{\{ site.url \}\}\{\{ post.url \}\}" >Tweet</a>
                \{\% else \%\}
                <a href="http://twitter.com/share" class="twitter-share-button" data-url="\{\{ site.url \}\}\{\{ page.url \}\}" data-via="\{\{ site.twitter_user \}\}" data-counturl="\{\{ site.url \}\}\{\{ page.url \}\}" >Tweet</a>
                \{\% endif \%\}
            \{\% endif \%\}
        </li>
        <li class="facebook">
            \{\% if index \%\}
            <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false" data-font="verdana" data-href="\{\{ site.url \}\}\{\{ post.url \}\}"></div>
            \{\% else \%\}
            <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false" data-font="verdana" data-href="\{\{ site.url \}\}\{\{ page.url \}\}"></div>
            \{\% endif \%\}
        </li>
    </ul>
</div>

このコードを追加すると下の画像のようにはてなブックマークのボタンが追加されます。

hatena_bookmark_button_2012-11-24

(4) linkを新規タブ(ウインドウ)で開くようにする

Octpressのmarkdownでリンクを作成した場合、外部のサイトへのリンクの場合のみ、target=”blank”が自動でセットされるようにします。

1
2
3
4
5
<script language="javaScript">
$(document).ready( function () {
   $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

(5) サイドバーにTwitterのプロフィールを表示

OctpressのサイドバーにTwitterプロフィールを表示するプラグイン octo-about-me-from-twitterを導入します。

GitHubからプラグインをCloneするため、コンソールで以下のコマンドを実行。

コンソール
1
2
cd source/_includes/custom/asides
git clone git://github.com/dharFr/octo-about-me-from-twitter.git .
_includes/custom
 |_ custom
    |_ asides
       |_ aboutmetwitter.html

となっていることを確認。”.git”や”README.md”は不要なので削除

_config.ymlファイルを編集して、サイドバーにTwitterプロフィールが 表示されるように”default_asides”に”custom/asides/aboutmetwitter.html”を追加。
ちなみに、”default_asides”の並び順でサイドバーが表示されます。

_config.yml
1
default_asides: [xxxx, ..... , aboutmetwitter.html]

設定画成功すると下のように表示されます。

fpu_tmp_1353820500.5546_140d5f

(6) トップページに「続きを読む」を表示(一部だけ表示する)

トップページに記事のすべての内容を表示すると、記事の一覧を俯瞰しづらくなりますよね。
ということで「続きをよむ」ボタンを追加する方法です。

fpu_tmp_1353820807.8379_d3d864

具体的には記事のファイルに以下を追加します。

記事ファイル
1
2
3
# 上の内容までがトップページに表示 #
<!-- more -->
# 下の内容が個別の記事のページに表示 #

また、「続きを読む」はデフォルトでは、「Read on->」とかになっていると思います。 それを変更する場合は、”_config.yml”の”excerpt_link”を変更します。

_config.yml
1
excerpt_link: "続きを読む"

(7) テーブルをmarkdownで編集できるようにする

Octopressでテーブルをmarkdownで編集できるようにするを書きました。markdownでテーブルを編集できるようになれば、記事の幅がもっと広がりますよ!

変更来歴

  • 11/25 (5)サイドバーにTwitterのプロフィールを表示と(6)トップページに「続きを読む」を表示(一部だけ表示する)を追加

  • 11/30 (3) 記事の下にはてなブックマークボタンを設置のコードがトップページでも表示されるようにコードを修正

  • 12/02 (7) テーブルをmarkdownで編集できるようにするを追加

Special Thanks

おすすめの書籍