
Gatsby.js+TypeScript+Netlifyで構築した個人技術ブログの技術スタックを全解説します。Preact導入によるバンドルサイズ削減、Bootstrap+PurgeCSSの最適化、Algoliaによるブログ内検索など無料で実現する構成を紹介します。

Netlify無料枠の月300分ビルド制限をGitHub Actionsに移行して解消する方法を解説。gatsby-plugin-minifyによるAsset最適化、imgurでの画像リサイズ、Getform.ioでのフォーム代替、netlify-cliによるデプロイ自動化の具体的な手順を紹介します。

Gatsby.jsブログにReact Calendar Heatmapを導入し、記事の投稿日をGitHub風の草(ヒートマップ)として表示する方法を解説。StaticQueryでGraphQLからデータを取得し、ツールチップやクリック遷移も実装する手順を紹介します

Gatsby.jsのブログにEstimated Reading Time(読了時間)を実装する方法を解説。gatsby-remark-reading-timeプラグインの導入手順に加え、滞在時間が13.8%向上したBrian Crayの実験結果など、読了時間表示の歴史と効果も紹介します

Netlify Formを使ってGatsby.js製の静的サイトにお問い合わせフォームを実装する方法を解説。data-netlify属性の設定、スパムBot対策のhoneypot設定、フォーム送信通知の確認手順まで、コード付きで紹介します。