うさぎ組

kyon_mm with software

このエントリーをはてなブックマークに追加

BitBucketで無料ブログをつくる方法 -TinkererとMercurialでバージョン管理可能なブログをつくる-

Tinkererとは何か

reStructuredTextという簡単な記法でブログを書けるツールです。基本的にコマンドラインで操作して、テキストエディタで編集します。バックボーンはSphinxというPythonのツールを使っていて、それをブログ用にいい感じにしてくれているのがTinkerrerです。

僕はPythonやSphinxに詳しくないのですが、Sphinxはかなり広まっているツールであり、たくさんのプラグインが既にあります。素晴らしいのはそのプラグインをそのままTinkererでも使えるということです。

必要なもの(説明しないもの)

  • Python(easy_install)
  • BitBucketのアカウント(BitBucketで公開する場合のみ)

大まかな手順

  • Tinkererをインストール
  • BitBucketで公開する場合の準備をする
  • ためしに動かしてみる(初期設定をする)
  • コメント欄をつける
  • はてなブックマークとTweetボタンをつける
  • Twitter展開プラグインをいれる
  • BitBucketで公開する
  • 気をつけること
  • まとめ

Tinkererをインストール

コマンドラインでTinkererをインストールします。

easy_install tinkerer

# インストールが完了したら次のコマンドを打ってみる

tinker -v

# Tinkerer version 1.1 みたいにでれば完了

BitBucketで公開する場合の準備をする

BitBucketでは<自分のアカウント名>.bitbucket.orgというリポジトリをつくると、http://<自分のアカウント名>.bitbucket.orgでWebサイトを公開できます。このリポジトリはprivateでもpublicでも大丈夫です。

HTML + CSS + JSであれば大丈夫です。僕の場合はアカウント名がkyon-mmなので、リポジトリ名にkyon-mm.bitbucket.orgと指定します。リポジトリができたら、ローカルにcloneして、そのディレクトリでtinkerでブログをつくりましょう。

ためしに動かしてみる(初期設定をする)

BitBucketからcloneするなりもしくは、適当にmkdirなりしてブログのディレクトリをつくり、そのディレクトリに移動します。僕の場合だと

cd /Users/kyon/repos/bb/kyon-mm.bitbucket.org/

みたいな感じ。ここでブログの初期作成をします。

tinker -s

これでこんな感じのディレクトリ構成になっているはずです。

ls

-rwx     2659 2013-05-20 17:35 conf.py*
drwx        0 2013-05-20 17:35 drafts/
-rw-      173 2013-05-20 17:35 index.html
-rw-       48 2013-05-20 17:35 master.rst

conf.pyを好みのエディタで開いて編集します。このファイルにブログ名とか、ブログのURLとか設定します。なにが設定されるべきかはconf.pyのそれぞれの項目にコメントで書かれていますが、僕の設定例は下の感じです。

# -*- coding: utf-8 -*-

import tinkerer
import tinkerer.paths

# **************************************************************
# TODO: Edit the lines below
# **************************************************************

# Change this to the name of your blog
project = u'うさぎ組'  #■■■変えたところ:ブログのタイトル

# Change this to the tagline of your blog
tagline = 'kyon_mm with software'  #■■■変えたところ:ブログのタイトル直下にくるサブタイトル的なもの

# Change this to the description of your blog
description = 'Software Testing, Groovy Language, CI, Functional Programming, etc...' #■■■変えたところ:HTMLでのDESCRIPTIONに対応するもの

# Change this to your name
author = 'kyon_mm' #■■■変えたところ:各エントリでのデフォルトの投稿者(エントリ毎に投稿者を変えることができるけど、指定しない場合の投稿者名

# Change this to your copyright string
copyright = '2013, ' + author  #■■■変えたところ:ブログのフッターにでてくるCopyRight

# Change this to your blog root URL (required for RSS feed)
website = 'http://kyon-mm.bitbucket.org/blog/html/' #■■■変えたところ:ブログを公開するURL(Tinkerはデフォルトで/blog/html/配下に /日付ディレクトリ/タイトル で投稿がつくられるので、デプロイするURL/blog/htmlとする。

# **************************************************************
# More tweaks you can do
# **************************************************************

# Add your Disqus shortname to enable comments powered by Disqus
disqus_shortname = 'kyon-mm' #■■■変えたところ:DISQUSというコメントツールのアカウント名を設定。DISQUS使わない人は不要。


# Change your favicon (new favicon goes in _static directory)
html_favicon = 'tinkerer.ico'

# Pick another Tinkerer theme or use your own
html_theme = "modern5" #■■■変えたところ:いくつかテーマがある。今回はmodern5を使用。

# Theme-specific options, see docs
html_theme_options = { }

# Link to RSS service like FeedBurner if any, otherwise feed is
# linked directly
rss_service = None

# Number of blog posts per page
posts_per_page = 10

# **************************************************************
# Edit lines below to further customize Sphinx build
# **************************************************************

# Add other Sphinx extensions here
extensions = ['tinkerer.ext.blog', 'tinkerer.ext.disqus','sphinxcontrib.twitter']  #■■■変えたところ:DISQUSの設定、Twitter展開プラグインを追加。

# Add other template paths here
templates_path = ['_templates']

# Add other static paths here
html_static_path = ['_static', tinkerer.paths.static]

# Add other theme paths here
html_theme_path = ['_themes', tinkerer.paths.themes]

# Add file patterns to exclude from build
exclude_patterns = ["drafts/*", "_templates/*"]

# Add templates to be rendered in sidebar here
html_sidebars = {
    "**": ["recent.html", "searchbox.html"]
}

# **************************************************************
# Do not modify below lines as the values are required by
# Tinkerer to play nice with Sphinx
# **************************************************************

