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


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

WordPressでずっと運用してきたのだけど、PHPやWordPressの脆弱性の多さにつかれたのと、そろそろVPS自体管理するの辞めたいと思っていたので、static site generatorであるところのHugoを使ってGithub Pagesで運用することにしました。

Hugo :: A fase and modern static website engine

  • CLIだけで操作できて素晴らしい
  • サーバの管理から開放されて素晴らしい
  • Markdownで書けて素晴らしい

static site generatorは上記の点が素晴らしいのですが、Jekyll・Octopress・Middlemanなどいくつも選択肢がある中でHugoを選んだ理由は

  • 純粋にgolang使いたかった
  • ファイルの生成がすごい速い
  • ローカルでserver立ち上げて、ファイル更新すると勝手にリロードするところまで面倒みてくれる

というところ。ただデメリットもあって、まだイマイチマイナーなため、themeの数が少ないです。あと単純に-t hogehogeでtheme選ぶだけではERROR出て動かないことがままあります。

install

Macならbrew install hugoで一発です

作業ディレクトリの作成

hugo new site nobu666.comを適当な場所で作ります。

themeを選ぶ

git clone --recursive https://github.com/spf13/hugoThemes.git themesで一括で持ってこれます。が、ここにはないthemeを公開してる人もいるので、好きなのが決まってればそれをthemes/の下にgit cloneしてくればいいです

WordPressからimport

wp-xml-hugo-import.rbをまるっと拝借して、WordPressからexportしたxmlを変換します。自分のblogではpermalinkがyyyy/mm/dd/post_id.htmlだったので、それに合わせてslugの指定を削除したり、ソースコードの部分を[sourcecode][/sourcecode]で囲んで書いていたのでそこをmarkdownに書き換える処理を入れたりしました。あとtitleに " が入ってるとparse errorになってしまうので、\"に置換しておきます。ファイル名も yyyy-mm-dd-post_id では都合がわるいので、既存の形式に合わせてmkdirしたり出力したりします。

画像を持ってくる

既存のサイトのwp-contents/uploadsから、ローカルのstatic/imagesにscpなりなんなりで持ってきます。

ローカルで起動

hugo server -t テーマの名前 -D -wでローカル環境が起動します。 http://localhost:1313をブラウザで開いて動作確認しましょう。サイト名とかslug使わないで.htmlにしたいとか、そういうのはconfig.tomlで設定します。残念ながらconfig.tomlの変更はライブリロード対応してないので、変更したら立ち上げ直す必要があります。自分の場合はslug使っていなかったので、uglyurls = trueはとりあえず必須でした。

公開用のファイルを生成する

hugo -t テーマの名前でファイルが生成されます。

公開する

publicディレクトリでgit initとかごにょごにょしてアカウント名.github.ioなリポジトリにpushします。基本的にはこれでおしまい。

独自ドメインでGitHub Pagesを使う

subdomainありかなしかでやることが違います。

  • subdomainありの場合
  • DNSでCNAMEレコードを追加
  • publicディレクトリにCNAMEファイルを作成してpush
  • subdomainなし(Zone Apex)の場合
  • DNSのAレコードを以下の2つ追加
  • 192.30.252.153
  • 192.30.252.154
  • publicディレクトリにCNAMEファイルを作成してpush

今後の方針

本家のチュートリアルに従ってWercker使ってpushしたらそのまま公開される仕組みにしたい。