OctopressからHugoに移行した

March 9, 2020

OctopressからHugoに移行したメモです。

最近(というか約5年もの間)ブログ書いてないので、久しぶりに落ち着いてきたからブログをつらつら書いていこうかなと思ったけど、 Octopressの更新が2016年から全然進んでないようなので、別のものに移行しようと思い立ちました。

以前からHugoが気になっていたし、 OctopressからHugoへの移行に関する記事はたくさんあるので、それを参考にしながら自分でもようやく移行に踏み切りました。

参考とした記事

Hugoインストール

macを使用しており、brewもすでにインストール済であったため、 brewを使ってHugoをインストールしました。

brew install hugo

インストール後に以下のコマンドでプロジェクトを作ります。公式のQuick Startを参考にしました。

hugo new site hugo-site

中身を確認しましょう。

cd hugo-site
ls

HugoプロジェクトをGitHubで管理したいので、この時点で一旦git initしておきます。

テーマ選び

テーマはthemes.gohugo.ioにたくさん掲載されているので、その中から選びました。

今回選んだのがこのテーマ。

Noteworthy

テーマは以下のように、git submoduleで導入します。

git submodule add https://github.com/kimcc/hugo-theme-noteworthy.git themes/noteworthy

設定ファイルにテーマを記述します。

echo 'theme = "noteworthy"' >> config.toml

Octopress記事の移行

記事数が少なく、vimで直接修正でもいいかなと思いましたが、 ~~久々にRuby使いたくなったので、~~ Rubyで一括修正かけました。画像も全然使ってなかったので、移行は比較的楽でした。

Octopressの記事ファイルをHugoにコピペ

Octopressの記事ファイル
- octopress/source/_posts
Hugoの記事ファイル
- hugo-site/content/post

画像ファイルをコピペ

画像が1つもない ~~さみしい~~ ブログでしたので、コピペ不要でした。

Octopressの画像ファイル
- octopress/source/images
Hugoの画像ファイル
- hugo-site/static/images

日付フォーマットを修正

front matterの date にある日付文字列のフォーマットを変更します。正規表現で日付文字列を取得して、DateTime#parseとDateTime#strftimeを使って変換しています。

# convert date string for front matter
def convert_date(str)
  re_date = /^date: (\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2}|))/
  date = DateTime.parse(str.gsub(re_date, "\\1")).strftime("%Y-%m-%dT%H:%M:%S+09:00")
  return str.gsub(re_date, "date: #{date}")
end

slugを追加

パーマリンクで使用するパラメータslugをfront matterに追加します。今回はファイル名から日付文字列部分と拡張子を除いた部分をslugに設定しています。

# convert date string for filename
def convert_filename_datestring(filepath)
  fn = filepath.split("-")
  date = fn.shift(3)
  return date << fn.join("-")
end

# add slug
def add_slug(str, slug: "")
  return str.gsub(/^title: (.+)/, "title: \\1\nslug: #{slug}")
end

_, _, _, filename = convert_filename_datestring(h_filepath)
target = add_slug(original, slug: File.basename(filename, ".*"))

categoriesをtagsに修正

Octopressでcategoriesで設定していたところを、Hugo向けにtagsに変更します。

# convert categories to tags
def convert_categories(str)
  return str.gsub(/^categories:(.*)/, "tags:\\1")
end

拡張子を変更(.markdown => .md)

Octopressでは.markdownを使っていましたが、Hugo向けに.mdに変更します。

# convert extension
def convert_ext(filepath, ext: ".md")
  return Pathname(filepath).sub_ext(ext).to_s
end

ちなみに、Bashでワンライナーで変換もできます。コピー後に実行すればOK。参考まで。

for filename in *.markdown; do mv $filename ${filename%.markdown}.md; done

参考: ファイルの拡張子を一括で変更する - Qiita

メタデータにauthor追加

私1人だけですので、比較的楽です。

# add author name for front matter
def add_author(str, author_name: @author_name)
  # add below "date:"
  return str.gsub(/^date: (.+)/, "date: \\1\nauthor: #{author_name}")
end

speakerdeck メタタグ修正

参考: Remove the Speaker Deck shortcode from Hugo · Issue #4830 · gohugoio/hugo
参考: mazgi.log :: Hugo 0.42 からSpeaker Deck貼付はshortcodeではなくembed codeを使う

Speaker Deckのスライドを埋め込むshortcodeはHugoのv0.42で削除されたようなので、 OctopressにあるSpeaker Deckのshortcodeを変換する。

data-ratioでスライドの縦横比率を変えられるようで、私のスライドのほとんどが1.33で、1つだけ1.77だったので、一括変換後に一箇所だけ手動で書き直した。

# convert speakerdeck tag
def convert_speakerdeck_tag(str, ratio: "1.33333333333333")
  # ratio: "1.33333333333333" or "1.77777777777778"
  return str.gsub(/{% speakerdeck (.+) %}/, "<script async class=\"speakerdeck-embed\" data-id=\"\\1\" data-ratio=\"#{ratio}\" src=\"\/\/speakerdeck.com\/assets\/embed.js\"><\/script>")
end

markdown内のcommentタグ削除

markdown本文中に{% comment %} ... {% endcomment %}があると、 Octopressではコメントアウト扱いになり、ビルド後の記事には掲載されない。 Hugoでは、テンプレートでは{{/* ... */}}でコメントアウトできるようだが、 markdownの本文中にはコメントアウトできない¹。

今回は、commentタグのブロック毎削除する方法をとりました。

パーマリンクをOctopressに合わせる

config.tomlに以下追記します。

[permalinks]
  post = "/blog/:year/:month/:day/:slug/"

設定ファイル

config.tomlに記述します。テーマ毎に設定できる項目が異なっていることがあるので、テーマで用意されたconfig.tomlを参考にしました。

ビルド

以下のコマンドでプレビューを確認できます。

hugo server

問題なければ、以下のコマンドでビルドできます。

hugo

新規記事の作成

hugo new post/my-first-post.md

front matterに記事のパラメータを記述しておきます。

記事の作成後はビルドをお忘れなく。

デプロイ

デプロイは既存のGitHub Pagesのリポジトリにpushすることで対応します。デプロイ方法は公式のHost on GitHub ページに記載してある方法で実施しました。

hugoコマンドでビルド
publishディレクトリを一旦削除
github pagesのリポジトリをpublicにsubmodule化

git submodule add -b master https://github.com/<USERNAME>/<USERNAME>.github.io.git public

Hugo公式のHost on GitHubページに記載の deploy.shを作成し、実行権限を付与
deploy.shを実行

markdown本文にHTMLタグ有効になっているならが使えるが、ビルド後のHTMLソースには残っている。 ↩︎