Gatsby + Netlifyで静的サイトを公開した - 構想編 -
このサイトは、以下の構成で実装されています。
- Gatsby
- Netlify
実際に着手してから公開するまで、トータルで８時間も掛かっていないです。
今回は、構想から公開までのフローを、数回に渡って紹介したいと思います。
この記事では構想の段階について紹介します。
サイトを作った動機
普段はQiitaやMediumなどにアウトプットをしていたが、分散していてどこに何の記事を書いたのかわからなくなりました。
それなら自分自身のアウトプットの場として、ポートフォリオのサイトを作ればいいじゃんという発想から、このサイトが運用されています。
どうやってサイトを作る？
静的サイトジェネレータ
ブログを実装するとなると、数年前まではWordPressなどのCMSを利用するのが常でした。
しかし、WordPressには脆弱性やプラグインのバグなどあり、運用が非常にめんどくさい点がデメリットとしてあります。
今回の目的は、ブログを実装して公開することではなく、自分のアウトプットの場を用意して継続的にアウトプットすることなので、アウトプットの場そのものの運用にコストを掛けるのはナンセンスです。
そこで目をつけたのが、静的サイトジェネレータです。
静的サイトジェネレータのメリットとしては、
- セキュリティの心配をする必要がない
- 動作が速い
-
バックアップを取る必要がない
- リポジトリで全て管理すれば良い
が考えられます。
今回は運用そのものにコストをかけたくないので、要件としてはバッチリだと考えました。
次に、静的サイトジェネレータと一言で言っても種類が豊富なので、何を使うかを選定しました。
静的サイトジェネレータは種類が豊富です。
今回は以下の理由から、Gatsbyを採用することにしました。
- マークアップが苦手なので、導入時のテンプレートが豊富なものが良い
- 導入や運用の情報量が多いものが良い
- Vue.jsは元々使うことができるので、自分の知見を広めるためにもReactに挑戦してみたい
netlifycmsと最後まで悩みました。
しかし、記事を書くのはエンジニアの自分自身なので、わざわざCMS化して項目など精査するのが面倒だなと感じたので、最終的にGatsbyを選択することになりました。
ホスティング
実装はGatsbyで行うことは決定したので、どこでホスティングするか検討しました。
ホスティングの選択肢は以下を検討していました。
- S3 + CloudFront
- Netlify
- GitHub Pages
今回は以下の理由から、Netlifyを採用することにしました。
- リポジトリにpushしたら、自動的にデプロイしてほしい
- ビルド時に環境変数を利用できるようにしたい
- とにかくお金をかけずに簡単にしたい
今回は単純なブログになるので、そこまでアクセスは増えないと想定し、S3 + CloudFrontは選択肢から外れました。
GitHub Pagesと最後まで悩みましたが、環境変数を設定するのが面倒なので、それを簡単に設定できるNetlifyを選択することになりました。
まとめ
今回の構想で、今回のサイトはGatsby + Netlifyで実装することが決定しました。
次回からは実際に実装して公開するまでの流れを紹介していこうと思います。