OctopressからHugoへ移行

当サイトはOctopressを使って生成していたのですが、このたびHugoに移行することにしました。 この記事ではHugoに移行した経緯と、Hugoへの移行手順についてまとめます。 なおローカル環境はMac OS Xです。

Octopressを辞めた理由

Octopressを辞めた理由は、記事数の増加に伴い、サイトの生成に時間がかかるようになってしまったからです。

HugoではOctopressに比べてサイトの生成時間が短いことから、Hugoに移行することにしました。

現在の記事数でのサイトの生成時間は、Octpress(rake generateコマンド)で 20.39秒、Hugo(hugoコマンド)では 2.66秒でした!

他にも、Octpressは直近のコミットが半年前のもので、活発にメンテナンスされていないと感じたことも、Hugoへ移行した理由の1つです。

Hugoのインストール

Macの場合はHomebrewからインストールするのが良いでしょう。

brew update
brew install hugo

Mac以外の方は、公式ページを参考にして、ソースコードからインストールしましょう。

Read more


はじめに

以前、Octopressのpreviewを高速化するという記事を書きました。

この記事では、rake isolaterake integrate を使って特定の記事だけを generate することによって、 rake generate を高速化していました。

しかしながら、この方法は手順が複雑で使うコマンドが多く、面倒だし使い方を忘れるという問題がありました。

通常、最後に保存したファイルを generate することが多いので、これを利用してもっと便利な Rake の task を作ります。

Read more


Octopressの記事の生成が遅い

Octopressを使ってから一年以上が経ちました。

記事の数に比例して、rake generate がアホみたいに遅くなって、耐えられないレベルになってきました。

今日は、rake isolaterake integrate を使うことでOctopressの記事の生成を高速化するテクニックを紹介します。

Read more


定義リストを使いたい

Markdownは楽で便利なのですが、残念なことに標準ではMarkdownは定義リスト<dl>を使えません。

Markdownでは、HTMLを埋め込めるので、手打ちでHTMLを書くことで対処できますが、 それだと負けた気分になってしまいます。

Octopress(というか、Jekyll)では、標準のMarkdownのパーサを変更できるので、 定義リストを使えるParserに変更して対処しました。

Read more


数値シュミレーションという授業で波動関数をシュミレーションする課題がありました。 面白かったので忘れないように、MathJax.rbというプラグインのテストを兼ねてメモすることにしました。 MathJax.rbの導入 MathJax.rbの導入には、30分のチュートリアルでJekyllを理解するが非常に参考になりました。 MathJax.rbをダウンロードして、/plugins/にコピーする。 octopressの場合、_layouts/layout.htmlではなくて、source/_includes/custom/head.htmlに次の行を追加する。 # source/_includes/custom/head.html <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> MathJax.rbの使い方 ブロックの場合、mathとendmathタグで囲む {% math %} Simple\ FDTD\ Algorithm\ and\ Devils\ in\ the\ Details \ \begin{eqnarray} \psi(x,t + \Delta t) &=& -\psi(x, t - \Delta t) + [2 + \frac{v^2\Delta t^2}{\Delta x ^2} d_x^2] \psi(x,t) \ $$ -\psi(x, t - \Delta t) + 2\psi(x,t) + \frac{v^2\Delta t^2}{\Delta x ^2} d_x^2 \psi(x,t) \ $$ -\psi(x, t - \Delta t) + 2\psi(x,t) + \frac{v^2\Delta t^2}{\Delta x ^2} [ \psi(x - \Delta x, t) + \psi(x + \Delta x, t) - 2 \psi(x, t) ] \ \end{eqnarray} {% endmath %} インラインの場合、m とemタグで囲む(下のコードだと、emの部分が消えていますが囲んでください)

Read more


タイトルの通りなのですが、h1レベルの見出しにアンカーリンクをつけるようにOctopressを改造しました。

``の19行目を次のように修正して、 h1レベルの見出しに正規表現でアンカーリンクをつけるようにしました。

# plugins/octopress_filters.rb
@@ -16,7 +16,7 @@ module OctopressFilters
   end
   def post_filter(input)
     input = unwrap(input)
-    RubyPants.new(input).to_html
+    RubyPants.new(input).to_html.gsub(/<h1>([^<].*[^>])<\/h1>/, '<h1><a name="\1" href="#\1">\1</a></h1>')
   end
 end

修正するべき場所がここで本当に良いのか微妙ですが、とりあえず思った通りに動いているので良しとします。

以下、見出しのテスト

見出し1

見出し2

Read more


Octopressで画像などを使うとき、例えば、トップページで表示されるときと記事の詳細ページで表示されるときでは、 ディレクトリの階層が同じならないため、アドレスは絶対パスで指定するしかないのですが、そのときに使えるテクニックを紹介します。

URLを/から指定すると、Octopress側で絶対パスに補完してくれるようです。

例を挙げると、次のような具合に補完してくれます。

例: /images/hoge.png => http://gam0022.net/images/hoge.png

この機能は、plugins/octopress_filters.rbの79行目のexpand_urlsというメソッドで定義されているようです。

Read more


