WordpressからHexoにブログ移行して分かったメリット・デメリット

昨年に新しいブログへ移行しました。早いもので、WordpressからHexoに移行して1年が経ちましたので、ここで少し感想と苦労話を、技術系寄りで書いていきたいと思います。

静的サイト・ジェネレータによる個人ブログ移行の実録として参考にしていただければ光栄です。

tea dugong | Sony A7R2 + Sonnar T* FE 55mm F1.8 ZA photo by tea ©

Ads

このブログについて

まず簡単にこのブログについてご紹介したいと思います。このブログは普段趣味で撮影している写真を日記としてまとめたり、気になったことを備忘録として残しています。

日記の目的は、撮影した写真を広く見てもらうための窓口の一つと捉えています。また、色んなご縁により写真展に参加させていただく機会が増えてきました。そこで、ポートフォリオとしての役割もページ後半に備えています。

なぜWordpressを辞めたのか？

ブログは過去にWordpressで運営していました。ところが以下の内容に不満がありました。

何を始めるにもログインが必要

当たり前のように感じるかもしれませんが、記事を書くのも、外観を変更するのも、まずは自サイトの管理ログインページに入る必要があります。私はそれだけで億劫に感じる事がありました。また記事を編集するにも管理画面から該当の記事ページ編集画面へ移動する時間が伴うので、その待ち時間がどうにも耐えられなくなりました。
定期アップデートやサーバーに関わる更新が頻繁

Wordpressで避けて通れないのが、頻繁にアナウンスされるアップデートへの対応です。特にセキュリティに関わる更新が多いので、必ず更新しておきたいのですが、使用しているプラグインをカスタマイズしていると、作業はより大変で見通しの悪いものになります。
サーバーを維持する費用がかかる

これもブログをやってれば当たり前だと言われそうですが、頻繁に更新しない趣味のサイトであっても、Wordpressをサーバーで動かしている限り、サーバーの維持費用が掛かります。
ページデータの見通しとカスタマイズがスムーズじゃない

これは、Wordpressへの知識が希薄なのが原因かもしれませんが、Wordpressのテーマのカスタマイズや、結果として生成されるサイトページの把握が直感的ではなく、スピーディーではないと感じていました。

静的サイト・ジェネレータに移行した

前述のような理由で、いつのまにかワードレプスの更新が億劫になってきました。要は~~めんど~~シンドかったのですｗそんな時出会ったのが、静的サイト・ジェネレーター界隈でした。

静的サイト・ジェネレータとは？

静的サイト・ジェネレーターはその名前の通り、手元のPCでブログで必要となるページを自動生成してくれるプログラムのことです。

生成した表示ページ(静的サイト)は巷にあるホームページと同様に、サーバーへ配置するだけでOKです。Wordpressと決定的に違うのは、管理者用ログイン・ページなどのサーバーで動くプログラムが不要となることです。そもそもログインページが不要となりますので、スパムやセキュリテイの問題を気にせずにブログを長期運用することができます。

もちろん、前述したWordpressへの不満も全て解消されます。

develop or drink ? photo by tea ©

静的サイト・ジェネレータは用途により様々なものが存在しますが、ブログ用途になるとJekyll、Hugo、Hexo、Middleman、Octopress、Gatsbyが有名だと思います。

2016年現在で、個人ブログではJekyllを使っているサイトが多く、企業ではサイト制作で人気が高い、Middlemanを導入しているケースが多いという印象です。今回はjavascriptで完結できる手軽さから、Hexoを選びました。Hexoからページ生成される表示例は以下のような感じになっています。

自身のブログ
【一覧】markdownの記法まとめ・hexoで記事を書く方法

ジェネレータの特徴

静的サイト・ジェネレータの特徴としては、

表示するページを予め生成し、サーバーに静的ページのみを配置

前述しましたが、静的サイト・ジェネレータはその名の通り、表示する結果ページを予め生成します。手元のPCにはページを生成するためのジェネレーターをインストールして使います。ジェネレーターでは記事の元となるテキストファイルを編集することになります。後は生成されたページをサーバーに転送するだけです。Wordpressと比較して良い点は、記事の編集がテキスト・ファイルなので、サクサク更新作業が行える所や、サイトの表示が高速な点で有利です。
自身のPCでブログのライブ・プレビューができる

ジェネレーターが備えているローカルサーバーでは、ページをリアルタイム更新してくれるので、公開する前に自身のPC内でプレビューしたり、変更作業の確認を素早く行う事ができます。これによってテーマのカスタマイズも直感的に進める事ができます。

苦労したこと

さてここからは、苦労話です(笑)静的サイト・ジェネレータへ移行したお陰で、Wordpressで不満に感じていた内容がほとんど排除されました。中でも、億劫に感じていた記事の更新作業が快適になったのは有り難いです。

Golden apple | Sony α7 + Sonnar T* FE 55mm F1.8 ZA photo by tea ©

ところが、良いこと尽くめのように見える話でも、苦労したところが多々ありました。

コメントや問い合わせフォーム、動的なサイトが配置できない

これは静的サイト・ジェネレーターのデメリットであり宿命ですが、お問い合わせページや、コメント欄、記事の関連記事、人気記事の配置が~~できません~~難しいです。これらのページはサーバー側で動作するプログラム(=動的サイト)が必要となるからです。
テーマやプラグインが充実していない

歴史が長く、利用者の多いWordpressと比べると、やはり外観を変える事ができるテーマやプラグインが少ないのもデメリットの一つです。Wordpressでは当たり前のように存在するプラグインも、静的サイト・ジェネレータでは存在しなかったりするケースが多々ありました。無いものは諦めて妥協するか、~~開発者にプレッシャーを与えるか(←おい)~~、自身で作り出す気概が必要だと思いました。

ということで、上記のデメリットを緩和するために、代替案やプラグインを1年間にコツコツと作ってみました。

無かった機能	代替案や作成したプラグイン
AMP HTML対応	hexo-generator-ampの作成。AMPの生成と妥当性の検証自動化が可能に。
関連記事・人気記事	hexo-related-popular-postsの作成。wordpressのrelated-postsとpopular-posts系プラグインのような機能を一つにしている。
コメント欄	当ブログでは未対応。設置するならdisqusを使おうと思う。Disqusとはブログのコメント機能を拡張するシステム
問い合わせフォーム	当ブログでは未対応。SNSへ連絡を求める方針で十分かなと妥協。対応するならAWS Lambdaで対応する案が良さそう
画像の比較	hexo-tag-twentytwentyの作成
インスタグラムの埋め込み	hexo-tag-instagramの作成。instagramの投稿をURLやIDだけで埋め込みできる。
ツイッターの埋め込み	hexo-tag-twitterの作成。twitterの投稿をURLやIDだけで埋め込みできる。
flickr画像の埋め込み	hexo-tag-flickrの利用と改良。flickrの画像をIDだけで埋め込みが可能になる。