読み込み中 %

アイコン

Gatsby×TypeScriptでシンプルなブログサイトを作ってみた

taikishiino
2020/05/10

当ブログを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プラグインが紹介されているので、気になる方はみてみてください。

Gatsbyプラグイン45選

・運用が楽

静的サイトジェネレータ全般の特性にはなるのですが、データベースやアプリケーションサーバーなどのインフラ構成を必要とせず、NetlifyやAWSS3などのホスティングサーバーに事前ビルドしたファイルを配置しておけばいいだけなので、インフラ構築・メンテナンスコスト・サイトスケーリング・セキュリティについてほとんど気にすることがありません。


Githubで 「Gatsby×TypeScriptのブログサイトテンプレート(最小構成)」を公開しておりますので、よかったらご覧ください!

https://github.com/taikishiino/gatsby-typescript-blog-starter