branch4 Blog

Internet development with every single possibility.

What I Did After the Installation of Octopress

| Comments

こんちには、おフランス帰りの@xengineer01です。
ほっほっほ。

セーヌ川

パリで開催されている、Japan Expoに、僕が所属している青空応援団が参加してたので、
珍しく海外におりました。
ほとんどExpo会場にいたからあんまり観光的なことはしてないけどね。
セーヌ川と聞くと、いつも、セーム革ね、と思っているのは内緒です。

さてさてまたしてもOctopress関連です。

Octopressは、インストールしてすぐ公開できるけど、その状態はほんとに真っ新なわけで。
サイドバーモジュール出したり、コメントつけられるようにしたり、と多少手をかけないと
いけなかったりしたので、インストール後にやったことの作業メモ。

prerequisite


Octopressはinstallして、github pagesでblogを書く直前まで行ってることが前提条件。
ここでいうとこの、

1
$ git push origin source

までは終わってること。
インストール後にいまのところやったのは、

  • 記事にコメントをつけられるようにした
  • google plusの+1モジュールを出した
  • サイドバーにGoogle Adsense/Affiliateを出した
  • github repositoryを出した、そして引っ込めた
  • category generator/category listモジュールを導入した
  • Google Analyticsで色々みれるようにした こんなもんだったかな?

今後やりたいなー、と思ってるのは、

  • 英語のブログと日本語のブログを分けて表示できるようにしたい
  • code blockいけてない表示を変更したい
    くらいかな。

記事にコメントをつけるには


Octopress自体は、以前も紹介した通り、静的サイトGenerator Jekyllのラッパー的な
存在なので、当然、コメントなんつー動的コンテンツ管理機能はないっす。

そこは、disqusっつー外部サービスに依存してるので、disqusアカウントを作りましょう。
disqusアカウントの作り方は、ぐぐればいいよ。

作ったら、下図的な感じで、”Add Disqus to Site”を選択。
add disqus to site

そんで、Site name入れたりする。例は適当にいれてみた。
これでも問題ない。
site profile

次は、この画面の、”Install”タブが選択された状態で出てくるので、
下図みたいに、”General”を選択する。
configure disqus1

下の方にいくと、Your website’s shortname is ikmenblog と出てくるので、
これを覚えておく。
configure disqus2

そして、_config.ymlを下記のように編集してちょ。

1
2
3
4
5
6
7
8
...
中略
...
disqus_short_name: 'ikemenblog'
disqus_show_comment_count: true
...
中略
...

short nameは、さっき覚えた名前ね。
あとは、各postのmetadataに、下記を追記しておけばOK。

1
comments: true

これで投稿すれば漏れなくコメントがつけられるようになりますわ。Tre bien。

google plusの+1モジュールを出すには


ブログのPVを増やすには内容が面白くないと何やってもだめなんだろうけどね。
このモジュール、簡単に出せるので出してみようかな、と。
もうちょい記事が増えて、Fanpageにも投稿できるようになったらFacebookモジュールも
出しますかね。

まずは、_config.ymlにこんな行があるので探しましょう。

1
2
3
4
5
6
7
8
# Google +1
google_plus_one: false
google_plus_one_size: medium

# Google Plus Profile
# Hidden: No visible button, just add author information to search results
googleplus_user: 
googleplus_hidden: false

そんで、googleplus_userのところを埋めればOK。
googleplus_userって何?という方は、こちら
ちなみに僕もなんのことかわからなかった。

あとは、どういう仕組みで表示されるかというと、これをみると少しわかるかね。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ ls -l source/_includes/asides
-rw-r--r--  1 user  group  406  6 15 08:32 delicious.html
-rw-r--r--  1 user  group 1005  6 15 08:32 github.html
-rw-r--r--  1 user  group  360  6 15 08:32 googleplus.html
-rw-r--r--  1 user  group  799  6 15 08:32 pinboard.html
-rw-r--r--  1 user  group  329  6 15 08:32 recent_posts.html

$ cat source/_includes/asides/googleplus.html

<section class="googleplus">
  <h1>
    <a href="https://plus.google.com/106189997190821430505?rel=author">
      <img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32">
        Google+
    </a>
  </h1>
</section>

source/_includes/asidesにhtmlファイルがあって、それを読み込んで生成するというわけで。
同じディレクトリに他にもファイルがあるけど、どれを表示するかは、_config.ymlに記載してありんす。

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

こんな感じで。
これでgoogle plus +1モジュールは表示されるはず。

github repositoryを出して、そして引っ込めるには


これもgoogle plusモジュールと似たようなもん。
さっきのlsの結果をみると、source/_includes/asides配下に、github.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
30
31
32
$ ls -l source/_includes/asides
cat source/_includes/asides/github.html

