Posted at

JekyllからHugoへの移行

More than 3 years have passed since last update.

Jekyllは手軽かつ一般的によく使われている反面、_post内の記事が多くなるに従って構築にとても時間がかかります。そこで、Go言語で書かれたHugoが速度面で非常に魅力的に感じるのですが、いろいろ引っ越しをしなければなりません。JekyllからHugoへのマイグレーションガイドが公式に公開されていましたので、日本語訳を作ってみました。お引越しをお考えの方は、参考にしてください。

原文: Migrate to Hugo from Jekyll


注意: Hugo 0.15はhugo import jekyllコマンドを搭載しています。import from Jekyllをご覧ください。


staticに静的コンテンツを移動する

Jekyllでは、_で開始されない全てのディレクトリがそのまま_site出力へコピーされるというルールがあります。Hugoは全ての静的コンテンツはstaticの下に保持されます。それ故に、あなたはそれら全てをそこに移動すべきです。Jekyllの場合、以下のような感じですが、

▾ <root>/

▾ images/
logo.png

これらは以下になるはずです。

▾ <root>/

▾ static/
▾ images/
logo.png

追加として、あなたは(CNAMEのような)ルートにあるべき全てのファイル群を、staticに移動したくなるでしょう。


Hugo設定ファイルを作成する

HugoはJSON、YAML、またはTOMLで書かれた設定ファイルを読み込むことができます。Hugoはパラメータのカスタム設定もサポートしています。より詳細は、Hugo configuration documentationを参照ください。


公開フォルダの設定を_siteにセットする

Jekyllの初期値は_siteを公開しますが、Hugoではpublicを公開します。もし私を気に入れば、gh-pagesブランチのgit submoduleにマップされた_siteを持ちますが、あなたは2つの代替うち一つを行うことでしょう:

1) _siteの代わりにpublicにgh-pagesをマップするために、あなたのサブモジュールを変更します。(推奨)

git submodule deinit _site

git rm _site
git submodule add -b gh-pages git@github.com:your-username/your-repo.git public

2) または、publicの代わりに_siteを使うためにHugo設定を変更します。

{

..
"publishdir": "_site",
..
}


JekyllテンプレートをHugoテンプレートに変換する

ここがまさに移行作業の大部分です。ドキュメントはあなたの友だちです。あなたが現在のブログを構築した際の記憶を思い起こす必要があれば、あなたはJekyllテンプレートのドキュメントを参照すべきです。そして、Hugoのやり方を学ぶためにHugoテンプレートのドキュメントを参照すべきです。

ここで一つ参考となるデータとして、heyitsalex.netのための私のテンプレートの変換作業は、2,3時間以上費やすことはありませんでした。


JekyllプラグインをHugoショートコードに変換する

Jekyllはプラグインを持っていますが、Hugoはショートコードになります。移行することはかなり些細なことです。


実装

例として、Jekyllを実行する際に、キャプション付きの図を生成するために、私はカスタムimage_tagプラグインを使っていました。私がショートコードについて読んだとき、まさに同じことをする良い組み込みショートコードをHugoが持っていることを見つけました。

Jekyllのプラグインです:

module Jekyll

class ImageTag < Liquid::Tag
@url = nil
@caption = nil
@class = nil
@link = nil
// Patterns
IMAGE_URL_WITH_CLASS_AND_CAPTION =
IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK = /(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"(\s+)->((https?:\/\/|\/)(\S+))(\s*)/i
IMAGE_URL_WITH_CAPTION = /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i
IMAGE_URL_WITH_CLASS = /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i
IMAGE_URL = /((https?:\/\/|\/)(\S+))/i
def initialize(tag_name, markup, tokens)
super
if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK
@class = $1
@url = $3
@caption = $7
@link = $9
elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION
@class = $1
@url = $3
@caption = $7
elsif markup =~ IMAGE_URL_WITH_CAPTION
@url = $1
@caption = $5
elsif markup =~ IMAGE_URL_WITH_CLASS
@class = $1
@url = $3
elsif markup =~ IMAGE_URL
@url = $1
end
end
def render(context)
if @class
source = "<figure class='#{@class}'>"
else
source = "<figure>"
end
if @link
source += "<a href=\"#{@link}\">"
end
source += "<img src=\"#{@url}\">"
if @link
source += "</a>"
end
source += "<figcaption>#{@caption}</figcaption>" if @caption
source += "</figure>"
source
end
end
end
Liquid::Template.register_tag('image', Jekyll::ImageTag)

これはHugoショートコードとして以下のように書かれます:

<!-- image -->

<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
<img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
{{ if .Get "link"}}</a>{{ end }}
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
<figcaption>{{ if isset .Params "title" }}
{{ .Get "title" }}{{ end }}
{{ if or (.Get "caption") (.Get "attr")}}<p>
{{ .Get "caption" }}
{{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
{{ .Get "attr" }}
{{ if .Get "attrlink"}}</a> {{ end }}
</p> {{ end }}
</figcaption>
{{ end }}
</figure>
<!-- image -->


使い方

私は単純に以下のようなコードを:

{% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg

"One of my favorite touristy-type photos. I secretly waited for the good light
while we were "having fun" and took this. Only regret: a stupid pole in the
top-left corner of the frame I had to clumsily get rid of at post-processing."
->http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %}

このように変更しました(この例は、figという名前の、組み込み機能と比べて異なるわずかに拡張されたバージョンを使います):

{{% fig class="full" src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg"

title="One of my favorite touristy-type photos. I secretly waited for the good
light while we were having fun and took this. Only regret: a stupid pole in the
top-left corner of the frame I had to clumsily get rid of at post-processing."
link="http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/" %}}

ボーナスとして、ショートコードの名前付けされたパラメータは、間違いなく、読みやすいです。


最後の変更


内容の調整

Jekyllでの各投稿に行われたカスタマイズの量に依存して、この手順の影響は大きく要求されたり、少なく済む場合もあるでしょう。hugo serverがあなたの友だちであることを除いて、強力かつ早いルールはありません。あなたの変更をテストして、エラーを解決することが求められます。


クリーンアップ

このタイミングで、あなたはJekyll設定を消したくなるでしょう。特に何も利用用途がなければ、それを消してください。


差分による実践的な例

Hey, it's Alexは、JekyllからHugoに「父と子の日」未満でマイグレートされました。この差分を見ることによって、全ての変更(そして失敗も)見ることができます。