WordPressの記事をHugoに移行する

目的

WordPressのサイトをHugoを使ったサイトに移行しようと思っています。

そのメモ書きです。最後に参考サイトを載せていますが、大変助かりました。
なお、まともな開発環境がない場合を想定しています（開発用PCが調子悪いんじゃ、、、）

内容

WordPressの記事をエクスポートして、Hugoに取り込み、ローカルにて動作確認するまで書きます。
デプロイについては、別記事に書くかもしれません。

実行環境

Windows 10
WordPress5.0.4

やり方

Hugoのローカル確認環境を用意。

HugoのQuickStartはmac前提なので、Windowsでのやり方を書いておきます。

Chocolateyのインストール

https://chocolatey.org/install
Chocolateyでのインストールが一番上に書いてあるので、まずはChocolateyをインストールします。
管理者権限のあるPowerShellにて以下のコマンドを実行します。

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Hugoのインストール

https://gohugo.io/getting-started/installing/
以下のコマンドをPowerShellにて実行すればインストールされます。
extended Sass/SCSSもありますが、よくわからないのでスルーします。

choco install hugo -confirm

Gitのインストール

https://gitforwindows.org/
適当にインストーラ使ってインストールします。

Hugoの動作環境構築

https://gohugo.io/getting-started/quick-start/
QuickStartのStep2以降をやっていきます。基本的にPowerShellでできますが、
echoとかはできないので、普通にファイルを開いて書き込むのがベターです。

Wordpressの記事をエクスポートする

WordPress to Hugo Exporterプラグインのインストール

https://github.com/SchumacherFM/wordpress-to-hugo-exporter
GitHubから、「Clone or download」→「DownlaodZip」が今回は手っ取り早いです。

Wordpressダッシュボードにて、「プラグイン」→「新規追加」とクリックします。
「プラグインのアップロード」からさっきのzipファイルをアップロードして、インストールしたらOKです。

エクスポート

サイドバーにて「ツール」→「Export to Hugo」で少し待つとzipがダウンロードできます。

エクスポートしたファイルを配置

Markdownファイルの移行

エクスポートしたzipのうち、postsフォルダのなかに記事のMarkdownファイルが入っています。
なお非公開の記事もあるので注意しましょう！　一応Front Matterに非公開フラグがついていますので問題ないですが、この際不要なものがないか一度整理するのがいいかもしれません。

このpostsフォルダを、Hugoのcontentフォルダの中に移動すればOKです。

画像ファイルの移行

画像ファイルをWordpress上で管理しているならば、
解凍したzipの\wp-content\uploadsフォルダの中にエクスポートされているはずです。

めんどうな方は、Hugoのcontentフォルダの中に、wp-contentフォルダを移動してやればOKです。

Configファイルの移行

エクスポートしたzipファイルには、config.yamlがあります。内容を適宜Hugo側（デフォルトだとconfig.toml）に移動しましょう。

今のHugoフォルダ構成

ほとんど省略していますが、、、

quickstart
└content
  ├posts
  │ └エクスポートしたMarkdownファイル
  └wp-content
    └エクスポートした画像ファイル等

動作確認

hugo server -D

で実行後、http://localhost:1313/にアクセスすれば動作確認できます。

エクスポートしたMarkdownを修正

想定通り表示されていないところを修正します。スクリプトを組んで自動化するのがいいと思います。
私は記事数が少ないので手作業でやりましたが、、、

私がやったことを列挙しておきます。

• 画像ファイルのパスを変える
• リンクカードを普通のリンクに変更する
• コード部分がHTMLでエクスポートされていたので、Markdown形式に変更する

また、画像ファイルのディレクトリが気に入れない場合は、適当に修正するとよいです。

おわりに

唐突に終わりますが、Hugoにて今まで書いた記事が表示されるところまでできました。お疲れ様です。

この後は、GitHubで記事管理、netlifyでホスティングする感じでやろうかなと思います。
これで監視網を潜り抜けて、会社でブログを書くんじゃ、、、（ぉぃ）

参考

このサイトをみてHugoにしようと思いました。ありがとうございます！

• WordpressからHugoに移行した