WordpressからHugoに移行した時のメモ

Posted by on Sun, Feb 7, 2016

WordpressからHugoに移行してみたので、そのときやったメモを残しておこうかと思います。

おおまかにやったこととしては以下です。

  • WordpressからHugoに変換
  • Github Pagesでホスティング
  • GithubにプッシュでWerker CIを使って自動ビルド&デプロイ

Wordpressの記事をHugoのマークダウンに変換

1.Wordpress置いてるサーバーログインして wordpress to hugoプラグインをダウンロードします。(wordpressのプラグイン検索ではみつからなかった)

$ git clone https://github.com/SchumacherFM/wordpress-to-hugo-exporter.git wp-content/plugins/wordpress-to-hugo-exporte

2.変換を実行します。

$ cd wp-content/plugins/wordpress-to-hugo-exporte
$ php hugo-export-cli.php

This is your file!
/tmp/wp-hugo.zip

3.変換されたwp-hugo.zipをローカルにダウンロードします。

4.画像パスなどがWPとHugoではことなるので、変換します。

  • hugo-export/post を content/postに移動
  • hugo-export/images を content/uploadsに移動してuploadsをimagesにリネーム

のように一括置換すればよいでしょう。これでもパスが異なることがあるかも。

Hugoで公開する準備

Githubで、2つrepositoryを作成します。

  • hugo_gh_blog : 名前はなんでもOKです。これはblogのバージョン管理用です。ブログ記事を書いたらコチラにプッシュします。
  • <username>.github.io : こちらが公開用になります。(デプロイ先です)

cloneしてきたhugo_gh_bloghugo new site .してHugoサイトを作成します。 その辺りは Hugoの公式サイトQuick startを見て下さい。

テーマ

テーマは こちらにまとまってるので、こちらからダウンロードします。

ぼくはcrispというテーマをカスタマイズしています。

% git clone https://github.com/kwmt/hugo-theme-crisp themes/hugo-theme-crisp

として、themesの下にテーマをcloneします。

% hugo server --theme=hugo-theme-crisp

で確認できます。

git管理

テーマはhugo_gh_blogレポジトリにaddしてしまいました。git submoduleの使い方がよくわからなくて。 ので、thmemes/hugo-theme-crisp/.git は削除しています。

hugo serverとするとpublicディレクトリができますが、こちらはgit管理にしないでください。gitignoreにかいておくとよいと思います。

Wercker CIと連携

Hugoの記事作成からブログ公開までの流れとして、

  1. 記事を書きます。
  2. hugoコマンドでビルドします(publicディレクトリが作成されます)。
  3. publicディレクトリをサーバーにアップロードします。

という流れになります。それを記事を書いてgithubにプッシュしたら上記の2,3は自動でやってもらうようにする設定をします。

WerckerCIのアカウント作ったり、ブログ管理用のレポジトリと連携させたりする基本設定はググるとして、 wercker.ymlにビルドツールやデプロツールを使用するする記述をしてしまえば終わりです。

(slackに通知させるようにしていて、DeployとBuildは同じように書いてるのですが、Deploy時は通知来て、ビルド時に通知がこなくて困ってます。。)

これで、 hugo_gh_blogレポジトリにプッシュしたら、公開用のGithubPagesにデプロイされるようになりました。

記事作成手順

記事ファイル作成して、記事書いて、コミットして、プッシュ

% hugo new post/2016/02/foo.md
% git add content/post/2016/02/foo.md
% git commit -m 'add foo'
% git push

記事ファイルのディレクトリ構成は、まだ迷ってますが、わりと不満のない環境になりました。

参考

自分のGitHub Pagesと独自ドメインの設定方法

werckerでhugoビルド→githubにデプロイ · negimic blog

blogをoctopressからHugoに乗り換えたメモ

HUGOを使ってサイトを立ち上げる方法

WordPressからGitHub Pages + hugoに移行した



comments powered by Disqus