当ブログをGatsby×TypeScriptにて作ってみたので、Gatsbyの紹介を中心につらつらと。
Gatsbyとは
GatsbyはReact製の静的サイトジェネレーターです。 内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成が簡単にできたりします！
当ブログの構成技術スタック
- 言語: Typescript
- フレームワーク: React.js
- 静的サイトジェネレーター: Gatsby.js
- スタイル: Scss
- Lint・フォーマッタ: ESLint/stylelint/prettier
- ホスティングサーバー: Netlify
Gatsbyのよいと思ったとこ
・Markdownでブログ記事が書ける
通常ならデータベースでコンテンツを保持/管理が必要なところを、MarkdownをビルドしてUIに組込めるのは非常に魅力です。
Markdownファイルをリポジトリ内で管理できるところも、一人で運用するにはお手軽でとてもよいです。
WordPressみたいにもう少しリッチな感じで記事を書きたい場合は、Contentful などのAPIベースのCMSを導入するといったような選択肢もあります。
・動作がめちゃくちゃ早い
Gatsbyは、ビルド時に事前にHTMLを生成することができ、ユーザーにはすでに生成済みのHTMLを返却することができるので、初回ローディングのパフォーマンスがとてもよいです。 さらに、GatsbyでビルドされたHTMLは、SPA(Single Page Application)として動作します。SPAのページはJavascriptを用いてページ内のHTMLを部分的に差し替えてコンテンツを切り替える為、高速な画面遷移を実現できます。
・ライブラリが豊富
Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。 Markdownの拡張などでは、コードブロックのシンタックスハイライト対応や指定行の強調表示。内部的な部分だと、PWA対応・サイトマップの生成・画像読み込みな最適化など、機能拡張のためのライブラリがたくさん揃っています。 以下の記事で「ユースケース別」にGatsbyプラグインが紹介されているので、気になる方はみてみてください。
・運用が楽
静的サイトジェネレータ全般の特性にはなるのですが、データベースやアプリケーションサーバーなどのインフラ構成を必要とせず、NetlifyやAWSS3などのホスティングサーバーに事前ビルドしたファイルを配置しておけばいいだけなので、インフラ構築・メンテナンスコスト・サイトスケーリング・セキュリティについてほとんど気にすることがありません。
Githubで 「Gatsby×TypeScriptのブログサイトテンプレート（最小構成）」を公開しておりますので、よかったらご覧ください！
https://github.com/taikishiino/gatsby-typescript-blog-starter