このブログで、カテゴリーに濁点を含んだ日本語を使うと、カテゴリーの一覧などからカテゴリーのページにリンクしたとき、 404エラーになってしまう問題が起きました。 原因は、このブログの開発環境にありました。 このブログは静的コンテンツなのですが、次のような手順でブログを運営しています。 (Rakefileで自動化されていますが、内部ではこうなっています) ローカル(Mac OS X)でブログを生成する。 サーバ(Ubuntu)にRsyncで生成したブログをアップロードする。 Mac OS X では、ファイル名のエンコードにUTF-8-MACを使っているので、 そのままアップロードすると、サーバ上のファイル名もUTF-8-MACになります。 しかし、ファイル自体のエンコードはUTF-8でURLをパーセントエンコーディングしていないので、 リンク先が見つからなくなってしまうようです。 UTF-8-MAC問題について詳しく知りたい人は、こちらなどが勉強になるとおもいます。 解決方法は簡単で、Rsyncでアップロードするときに、–iconvオプションを使い、 ファイル名をUTF-8-MACからUTF-8に変換すれば治ります。 Rsyncのバージョンを3にする Rsyncの–iconvオプションが使えるのは、Rsync3からなのでアップデートします。 brew tap homebrew/dupes #リポジトリを追加 brew install libiconv #iconvオプションを使うために必須のよう brew install rsync 念のため、サーバ側(Ubuntu)のrsync3にします。 aptitude install rsync Rakefileを修正する Rakefileのok_failed system…の行を書き換えます。 desc "Deploy website via rsync" task :rsync do exclude = "" if File.exists?(‘./rsync-exclude’) exclude = "–exclude-from ‘#{File.expand_path(‘./rsync-exclude’)}’" end puts "## Deploying website via Rsync" #ok_failed system("rsync -avze ‘ssh -p #{ssh_port}’ #{exclude} #{"–delete" unless rsync_delete == false} #{public_dir}/ #{ssh_user}:#{document_root}") ok_failed system("rsync –iconv=UTF-8-MAC,UTF-8 -avze ‘ssh -p #{ssh_port}’ #{exclude} #{"–delete" unless rsync_delete == false} #{public_dir}/ #{ssh_user}:#{document_root}") end 完。 これでうまくいきました。

Read more


Octopressはそれなりに高機能なのにも関わらず、なぜかカテゴリーの一覧を表示する機能がありませんでした。 仕方ないので、自分で実装することにしました。 今回の記事は、次の画像のようなカテゴリーの一覧をサイドバーに表示するまでのメモです。 前提知識として、Octopressのサイドバーをカスタマイズするためには、次の2つの作業が必要です。 ここでは、categoriesという名前のサイドバーを追加します。 source/_includes/asides/categories.htmlというファイルを作る。 _config.ymlのdefault_asides:にasides/categories.htmlを加える。ex. あとは、1,のsource/_includes/asides/categories.htmlにカテゴリーの一覧を表示する機能をうまく実装しなくてはなりません。 siteというグローバル変数のダンプを手がかりに、site.categoriesというハッシュが存在することがわかりました。 JekyllのLiquidテンプレートエンジンの文法がよくわからないので、以下のサイトなどを参考にして学習しました。 http://wiki.shopify.com/UsingLiquid http://melborne.github.com/2012/05/13/first-step-of-jekyll/ for item in hash すると、item[0]にキー名、item[1]に値が入る しかし、site.categoriesはカテゴリー名をキーとして値が記事の本文のHTMLへの参照(?)の配列としたハッシュになっており、 そのままではURLが取得できず、カテゴリー名からURLに変換する処理をLiquidの文法だけで実装するのは無理だと気が付きました。 で、どうしたかというと、Liquidを拡張しました。Jekyll::Filtersにメソッドを定義すると、Liquidからそのメソッドを呼び出せるようになります。 最終的に、_config.ymlを編集後、 source/_includes/asides/categories.htmlとplugins/category_generator.rbを次のようにしたら、うまくいきました。 source/_includes/asides/categories.html source/_includes/asides/categories.html はこれだけです。 {.{ の.は消してください。 <section class="well"> <ul id="categorys" class="nav nav-list"> <li class="nav-header">Categorys</li> {.{ site.categories | site_categories_links }} </ul> </section> plugins/category_generator.rb plugins/category_generator.rbのJekyll::Filtersにsite_categories_linksというメソッドを追加します。 module Jekyll module Filters # Outputs a list of categories as comma-separated <a> links. This is used # to output the category list for site’s all categories.

Read more


Octopressでbootstrap-themeにしたとき、sass/custom/_styles.scssが反映されなくなった件について 前回、Octopressのテーマをカスタマイズするという記事で、 Octopressにbootstrap-themeを導入しました。 If you want to add or override styles, edit sass/custom/_styles.scss. This stylesheet is imported last, so you can override styles with the cascade. 上の文はOctopressの公式からの引用で、本来であればsass/custom/_styles.scss に書いたSCSSが最終的にオーバーライドされて適用されるはずです。 しかし、このテーマを導入してから、sass/custom/_styles.scssに書いたSCSS(CSS)が反映されなくなってしまいました。 OctopressのCSS生成の仕組み Octopressでは、sass以下のディレクトリにある.scssファイルを読み取り、 最終的なCSSを生成しているようです。(たぶん) SCSSとは、CSSメタ言語のことで、要するにCSSを生成するための言語です。 本題のsass/custom/_styles.scssが反映されない原因は単純で、 sass/bootstrap/bootstrap.scssを見たら、sass/custom/_styles.scsがimportされていませんでした。 というわけで、sass/bootstrap/bootstrap.scssの最終行に次のような感じでimport文を追加することで解決します。 // Custom @import "custom/colors"; @import "custom/fonts"; @import "custom/layout"; @import "custom/styles"; 後は、sass/custom/_styles.scsに好きな設定を書けばOKです。ひとまず、こんな感じにしました。 // This File is imported last, and will override other styles in the cascade // Add styles here to make changes without digging in too much div.

Read more