1. Home
  2. /
  3. Hugo
  4. /
  5. ブログをWordPressからHugoに移行した

ブログをWordPressからHugoに移行した

ブログをWordPressからHugoに移行した

このブログを放置して早3年半くらいの月日が経ってしまいました。

元々このブログの構成はさくらのレンタルサーバーにWordPressを乗せてというシンプルなものでした。しかし、脆弱性が生まれないようにWordPressを更新していくのが面倒になってきました。 そのため、静的サイトジェネレーターのHugoに移行することにしました。

Hugoのインストール

Hugoは静的サイトジェネレーターのため、執筆する端末にHugoをインストールします。

Installation

Install Hugo on macOS, Linux, Windows, BSD, and on any machine that can run the Go compiler tool chain.

Macの場合は上記公式サイトを参考にHomebrewで一発です。またDocker Imageもあります。

WindowsでもChocolatey対応なので楽にすみます。(最近ちょっとずつChocolatey対応が増えてきているので嬉しい限りです)

またGitも使うためインストールされていない場合はインストールしておきます。

Hugoの設定

Quick start

Learn to create a Hugo site in minutes.

上記公式のクイックスタートを写経します。 動けば環境は問題ないので写経したものを削除して新たにカスタマイズします。

まず重要なのがテーマ決めです。WordPressと同じく、1枚LPからブログ、プロフィール用などさまざまなテーマがあるためHugo公式のテーマ一覧やネットの海から捜索します。

Complete List

テーマはGitのサブモジュールとして追加します。

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

各種テーマ毎に設定ファイルはありますが、その設定を超えてデザインを変更したい場合があると思います。

例として、

themes/sample-theme/layouts/partials/header.html

のデータを編集したい場合はプロジェクト直下に同じパスでファイルを作成します。

layouts/partials/header.html

これでビルドの際に変更後のデータで上書きされます。

Hugoテーマ「Salt」

今回ブログテーマを検討した結果「Salt」を使用することにしました。

Hugoブログテーマ「Salt」

採用理由として

  • これまで利用していたWordPressと似たようなデザイン
  • 日本人に馴染みのあるデザイン
  • ドキュメントが豊富

が理由です。

この「Salt」テーマはGitHub上で公開されており、製作者のサイトでもドキュメントが書かれています。 さらにZennにて有料で製作者がHugoをはじめて扱う人でも分かりやすい導入方法を纏めて下さっています。

シンプルなHugoブログテーマ「Salt」をつくりました

「Salt」はシンプルなブログを低コストで作成できる。を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。

この方式は、製作者への寄付と導入コストの低減を両立できるため、非常に効果的だと感じました。

したがって本記事では「Salt」テーマの導入方法は割愛します。

WordPressデータの書き出し

WordPress時代でもMarkDownで記事は書いていたので、GitHub上には記事のソースが残っていましたが、 そこからさらにWordPress上で微調整をしていたため完成データとしてWordPressから出力することにしました。

今回参考にしたのが下記サイトです。

WordPressの記事をMarkdown形式に一括出力する方法

WordPressで運営していた記事をJAMStackサイトに移行したり、GitHubで管理したいというとき、記事数が少なければチマチマ手作業でも問題なさそうですが、数十、数百の記事を手作業するのはさすがにしんどいですよ […]

こちらの方法でWordPressのデータを書き出すと、MarkDown形式で記事が出力されます。 そのため同じくMarkDownで記載するHugo用として使いやすい状態でDLできて大変便利です。

またリンクしてある添付画像も根こそぎDLしてくれ、/images配下に配置してくれます。

ただしこのツールを使ってもそのままHugoにインポートはできません。Hugoでは記事先頭にメタデータとしてYMLがくっついているためです。

そのYMLデータもPythonなりで少しコードを書けば自動付与する事は容易だと思いますが、今回は記事数があまり無かったので手作業の温かみを持って対応しました。

これはカテゴリやタグを再調整する良い機会にもなりました。

ビルド

Hugoコマンドを入力することでビルドが走ります。

ビルドが完了すれば、結果として得られる静的データは任意のストレージにアップロードするだけで利用可能となり、非常に扱いやすくなります。

まとめ

今回はWordPressからHugoへの移行を行いました。これで本ブログをいくら放置してもセキュリティリスクはほぼ無くなりました。

そのためHugoに移行してから安心してこの記事を書くまで3か月間放置することができました。

さてこのままでは記事の執筆、ビルド、デプロイが手動のままですので次回はCloudflareを利用して自動化を行いたいと思います。

関連記事

HugoをCloudflare Pagesで自動ビルド・デプロイする

HugoをCloudflare Pagesで自動ビルド・デプロイする

前回の記事でHugoでブログを作成しました。しかし現状では手動ビルド、アップロードが必要です。 ブログをWordPressからHugoに移行した このブログを放置して早3年半くらいの月日が経ってしまいました。 元々このブログの構成はさくらのレンタルサーバーにWordPressを乗せてというシンプルなものでした。しかし、脆弱性が生まれないようにWordPressを更新していくのが面倒になってきました。 その