All Articles

Gatsby + Netlify + Netlify CMSで個人ブログを作成

序章

2019 年に某 SIer を辞めて、転職してデータエンジニアになり、エッジデバイスからのデータを収集してフロントエンドから状況を確認するためのシステムを AWS を使って作成したり、 データ分析用のパイプラインを作ったり、機械学習推論サービスにデータを食わせて異常検知をしてみたり、いろいろ手を出しながらチャレンジしてはや 2 年弱。 最近自分の成長スピードが微妙に鈍ってきているなあと感じはじめ、今の自分に足りてないのは自身の知識をアウトプットする事だと気づいた。 思い起こせば学生の頃に論文を投稿して以来、公共の場に記事を出していない。

ブログサービスは世の中にQiitaやら、はてなブログやら無料で始められるものもあるが、 どうせなら自分でサイトを作ってみたほうがおもしろい。 とゆうことで、静的ウェブサイトジェネレーターであるGatsbyで Web ページを作成して、Netlifyでホスティングしてみることにした。

技術選定

何年か前は、ブログを自分で運営するとなれば Wordpress が鉄板だったが、サーバーを用意して Wordpress をインストールし、さらに運用していくのはなかなか面倒くさい。 Heroku みたいな PaaS を利用すれば自身の責任で運用しなければならない範囲は少しは狭くなるが、 Wordpress やその Plugin についての脆弱性情報にアンテナをはって、必要に応じてアップデートを行っていくのは大変だ(それはそれで勉強にはなると思うが・・・)。

今回作成したいのはブログで、動的に情報を生成する必要はなく、だれが訪ねてきても同じ内容を表示すれば事足りる。 とゆうことで、静的ウェブサイトジェネレーターを利用してブログコンテンツをあらかじめ生成し、 静的ウェブサイトホスティングサービスを利用して生成物を Pulic に公開するという方式で行くことにした。

静的ウェブサイトジェネレーター

昨今のフロントエンド業界では Single Page Application(SPA)が流行っていることもあり、 ブログを作成するために使えそうなフレームワークもいろいろ選択肢がある。

  • Gatsby
  • Next.js
  • NuxtJS
  • Hugo

結論から書くと、ひとまずは Gatsby を利用することにした。

選定理由は気が向いたら書きます。

ホスティング

比較したのは

  • AWS S3 + Cloudfront
  • AWS Amplify
  • Netlify

の 3 つ。

最初の 2 つは AWS で中身は同じ。 AWS を利用した静的ウェブサイトのホスティングは依然やったことがあり、やり方も分かっていた。 そして、最近だとAWS Amplifyを使えば結構手軽に静的ウェブサイトを公開するところまでたどり着けるらしい。S3 や Cloudfront の連携を自分で設定するのはちょっぴり面倒なので、AWS を使うなら Amplify でいこうと考えていた。

Netlify は静的ウェブサイトのホスティングに特化したサービスを展開している。静的ウェブサイトジェネレーターを利用してブログを作成している事例を、ネットで探しているとよく紹介されているので気になってしまった。 Netlify で心惹かれたのはNetlify CMSというヘッドレス CMS が簡単に使えること。今まで CMS を使ったことはなかったのでこれを機にどんなものか使ってみたいと思った。

どのホスティングサービスを利用するかは結構悩んだが、使ってみて気に入らなかったら乗り換えればいいだけの話であるという事で、気軽に決めることにした。

最大の選定要因はコスト。2020 年 9 月段階では、Amazon CloudFront は無料利用枠が 50GB/month なのに対して、 Netlify は STARTER プランで 100GB/month まで利用することができる。 ブログなら AWS のほかのサービスと連携したいという話も出てこないだろうし、万が一 AWS のサービスと連携したくなったら設計を検討して、必要であれば移行するだけである。という事で Netlify を使うことにした。

Published Sep 26, 2020

スタートアップで働くデータエンジニア兼データサイエンティスト。興味の範囲はデータパイプラインの構築、データ分析、機械学習、クラウドなどなど。