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


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

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

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

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

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

# 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までをコピペして下さい。

(バックスラッシュは取り除いて下さい。)

<div class="social_box">
<ul class="social">
<li class="hatena">

\{\% 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 \%\}

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 \}\}" >Tweeta>
\{\% 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 \}\}" >Tweeta>
\{\% 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>

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

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

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


    
    
    

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