source_suffix = tinkerer.source_suffix
master_doc = tinkerer.master_doc
version = tinkerer.__version__
release = tinkerer.__version__
html_title = project
html_use_index = False
html_show_sourcelink = False
html_add_permalinks = None

投稿をつくってみる

次のコマンドで投稿の雛形を作れます。-p の後に指定する文字列がURLになるのと、現在のTinkererでは日本語はうまく対応できていないようです。英語でつくりましょう。実際のHTMLとしてのタイトルは投稿のrstファイルに書く事になります。

tinker -p "blogtitle"

これで、日付ディレクトリ/blogtitle.rst のようなファイルができるはずです。あとは、このrstファにreStructuredTextスタイルでブログを書きます。先頭の行がそのブログのタイトル(HTMLのTITLE)になるのですが、自由に編集(日本語に)して大丈夫です。

編集が終わったら、次のコマンドでHTMLを生成してブラウザで確認してみましょう。

tinker -b

# なにかがんばってくれる。警告やエラーが出たら随時直す。よくあるのは、ヘッダーの装飾がヘッダーに指定した文字列より短い(日本語だと倍くらいいるみたい?)


# 適当にブラウザでindex.htmlを見てみる
open index.html

ページをつくってみる

日毎の更新ではなく、固定のページを作りたいときは下のコマンドでページをつくれます。実際に打ってみてどうなるか見てみるといいでしょう。

tinker --page "pagetitle"

おなじようにページができるはずなので、編集してビルド(HTMLを作成するコマンドを打って)index.htmlを確認してみましょう。

コメント欄をつける

Tinkererはデフォルトではコメント機能がありません。というのもDBとか持っていないので外部依存になります。簡単に導入できるのがDISQUSというWebサービスで、他にはFaceBookのコメント機能があります。僕はFaceBookアカウントに縛りたくなかったので、DISQUSにしました。

ここで注意が!!!! DISQUSはURLにアンダースコアを含んでいると動作しません。つまり、kyon_mm.bitbukcet.orgはダメで、kyon-mm.bitbucket.orgは問題ありません。僕のアカウントは本当はkyon_mmなのですが、このためだけにBitBucketのアカウント名をkyon-mmにするという決断をしました。非常に残念です。(RFC的にはアンダースコアもURLとして使えるので)

DISQUSにアカウントをつくります。 こちら から登録します。 僕の設定例は次の感じです。

ここのshortnameが先ほどのconf.pyでのDISQUSの設定になります。あと、登録してから1,2時間はうまく動作しませんでした。うまく動かないと思ったときは半日くらい放置しておくといいと思います。

はてなブックマークとTweetボタンをつける

テンプレートにjsとかを追加する感じです。どちらのボタンもjsで貼り付けることができます。各ページにつけたいのでそういったものは _templates配下のpage.htmlを編集します。次に僕の例をのっけます。これはまだはてなスターだけ動作していないのですが。。。

{% extends "!page.html" %}
{% set css_files = css_files + ["_static/style.css"] %}

{%- block body %}
    <div class="section_head">
    <div class="timestamp_layout">
      {{ timestamp(metadata.formatted_date) }}
    </div>
    {% block buttons %}
    <div class="buttons">
      <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      <a href="http://b.hatena.ne.jp/entry/http://google.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="{{ title }} - {{ project }}" data-hatena-bookmark-layout="standard-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
      <span class="hatenastar"> </span>

      {# パーマリンクのための URL 生成してつけるためのタグ #}
      <a style="display:none" class="parmalink_for_star">a</a>
    </div>

    <script type="text/javascript"><!--
      $('a[class="hatena-bookmark-button"]').toArray().map(
          function (e)
          {
              e.setAttribute('href', 'http://b.hatena.ne.jp/entry/' + window.location.host + window.location.pathname);
          });
    --></script>
    <script type="text/javascript"><!--
      $('a[class="parmalink_for_star"]').toArray().map(
          function (e)
          {
              e.setAttribute('href', 'http://' + window.location.host + window.location.pathname);
          });
    --></script>
    {% endblock %}
    </div>
    {{ link }}
    {{ body }}
    {{ post_meta(metadata) }}
    {{ comments }}
{% endblock %}

Twitter展開プラグインをいれる

これは簡単です。既にSphinxでプラグインがあるのでインストールするだけ。

easy_install sphinxcontrib.twitter

”.. tweet:: https://twitter.com/kyon_mm/status/218929916811546625” とすることで、tweetが展開されます。鍵アカウントのものがどうなるのかは不明です。

BitBucketで公開する

ビルドし終わってコミットしたらpushして完了です。BitBucketでのWebホスティングで気をつけるのは、defaultブランチが公開状態になるということです。なので、下書きとかは別ブランチにしておくと便利ですね。僕は普段はdraftブランチで書いてpushしておいて、公開するときにdefaultにmergeしてpushするようにしています。

気をつけること

  • URLにアンダースコアをいれるとDISQUSが使えない
  • サイトのタイトルに日本語を使いたいときはUTF-8指定で u’うさぎ組’ のようにuをつける。
  • 静的ファイルを置きたい時は_static直下においておくと、ビルド後に/blog/html/_staticにコピーされるので、そこを参照する。
  • /blog/htmlはビルド毎に削除するので、基本的に触らない。あと、ディレクトリ開いたりファイル開いているとビルドが失敗する。

まとめ

TinkererとBitBucketがあれば簡単にブログをつくれて、なおかつ「HTMLのスライドを置いたり、容量無制限で好きなファイルを公開できる!しかもバージョン管理付き」 他にも下書き機能などがありますし、cssを自分でカスタマイズとかできます。基本的にHTML + CSS + JSですからね。わからないことはTinker本家ページにいきましょう。このブログのフッターのTinkererからいけます。