ブログをWaordpressからHexoへ乗り替えた話
去年の年末にWordpressのテーマがブッ飛んで何にもアクセス出来なくなってしまったので、それを機に
「ちくしょう、乗り替えだ！」
と、前々から気になっていた「静的サイトジェネレーター」の中からHexoを利用してみました、というお話です。
結構長文だよ。
目次
Wordpressがぶっ飛んだ
事の発端は、利用していたテーマ内の設定でやらかしたようで、ページ表示はおろかログイン画面も出なくなるという事態に見舞われました。
すぐに該当ファイルなどを修復したりしたのですが、テーマ側の設定がデータベースにあるらしく、改変前のファイルへ差し替えてもページを表示させようとするとテーマの設定が走って改変が入ってしまい、結局何も表示されないという負のスパイラルから抜けられなかったんですよね……。
配布元のサイトを見る限りでは、全部走らせても問題ない（全部走らせた後にスコアサイトで満点取ってるのを見た）みたいな感じで書かれていたのだけど、ウチの環境じゃマズかったんでしょう。
ちなみに、やらかした設定はHTML、CSS、JavaScriptをそれぞれ圧縮して読み込み高速化を図る設定でした。
多分JavaScriptで何かあったんだろうなーと思われ。
でも、初期値のまま何も変更とかしてないんだけどなぁ……。
利用していたテーマファイルをひとつひとつ見つつデータベースを変更したりとか前ならやっていたんですが、前々からWordpressの管理に辟易していたのでそれをしようという元気も無く。
もっと簡単に管理の出来るものへ乗り替えるいい機会だなと思ったので、これを機に長年の野望であった脱Wordpressをしました。
他にも脱Wordpressをしたい理由があった
他にも、Wordpressやめたいなと思う理由もあったりしました。
- ログインしないと何も出来ない事に疲れた
- バージョンアップが頻繁過ぎて追いつけない
- 故にプラグインとの相性確認に疲れた
- 何度かWP本体の脆弱性を突き記事を改ざんされて悪意のあるコードを埋め込まれた事があった
Wordpressが5へメジャーアップデートされた際に一新されたエディタ「Gutenberg（グーテンベルク）」とも相性が悪く、使い続ける事に嫌気が差した事に拍車を掛けたという事もありました。
ログインしないと何も出来ない事に疲れた
Wordpressを離れたいと思った一番の原因です。
何をするにもまずログインをしないといけない。
ちょっと記事の編集をするだとか、ちょっとテーマを弄りたい時でもログインしないと出来ない（特に記事を弄る場合は）。
今となっては様々なWebサービスがあり、サービスを利用する際にログインを経由するのは当たり前なネットワークのシステムですが、これって本当に億劫に感じるんですよ……。
バージョンアップの頻度が多すぎてついていく事に疲れた
自分がWordpressを使い始めたのは、まだバージョンが2.4とかそこらからだったのですが。
メジャーバージョンが３になったくらいから多く注目を集め出したのか、Wordpressが持ち上げられる事が多くなってきました。
ユーザーが爆発的に増えるとその分メンテナンスの手間も多くなるのでしょう、アップデートの頻度も比例して多くなってきたように思います。
この頃から、利用しているプラグイン等が本体のバージョンアップの内容如何ではそのままでは動かないものも増えて来たように感じました。
プラグイン作者様が対応して下さるものはそれを利用させて頂くのですが、更新がされないものや自分でコードを書いたものなどは自分で検証しないと安心して利用出来ないので、バージョンアップの度に検証作業をしていました。
が、バージョンアップの度に利用しているプラグインの相性確認をするのも結構疲れるものです。動かない場合、本体ソースから読まないといけないですし。
脆弱性を突いた攻撃に２度晒された
脆弱性を突かれた改ざんにも２度ほど合いました。
１回目の発覚は、たまたま何か確認する為にブラウザでページのソースを表示した時でした。
見慣れぬJavaScriptの記載がページ最下にあって「なんだこれは」と。
調べてみると「JSRedir-R」(通称GENOウイルス)が巣食っていたようで。
サイトの方はすぐに対策を取り自マシンもしつこい程スキャンしましたが、自マシンには何も無かったので、ページの改ざんだけで済んでいたのだなぁと。
２回目は、Wordpress本体の脆弱性を突いたサイト改ざんに合った事をさくらレンタルサーバーさんから連絡を受けて発覚した事でした。
全世界で結構大きな被害を出した改ざん被害だったようで、ウチもご多分に漏れず被害にあった感じで。
この時はデータベースも改ざんされた跡があって、それを修正する手間も掛かりました。
この頃から、たかが日記程度しか書かないコンテンツ（それも更新頻度も低い）にここまで大がかりなCMS使う必要ないんじゃない？と思い始めました。
むしろCMSとかブログシステムじゃなくてHTMLベタ打ちでも全然問題なくない？って。
最初は、一番最初にサイトを始めた頃みたく、HTMLを全部ベタ打ちして日記を更新していくか、みたいに考えていたのですけども。 ちらっと聞きかじっていたHTMLを自動生成出来る「静的サイトジェネレーター」に興味が沸き、調べる事にしました。
選定で迷った
Wordpressからの乗り替え先を探す際、データベースを利用しないものを最重要項目として探しました。
今はデータベース不要のCMSとか出ているんだなぁと最初はGravを利用しようと思っていたのですが、ログインしないと何も出来ないのが嫌だったんだと思い直し、プレーンなHTMLを生成する「静的サイトジェネレーター」を利用する事にしました。
静的サイトジェネレーターって？
簡単に言えば、静的サイトの要であるHTMLファイルを自動生成してくれるプログラムの事です。
そもそも「静的サイトとは？」という話にもなりますが。
これも簡単に言えば、
- 静的サイト：既に生成されたHTMLファイルをページとして表示するサイト
- 動的サイト：随時必要に応じてプログラムがHTMLファイルを生成してページを表示するサイト
となります。
Wordpressは、ユーザーがページを表示するリクエストを送った際（つまり、見たいページのURLにブラウザでアクセスした際）に、利用するテンプレートと本文が格納されているデータベースから該当する記事を引っ張り出してその場で組み立ててからユーザーへ見せている「動的サイト」を作るシステムです。
これがWordpressのサイトの表示が遅い最たる理由にもなります。（それも脱Wordpressしたかった理由のひとつ）
動的サイトと違うメリットと感じる所は、作業が全部ローカル（オンライン上ではなく自分のPC内）で済む点でしょうか。
オンラインへのアクセスは、生成したHTMLファイルをサーバーへアップロードする時だけなので、更新や移動の際のサーバーの反応の遅さにイライラする事もなくなります。
個人的に結構重要なメリットです。
「Hexo」を選んだ
そんな静的サイトジェネレーター。ひとことで言っても色々種類が数ありまして。
2020.02.15現在、これだけの静的サイトジェネレーターがあるそうです。
たくさんあるなぁ！
ざっと「静的サイトジェネレーター」で検索するとよく名前を見るのは、「Jekyll」や「Next.js」や「Gatsby」、「Hugo」「Hexo」でした。
JavaScript系が扱いやすいので、JavaScript製のものにしようと、「Next.js」「Gatsby」「Hexo」が最終候補として残ったのですが。
個人的に名前の響きがイノグレ作品のあの人に似ているので「Hugo」を推したい←不純な動機
それはともかくとして(笑)
「Next.js」「Gatsby」「Hexo」の３つを何となく触って、見た感じのテンプレートエンジンの学習コストの低さで自分的に一番簡単だった「Hexo」を今回利用する事にしました。
乗り替えは簡単じゃなかった
躓いた点、不足している点などが多くあり、思っている以上にWordpressからHexoへの乗り替えは簡単じゃなかったんです。
以下、そういう苦労話。
記事の変換で躓いた
まず、データベースにあるWordpressの記事をMarkdownファイルへコンバートする所から躓きました。
記事をコンバートするプラグインがあるっちゃあるんですが、それが作動しなくて。
にっちもさっちも行かなくなったので、平行して触っていたHugoのコンバーターを使ってMarkdownファイルへコンバートしました。
なので、結局全記事に手を入れる修正をする羽目になってしまったという。
いや、それは別によかったんだけどさ。リンク切れてる所や書き換えたかった情報とかもあったので。
記事数が少なかったのが幸いだったなと切に思ったとかなんとか（まだ過去記事移行中ですけども）
思ったより利用出来るテーマの数が少ない
Wordpressを利用していた時間が長いせいか、この点が少し引っかかりました。
オリジナルのテーマは本当に少数で、あとはその派生のテーマが多い印象。
イチから自作したいとかガツガツとカスタマイズとかせずに有り物だけで運用したいという方には、ちょっと敷居が高いように思いました。
自分が作りたいなと思うデザインに近いものがなかったので、他のサービス用のテンプレートを移植＆おれおれカスタマイズ仕様で作成しました。
移植と言っても中のCSSなどは全部イチからこしらえたもので、デザインだけ模倣したという感じ。
……ですが、作った後に気付いたんだけど、作成の際に参考にさせてもらった「Apollo」というテーマはHexoにも移植版があったんですよね……(´ω｀)
調整するのに後からテンプレートや一部CSSのコードなどをとても参考にさせて頂きました。
プラグインも少ない
Wordpressと比較すると、機能を追加する類いのプラグインというより、どちらかと言えばHexo本体周りの最適化やファイル書き出しなどの補助的なプラグインが多いなという印象でした。
何をするかにもよるのだけど、本体の組み込み機能だけでおおまかな事は出来てしまうからそんな印象。
マニュアルがあまり易しくない
……と、感じました。
これは利用するジェネレーターによりそうだけど。
コードの例はあっても、どういう動きをするのかという動作例までが記載されてない事の方が多くて（コード見たらわかるでしょ？と投げっぱなし感がすごくて）、検証するのに時間が掛かりました。
英語わからないと更につらいのがつらたん(´Α｀)
決して「全部入り」のサービスではない
「静的サイトジェネレーター」とはあくまでもページを自動生成してくれるプログラムであって、Wordpresssやらはてブやらアメブロやらとは使用感が全く違います。
また、いわゆるCMS（コンテンツ・マネジメント・システム）で作れる「ブログサイト」と比較すると、圧倒的に色々なものが足りないなとは思います。
例えば、記事毎のコメント機能やメールフォームなど。
バックエンドエンジンにPHPなどを利用しないプレーンなHTMLページなので、コメントやメールのフォームなどが置けない（ブログ内だけで完結しない）のです。
なので、Wordpressの「ContactForm 7」みたいにプラグインでちょちょっと追加して使う事が出来ません。
利用しようとすると、別途フォームのスクリプトを用意したりGoogleフォームなどのWebサービスを利用する事になります。
コメント機能でしたら静的ページで利用出来る「Disqus」というコメントサービスもあるので、そちらを利用すればお手軽にコメント機能を搭載出来るかと。
シェアボタンなどの追加も「プラグインで簡単挿入！」とかではなく（ほぼ）自力実装となります。
これも一長一短で、カスタマイズが嫌な方はめんどくさいだろうし、自分でボタンデザインなどをするのが好きな方は嬉しいだろうし、と好みが分かれそう。
あとは、サイトの検索機能。
Wordpressのようなサーバーインストール型やはてブやFC2ブログなどのWebサービスとしてのブログにある検索も、バックエンドにスクリプトが走っている場合なら簡単に実装する事が出来ます。
が、静的ページなのでそういう動的コンテンツを利用出来ない。
実装する場合、最も簡単なのは外部のサービスであるGoogleのカスタム検索を利用するのが手っ取り早いかと。
これは無料で利用できますが、代わりに広告が入るのは致し方ない所。
他にも検索サービスがありますが、無料版だと検索上限に掛かったりとかちょっと不便そうな雰囲気があります。
こういう所は、データベースでデータを管理する事のメリットだと思いました。
他にも、ブログではよく見るであろう「ブログカード」や「関連記事」のリンクだとか、１枚の画像から複数のサムネイルなどを生成したりする画像周りの管理とか、そんな細かい所なども自分で管理しないといけない（システムに投げっぱなしに出来ない）所は、初心者向けではないよな、と思います。
総じて
個人的には、静的サイトジェネレーターでブログを構築出来るようになったのは自分にはプラスになったので満足しています。
HTMLページでのサイト公開というのは、今の「Retrovirus」になる前、まだDreamcastでテレホタイムを使ってネットサーフをしていて、Yahoo!に統合される前のジオシティーズにサイトを持っていた頃からの事なので全く苦ではないのですが(笑)
日記というかブログだけは、ずっとそういうスクリプトを配布されているサイトのものを使用したり自作のCGI製かPHP製のブログシステムを利用していたので、動的コンテンツが作れるシステムも良いと思うのです。
利用する場所によっては静的コンテンツではなく動的コンテンツの方が優れているものもたくさんあるので、利用シーンに合わせて使い分け出来たら幸せになれると思います。
色々な情報を検索している際に感じたのは、静的サイトジェネレーターを使ってサイトを作ってるのって、大体フロントエンドやバックエンドで働いてるWeb系ではないエンジニアさんやプログラマーさんばっかりなんですよね。
逆にフロントエンドでもWebエンジニアさんとかWebデザイナーさんとかはWordpressとか使ってる事が多い。あと、初めてブログ触ります！という方とか。
最近のレンタルサーバーは既にサービスに組み込まれていて簡単にWordpressがインストール出来るようになっているので、余計に初めての方が多そうです。
実際にHexoを触ってみて、個人的な感覚ですが、確かに総じて静的サイトジェネレーターはプログラマー向けだなと思いました(笑)
理由はほぼ上記に書いてきた事なのですが、乱暴にまとめて言うなら「自分で作ってなんぼ」だからです。
足りないものは自分でコード書いたり仕組み（プラグインなど）を作らないといけない所とかは、まさにそうですよね。
プログラマーさんに言わせてみれば「何を当たり前な事を」と思われるかもしれないけども。
「無ければ作ればいいじゃない」って「推し絵が無いなら自分で描けばいいじゃない」と通じる所があるのでわかりみしかないのがつらい所（言い方
そういう所があるので、ブログ初心者さんにはとても向かないシステムだと思いました。
「静的サイトジェネレーター」で検索すると結構目に付くじゃん……「爆速でブログを作る」とかさぁ。
あれで「爆速」でブログが作れるのは普段からプログラムとかコマンドラインに馴染みのあるエンジニアだからであって、そういうのに疎い人とかは全然爆速で作れないから鵜呑みにしない方がいいです。
更に言えば、これはテンプレートのソースコードも記事本文も「Git」で管理＆公開する事が概ねの前提であるので、その辺も知ってないとそもそも言っている事が解らないのでは、と思いました。
公開サーバーもそういうサービスに対応している所を利用する前提ですし（FTPでちまちま作業するのも悪くないよ？(笑)）
まぁ、Gitを使えるようになると色々便利だけどね。