trogはWordpressを卒業しました

プログラマになって3年。年々怠惰度が増しています。

ついにWordPressの更新ボタンを押すことすら面倒になってきました。

WordPressでブログを運営して感じたデメリット

ハッキングが怖い

一番はこれにつきます。 先日知り合いのWordpressサイトがハッキングされて対処した記事を書いたのですが、それ以来自分のような弱小ブログも壊される可能性があるとわかり、日々戦々恐々としています。

Wordpressを卒業したらハッキングされないわけではありませんが、リスクは減らせます。 WordPressは世界中で使われている便利なCMSだからこそ、セキュリティホールが見つかれば攻撃されやすいことを実感しました。

サイトの読み込みが遅い。

自分でもわかってしまうほどにページを表示するまでの時間が長すぎました。欲しい情報があるのに待たされるぐらいなら、他のサイトに行きますよね…。

半年ほど前からGoogle Page Insightsの成績がだんだん悪くなっていることにも気がつきました。

もちろんWordPressを最適化して爆速にしてる方もいらっしゃるのは存じ上げております。 しかしWordpressではプラグインやテーマの干渉に振り回されてやりたい機能の実現に時間がかかった経験から、そこまでWordPressを極める気力がおきませんでした。

実際GatsbyJSでブログを作り直してみて、Webの分野に関して理解が深まりました。

GatsbyJS製ブログへ乗り換え

GatsbyJSとは

新田真剣佑くんと柳楽優弥くんがCMに出演している…

GatsbyJSはReactで作られた静的サイトジェネレータらしいです。今回は画面UI部分を担当してもらいました。他の静的サイトジェネレータ同様ビルドコマンドでhtmlページが生成できるのですが、npmやGatsby Pluginと組み合わせることで様々な機能が使えます。当ブログでは動的にAdsense広告を取得して表示しています。

...とはいえ全部自分で作ったわけもなく。こちらのStarterをgit cloneして当ブログ用にカスタマイズしました。StarterはWordpressのテーマと同じような機能です。今回クローンしたStarterを使用するには後述のNetlifyとContentfulが必要でした。

便利な技術は英語を読み解いた先にある…( ´ ཫ ` )

Netlifyとは

サーバー周りの役割を一手に引き受けてくれた気が利くホスティングサービスです。

GitにあるGatsbyのファイルが更新されたことに気づくと、記事とGatsbyのソースからhtmlページを生成（ビルド）・サーバーへ反映（デプロイ）して、また次の更新がくるか監視していて待っていてくれます（ホスティング）。新規サイトの立ち上げからドメインの設定までボタンをポチポチ押していくだけでスムーズに進むので非常に助かりました。

Contentfulとは

CMS部分を担当してくれています。 今回クローンしたStarterでは記事の文章や写真はデータベースやGitではなく、このContentfulに登録します。

Contentful上で記事を「Publish」すると更新通知がNetlifyに送られます。それに気づいたNetlifyがビルド・デプロイすることでサイトに反映されます。Gatsby側でContentfulの更新された記事を取得し、再度Netlifyにhtmlページを生成してもらうために更新通知をしています。（更新通知の正体について知りたい方はこちらを参照ください。）

WordPress時代はいろいろなプラグインを入れてやっと使いやすいエディタにしていましたが、そんなもの必要ないほど最初から全てが揃っています。 一番の強みはこれを採用することで記事をMarkdown形式でサクサク書けるようになったことですね。 十分便利ではありますが無理してContentfulで書かなくても、好きなMarkdownエディタでいつでも記事を書くことが可能になりました٩( 'ω' )و

移行後の読み込み速度を計測

WordPress時代はだいたいこんな感じの点数。 ｢苦労して作ったブログなのに…」と凹んでいました。

移行後はご覧の通り。PWAもしっかり点灯しています。 Performance爆速ブログの完成でございます✧*｡ （黄色の項目もありますね……伸びしろですねぇ。）

おまけ

ここにたくさんのGatsbyJS製サイトが紹介されています。 https://www.gatsbyjs.org/showcase/ かっこいいサイトばかりで圧倒されてしまう...

リニューアルしたtrogはまだ読者の皆さまには使いづらいサイトになってしまっているので、少しずつ改良していきます～。