WordPressからHugoへ乗り換え

Feb 17, 2020 · 1 分で読了 ·

下記にてHugoに乗り換えまでの経緯と乗り換えた理由と乗り換えて順ざっくりとを書いています。

なんとなくの経緯

会社でWordPressを使う。
WordPress自由度凄すぎｗｗｗ何でもできるじゃんｗｗｗｗって気分になる。
会社で一通りPHPもWordPressも触ったし、プラグイン作ったり改変したりできたし、テーマも自分で作れた。
案件終了
自分でドメインを試しにとったから遊ばせるのも何だと思い、さくらインターネットのWordPressが使える最安プランを契約する。
色々調べてWordPressを構築する。
初期状態なのに遅いことに気がつく。
プラグインを入れてなんとかならないか頑張る。
諦める。
1年か2年ほど経過してPHPのバージョンが上がる。
上げた結果ちょっと早くなる。
（この間ちょいちょい更新する）
ログイン遅いしコメントのスパムいっぱい来る
アタックが多いみたいなのでログインに制限をかける。
なんか遅いから更新はするけどだいたい放置する。
飽きて放置する。
Hugoという静的サイトジェネレーターとNetlifyを知る。
やってみっかの精神でWordPressからデータ引っこ抜いてHugoに適応する。
画像やら記事やらが中途半端だから手動で修正する。
config変更して調整しつつGithubにプッシュする。
細々とした手直しを繰り返す。
なんとなく良さげなとこまで来たから一通りファイルを再度プッシュしてDNSをNetlifyのものに変える（ドメイン側を変更）
半日経過して適応される。
忘れないうちにメモを兼ねてこの記事を記載する。　← NEW

なんでHugoなの？

最初に静的サイトジェネレーターというものがあり、WordPressから乗り換えを行ったという記事を見て興味を持った。
調べてみるとマークダウン形式で書いていくことで記事を管理できるということで更に興味を持った。
静的サイトになるため、速度がWordPressと比にならないくらい早くなるでということを知った。
静的サイトジェネレーターなるものは結構いっぱいあるみたいだけど、GolangのHugoが速度の優位性が圧倒的だと知った。
個人的にGolangは好きな部類なのでこれは神のお告げ（無宗教だけど）だと思って乗り換えを決意。
優位でいうとGithubにファイル郡があるからバックアップ不要だし、早いし、Githubさえ無事ならだいたいセキュアだし、マークダウンだし、テキストファイル管理だしで決めた。
ちなみにマークダウンはメリットでもありデメリットでもあるが、個人的にはQiitaに投稿したりローカルメモをマークダウンで書いたりしてたからデメリットたり得なかった。
まぁ速度最強と聞けば即決断レベル。
他のはNode.JS（ほかも何個かJS系あるし）やらPythonやらRubyとあるが、そらGolangと比べると遅いわな・・・っていうメンツ。
将来性を見据えるとHugo一択でした。

WordPressから撤退について

細かい手順になります。
WordPressには、Hugoに移るための「wordpress-to-hugo-exporter-1.9.0」というものがあります。
記事をすべてマークダウン且つHugoのmdファイルに変換してくれます！！！素晴らしい！！！！！！！と思いました。
まず、WordPressの管理画面からプラグインインストール画面にてwordpress-to-hugo-exporterと検索します。
ヒットするのでインストールします。
このプラグイン使う場合は大体コンソールとかで「hugo-export-cli.php」をphpスクリプトとして実行すると書いてたりします。
コンソールって開けたっけ・・・？あれ？開けないんでね？って思いました。（VPSでないからね！）
あーこれは使えんわって思ったけど、ふとWEBで見れるならプラグイン直打ち行けるのでは？と思いました。

1http://｛自分のドメイン｝/wp-content/plugins/wordpress-to-hugo-exporter-1.9.0/hugo-export-cli.php
2http://｛自分のドメイン｝/wp-content/plugins/wordpress-to-hugo-exporter-1.9.0/hugo-export.php

