OctopressからHugoへ移行する方法

数値シュミレーションという授業で波動関数をシュミレーションする課題がありました。面白かったので忘れないように、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の部分が消えていますが囲んでください)

Octopressの見出しにアンカーリンクをつけるように改造

2013-02-05 Octopress

タイトルの通りなのですが、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

Octopressでパスを指定するときのテクニック

2012-08-15 Octopress

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

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

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

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

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

カテゴリー名に濁点を含んだ日本語が使えない問題を解決する(Rsyncのiconvオプションを使う)

2012-08-11 Octopress, Rsync, Mac OS X, UTF-8-MAC

このブログで、カテゴリーに濁点を含んだ日本語を使うと、カテゴリーの一覧などからカテゴリーのページにリンクしたとき、 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 #リポジトリを追加（2019/06/20追記。この手順は不要になりました。） 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 完。これでうまくいきました。

Octopressでカテゴリーの一覧みたいのを実装する

2012-08-10 Octopress, 日本語, ゴ

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.

Octopressでbootstrap-themeにしたとき、sass/custom/_styles.scssが反映されなくなった件について

2012-07-24 Octopress, CSS, SASS/SCSS, theme, bootstrap

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.