<section>
  <h1>GitHub Repos</h1>
  <ul id="gh_repos">
    <li class="loading">Status updating...</li>
  </ul>
  
    <a href="https://github.com/root04">@root04</a> on GitHub
  
  <script type="text/javascript">
    $(document).ready(function(){
      if (!window.jXHR){
        var jxhr = document.createElement('script');
        jxhr.type = 'text/javascript';
        jxhr.src = '/javascripts/libs/jXHR.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(jxhr, s);
      }

      github.showRepos({
        user: 'root04',
        count: 0,
        skip_forks: true,
        target: '#gh_repos'
      });
    });
  </script>
  <script src="/javascripts/github.js" type="text/javascript"> </script>
</section>

で、またどれを表示するかは、_config.ymlに記載してあります。
(github.htmlを追加した)

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

更に、_config.yml、下記箇所をあわせて編集。

1
2
3
4
5
# Github repositories
github_user: xxxxxxxx
github_repo_count: 0
github_show_profile_link: true
github_skip_forks: true

これで表示される、と。非表示にしたい場合は、default_asidesから抜いてしまえばOK。

サイドバーにGoogle Adsense/Affiliateを出すには


せっかくブログ書くので、Adsense貼ったり、affiliate出したりして億万長者になろう!
というわけで、こんな感じにすると貼れまっせ。
ただ貼るだけだとaffiliateを貼ろうとすると、広告だらけの酷いサイトになっちゃうので、
affiliate枠は一つにして、そこにランダムに複数affiliateを表示するようにしよう。
そうすればABテストも兼ねられるし、一石二鳥。

まずは、affiliateから。

ざっくりやること。
1. sidebarに読み込むhtmlの設定と設置 2. 1のhtmlから読み込んで実行するjsファイルの設置 3. jsファイルのinclude 4. sidebarのwidth変更 かな。

ここ参考にしましたね、私。

sidebarに読み込むhtmlの設定と設置

_config.ymlのいつもの行探しと追記。

1
2
default_asides: [asides/recent_posts.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html, asides/github.html]
default_asides: [asides/recent_posts.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html, asides/github.html, custom/asides/affiliate.html] <- 追記後

上記で、custom/asides配下に、affiliate.htmlを設置することにしてるので、
source/_include/custom/asides/affiliate.htmlを下記内容で設置。

1
2
3
4
5
$ cat source/_includes/custom/asides/affiliate.html
<script type="text/javascript" language="javascript">
  num = Math.floor( Math.random() * 6 );
  document.write( aff[ num ]);
</script>

Math.random() * 6 の、”6”は、何個のaffiliateバナーを回すかを書く。

1のhtmlから読み込んで実行するjsファイルの設置

次は、実行するjsファイルを設置。
source/javascripts/affiliate.jsを、下記内容で設置。

1
2
3
4
5
6
7
var aff = new Array();
aff[0] = 'affiliate tag1'
aff[1] = 'affiliate tag2'
aff[2] = 'affiliate tag3'
aff[3] = 'affiliate tag4'
aff[4] = 'affiliate tag5'
aff[5] = 'affiliate tag6'

affiliate tagXのところに、表示したいaffiliateのtagを突っ込む。
(ダブルクオーテーションは、backslashでエスケープ)

jsファイルのinclude

次は、html <head> – </head>の中に、上記で設置したjsファイルをincludeするように、下記を追記する。
僕は、source/_includes/head.html中に追記したです。

1
<script type="text/javascript" src="http://xxx.yyy.zzz/javascripts/affiliate.js" charset="utf-8"></script>

sidebarのwidth変更

最後に、affiliateのサイズに合わせて、sidebar widthの調整。
僕は、全部 300 x 250 でそろえたので、sidebar widthを、310pxにしたですよ。

1
2
3
4
5
6
7
8
9
10
11
12
13
$ vi sass/base/_layout.scss

...
...
// Sidebar widths used in media queries
$sidebar-width-medium: 310px !default;
$sidebar-pad-medium: 5px !default;
$sidebar-pad-wide: 5px !default;
$sidebar-width-wide: 310px !default;
...
...

これでいける、はず。

category generator/category listモジュールを導入するには


category generatorは、install直後から使えるpluginなので、_config.ymlを設定するだけで、
category分けしたアーカイブページ作ってくれます。 設定は簡単に公式サイトに説明あり。

category generatorは、このブログでいうと、例えば、
こんな感じのアーカイブページを作ってくれますよ。

category listは、こっちを参照。

こんな感じのリストを作れますよ。
category list

Google Analyticsで色々みれるようにするには


最後に、Google Analytics導入。

これもあんまり書くことないんだけど、Analyticsアカウント登録して、
tracking_id を、_config.ymlの下記箇所に書けばOK。

1
2
# Google Analytics
google_analytics_tracking_id: UA-XXXXXX-Y

Analyticsに数字が反映されるまで結構(24hr以上かかった)時間かかるけど、
それを除けば、特に難しいことはないっす。

と、いうわけで、いまのところ僕がoctopressインストール後にやったことをまとめてみましたです。

色々間違ってメモってそうなので、その時はこっそり教えていただけるとうれしいです。
Au revoir !

Comments