脱WordPress!静的サイトジェネレーターのHexoでブログを移行

WordpPressで運営していたブログをNode.js性の静的サイトジェネレーターのHexoに移行しました。

ブログではもちろん多くのサイトで使われているWordPressですが、個人的にはもともとあまり好きなCMSではなかったんですよね。

と入ってもWordPress以外でどうやってブログを運用するかってなると、代わりになる候補がピンと来ずになんとなくWordPressを使い続けていたのが正直なところ。

WordPressからHexoに移行したメリット

WordPressはプラグインも豊富でできることがたくさんあります。

Hexoでは難しいことも簡単にできることがありますが、今回WordPresからHexoに移行してみてメリットに感じることを書いていきます。

本番と同じデータがローカルで再現できる

Hexoに変えたことで記事や設定のデータが本番とローカルで同じ状態になっため、設定の確認やカスタマイズが圧倒的に楽になりました。

WordPressだからというわけではないけれど、データがDBにあるとローカルと本番では当然違いができる。

静的サイトジェネレーターのHexoは記事データがマークダウン、設定はymlで管理するためすべての情報がファイルで完結する。

コードを書くときのインデントの整形

WordPressを使っている時に他の人はコードのインデントをどうしているんだろう?という疑問がありました。

記事の入稿方法にビジュアルとテキストがあるWordPressでは、テキストでインデント整形しておいてもビジュアルに切り替えてしまうとインデントがなくなってしまう。

まったくコードが記事内に出てこないブログならWordPressで記事の入稿は問題ないかもしれない。

だけど、技術系のブログでコードが出てくるのは自然なこと。

コードにインデントがついてないと見づらくて仕方ないけれど、WordPressで記事内のコードにインデントをつけるのに大変な思いをしていました。

それがHexoに変えてデータがマークダウンになったことで、インデントをつけるのが大変ということがなくなり、快適に記事が管理できるようになりました。

記事データにtextlintをかけることができる

記事データがマークダウンになったことで、texlintで文章を構成することができるようになりました。

必要ない人にはないと感じるのかもしれないけど、ブログを感じるとちゃんと構成しないとな・・って思う一方で1記事ずつ自分の目でチェックして直していくのはかなり骨が折れる作業になる。

また人が確認する以上は確認漏れが発生して当たり前の状態になってしまう。

そこで自動的に文章を構成できるようにしたいという気持ちとは裏腹に、DBに入っている記事データを自動的に校正のは大変。

データの実態がファイルになると、プログラムにかけることも簡単にできるので、手始めにtextlintを導入しました。

サーバーの運用の手間から開放される

WordPressはPHPで動いているため当然ながらサーバーが必要なる。

レンタルサーバーにしてサーバー運用はさらっとする方法もあるけれど、VPSを使って自分で運用していたため、それはそれでコストになってしまっていた。

楽しいコストなら構わないけれど、あいにく自分はサーバー周りを触っていても楽しいと思えないので、ただやらなければいけないだけことでした。

HexoでもVPSを使うと同じ状態になりえてしまうけど、すべて静的ファイルで運用できるためNetlifyを使って運用することにしました。

サーバー管理をまったくやらなくても、ブログを公開できるようになったのはとても楽ですね。

またデプロイについても、Netlifyを使って運用することでGithubにpushするだけ自動的にデプロイされるようにして、自動化の仕組みが容易に築くことができた。

カスタマイズ好きは静的サイトジェネレーターがおすすめ

だけど、自分でいろいろやりたい人はやっぱりすべてのコンテンツがファイルになる静的サイトジェネレーターは触っていて楽しいと思う。

Ruby製のJkyellやGo製のHugoなど、静的サイトジェネレーターは他にもある。

HexoはNode.js製でカスタマイズの自由度も高く、めフロントエンドをメインにしている人にはHexoはおすすめ!

この記事を書いた人

コウジ

TypeScriptとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。

Web開発の仕事依頼

フリーランスのエンジニアとしてWeb開発の仕事をお引き受けしています。

依頼の検討をしていただきます際はポートフォリオサイトの事業・実績ページをご覧いただき、お問い合わせよりメールや各種SNSよりご連絡ください。

仕事の相談をする
基礎から学ぶ Vue.js