Help us understand the problem. What is going on with this article?

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にしようと思いました。ありがとうございます!:bow:

Tebasaki314
広く浅く大体なんでもできますが、基本的に専門の人の話にはついていけないです。
https://tebasaki.xyz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした