Gatsby+Cloudflare Pagesで爆速のブログを無料で作るぞ!作った

5 min read

Nao
Posted: 2023/09/23

タイトルがもう全てなのだけれど、このブログはGatsbyのフレームワークを利用して、Cloudflare Pagesにデプロイしている。元々は他のデプロイ先を使っていたんだけれど、応答速度が悪く、良いデプロイ先を探していた。その結果、Cloudflare Pagesが圧倒的に早かった。しかも、一瞬でデプロイ先を変更できた。

ブログ制作時、速度にこだわる上でのポイント

このブログを「爆速」にできたとはまだ言い難いが、もし爆速ブログを作ろうと思った時、速度に直結するポイントは以下の3つになるだろう。

  • 静的サイトジェネレータを使う
  • 素の応答が早いデプロイ先に上げる
  • キャッシュヒット率を上げる

この3つのポイントは、フレームワーク、デプロイ先、CDN配信サービス、これら3つに何を選択するかという点に直結している。それぞれのポイントについて、自分がどのように選択したかを説明したいと思う。

フレームワーク:何を使ってブログを書く?

ブログを作るにあたってまず一番に考えることは、どのフレームワークに乗っかるかということだ。特にこだわりがなければ、はてなブログ、Amebaブログ、などなど既存のサービスを使うのが手っ取り早く楽なのは間違いない。 しかし、僕はエンジニアだ。エンジニアであれば、ブログであってもポートフォリオとしての側面を兼ねている。ここに多少の時間をかけておいて自前のものを用意しておくのは悪くない選択のはずだ。 ではフレームワークは何がいいだろうか? 考えたのは、WordPressを使うべきか、静的サイトジェネレーター(SSG)を使うべきかだ。 WordPressを使えばリッチな表現と高いSEO対策ができる。Googleで検索して上位に入ってくる個人記事はほとんどがWordPress製だ。普及率でいけば断トツナンバーワンはWordPressで間違いない。 でも僕は、Gatsbyを選ぶことにした。 なぜならWordPressはとにかく遅い。大手WordPressブログでさえ、描画に2秒だとか4秒だとかかかっている。この数秒のレイテンシーをどう見るかだけれど、僕の感覚ではどうしても許容できなかった。とにかく1秒でブログを描画したい!そういう強い気持ちがあった。 そうすると、選択肢は静的サイトジェネレーターしかない。 ブログ用によくオススメされている静的ジェネレーターのGatsbyを入れたところ、操作感も抜群に良かった。立ち上げもやりやすい。そして何より早い! ブログ作成の目標としてはとにかく速度を重要視したかったので、僕はGatsbyを選択した。

ビルド先:どこにデプロイする?

初めは、Gitlab Pagesにデプロイしていた。Gatsbyのデプロイのためのテンプレもあるし、リモートにpushするだけで簡単にデプロイできる。静的ページだから簡単であればあるほどいい、と思っていた。 でもそれは間違いだった。理屈はわからないが、Gitlab Pagesでは、SSL周りの処理に0.5秒から1秒弱ほどの処理が毎回かかっていた。これでは1秒でブログを描画することはできない。 初めはインフラの構成が悪いのかな?と思って色々見ていたのだけれど、CDNを入れたりプラグインを変えたりしてもSSL処理にかかる時間は変わらない。 これを変えてくれたのがCloudflare Pagesだった。 とにかくSSL周りの処理が早い。サーバーの応答速度は変わりないけれど、そこは元々CDN配信サービスを営んでいるCloudflareの強みなので、うまくキャッシュに当てれば解決するだろう。 こうして、Gatsby+CloudFlare Pagesが優れた選択だったと上機嫌でこのような記事を書くに至った。

CDN:どこでキャッシュ配信する?

一点まだ詰めきれていない点として、どこでCDNを配信するかはまだ十分に検討できていない。CDN配信はコスト的な負担もほとんどなく、爆速のブログを作りたい私にとっては、CDN配信をしないという選択はありえない。 今のところ、CloudFlareで配信している。ただ、何か設定が間違っているのかどうにもキャッシュヒット率がとっても低い。 ここはもう少し設定や多少の課金をしたり、他のCDNを使ったり試行錯誤してみてまた記事にして報告してみようと思う。ただ、Twitterなどの評判を見る限り、Fastlyがヒット率が高く評判がいいようだ。

これら3つが、僕がこのブログを開設するにあたって考えたことだった。 結果として、まだ整備できていないキャッシュヒット率以外については、かなり満足する出来になってくれた。 もしもブログのフレームワークを変えたいとなった時も、記事の情報はマークダウン形式でまとまって居るので、移行もものすごく困るということはないだろう。 もしあなたがブログを作成しようとしてるのであれば、Gatsby+CloudFlare Pages構成はいかがだろうか。今のところ自信をもってお勧めできる構成だ。


© 2023 M.Naohiro All rights reserved.