3 May 2018

WordpressからHugoに移行した

はじめに

WordpressからHugoに移行してみました。移行した理由はこんな感じです。

Markdownで気軽に記事を書きたかった
技術ネタ以外のことも書きたかった
Hugoは static site generators なので表示が速い
友人がHugoを最近使い始めて気になった Hugo + Netlifyでブログを再構築 - ぴよログ

ということで、WordpressからHugoに移行した際のポイントと方法を書きます。

wordpress-to-hugo-exporterプラグインを使って既存のコンテンツを書き出す

Wordpressから既存のコンテンツをMarkdown形式で書き出す為の便利なプラグインを利用します。

wordpress-to-hugo-exporter

ただし、Wordpressのプラグインページからは検索することが出来なかったので下記のように進めました。

プラグインのGithubページからZipファイルをダウンロード
ZipファイルをWordpressのプラグインページからアップロード
sshでサーバーに接続してアップロードしたプラグインディレクトリでphp hugo-export-cli.phpを実行
エクスポートされた/tmp/wp-hugo.zipをFTPツールなどでローカルにダウンロード

ディレクトリ構造を揃える

プラグインで出力した記事はhugo-export/posts/2016-05-23-browser-pencil.mdの様な構造になっています。

これを元の記事のディレクトリ構造と揃えて、過去のURLでアクセスできるように/archives/2016/05/browser-pencil.mdに変更します。

post/をarchives/にフォルダ名を変更してhugo-export/でirbを起動して下記のコマンドを実行します。

# cd hugo-export/後にirbを起動して実行
require 'fileutils'
dir = Dir.open('archives')
dir.each do |value|
  file = value
  unless result = file.match(/(\d+)\-(\d+)-\d+-(.+)/)
    next
  end
  puts result
  year_path = "archives/#{result[1]}"
  unless Dir.exists?(year_path)
    Dir.mkdir(year_path)
  end
  month_path = "#{year_path}/#{result[2]}"
  unless Dir.exists?(month_path)
    Dir.mkdir(month_path)
  end
  FileUtils.cp("archives/#{file}", "#{month_path}/#{result[3]}")
end

画像のディレクトリを変更する

Wordpressでは標準で（確か）wp-content/に画像ファイルを配置しています。そのため、画像ファイルもhugo-export/wp-content/に書き出されています。

Hugoではstatic/の配下に画像を配置するのが一般的な様なのでwp-conten/をimages/というフォルダ名に変更します。 static/にコピーして、記事内の画像パスも一括置換します。

Hugoを準備する

HugoのQuick Startの通りに準備します。

Quick Start | Hugo

HugoディレクトリのcontentにWordpressから移行したarchivesをまるごとコピーします。

あとは、ホスティングサービスにデプロイすれば完成です。ちなみに、僕はNetlifyを利用しました。

Host on Netlify | Hugo

まとめ

Wordpressでコードを色付けして表示するためにcode-colorというプラグインを使用していました。その影響で記事内に[cc]~[/cc]という記述が入ってしまっていたので、これをMarkdownの形式に変更するのが結構たいへんでした。

それでも、ローカルでMarkdownで書けて、git pushするだけでデプロイされるのは、日々コードを書いているプログラマーからするととても書きやすいですね。ということで、少しづつ自分の手に馴染むブログにしていきたいと思います。

Let’s enjoy Hugo.