このどちらかを実行してください。
どっちを使ったかは忘れました。
するとしばらくWEBのロードが走り、ファイルをダウンロードできました。
この中にHugoへ適応するファイル群が入っています。
その後にWordPressにて「BackWPup」というDBバックアップ用のプラグインをインストールして、SQLをダウンロードします。
ちなみにプラグインインストール後管理画面内の左にあるメニューの下らへんに「BackWPup」を入れたことによるメニューが追加されていたのでそこからSQLダウンロードできました。
このあとに年には年をいれ、FTPでアクセスして中のファイルをごっそりダウンロードします。（/wp-content/cacheとかいうフォルダの中に文字化けしたのいてダウンロード断念）

これでWordPress側の撤退作業終了。

新WEBページについての作業

上記でバックアップができました。
わーいと思ってローカルにてHugoの環境構築としてHugoをダウンロードして、環境変数に追加後、Hugoが使えることを確認します。
その後にGithubのプロジェクトを作成して、Hugoでファイル群を作成（詳細めんどくさいから割愛）したあと、Hugoのテンプレートページで今のテンプレートを見つけます。
ダウンロードして適応し、サンプルページが完成します。
よし、ここにWordPressのプラグインで変換したものをおいたら完了だ！と思ったら夢物語でした。
WordPressからの変換は確かに行われていますし、画像や固定ページのダウンロードが行われていました。
適応した結果、下記の問題が発生しました。

画像が表示されない
リンクが付いていたりついていなかったりする
画像が表示されない
画像のリンクが変
ソースコードなどを参照表示？させる機能がうまくいっていない

ちなみに画像のリンクは「https://i0.wp.com/」というものが使われており、これはCDN系の機能らしいです。
コレ自体は無害でWEBがくっそ遅いから画像を別サービス経由させて早くダウンロードできるように（自動で）していたみたいです。

これらを手動で修正する必要がありました。
やるとわかりますが、少ない記事でも面倒なので膨大な記事を持つWordPress保有者はHugoに移るのが大変そうです。。。
変換も中途半端だったり動きはする状態だったりしますので、目視で確認後手動で変更を繰り返すことでとりあえずパット見変ではないかな？ってとこまで来ました。
（固定ページ変だけどね）

ここまで来るとメニューにアイコンを載せる方法を模索したり細かいところに気を配ったあとGithubにプッシュしてコンテンツ部は終了です。

ドメインの作業

上記のバックアップ及びコンテンツ入れ替えのあとにドメイン側の設定を書き換えるのですが、ドメインの設定でドメインとIP紐付け設定でNetlifyで提供されたアドレスを紐付けできませんでした。
Netlifyではアカウントを作るとサブドメインが払い出されます。
「cocky-kilby-51326f.netlify.com」(私はこういうの)
CDNというアクセス者が一番近い拠点からコンテンツをダウンロードできることでWEB表示速度を上げる技術を使うにはこれを設定しなければならないらしいです。（代案としてロードバランサーに設定するなどあるっぽいがその場合CDNが使えないという記述が！）
CDNは体験してみたいのでぜひ設定しようと、ムームードメインの管理画面から設定をします。
「設定が反映されましたと。」出ますが、再度ページに訪れると元の設定のままでした。
どうやらIPアドレスでなければ設定できないようです。
CDN使えないじゃん！！！！！って思いましたが、Netlifyさんは素晴らしいサービスでDNSも提供されておりました。
そこでDNSをムームードメイン管轄のものではなく、Netlifyのものに変更しました。
半日ぐらい経過したら新しい今のWEBに切り替わりました。

その後作業

WEB再構築おわりーのドメイン変更おわりーのでさくらインターネットさんのサービス解約依頼を出しました。

ざっくりとですが、これが現状の作業です。
参考になれば幸いです。

残作業

GoogleAnalyticsを再設定
Googleのだったかの広告再設定
固定ページや記事の修正
問い合わせページをとりあえず動くようにする

ぶっちゃけいらない機能あるけど、「できるけど使わない」っていうスタンスが好きだからやろうかな。
現状素晴らしいのが私のような底辺だと完全無料で完結するサービスなので、ドメイン費用さえ払っていれば色々高速で動かせる環境ということになります。
これは技術者として技術を身につける助けになり、手軽に高速に楽しめることを考えると最高ですね！
以上！！！！