blog.livewing.net

Gatsby を用いて構築したブログ。

Markdown ファイルなどから静的サイトを生成。記事は Git で管理し、リモートの main ブランチに push されると自動でビルドとデプロイが実行されるよう GitHub Actions を構成。

Gatsby の設定を含め、すべて TypeScript で書くことで堅牢な開発環境を実現。 GraphQL による効率的なデータクエリを駆使してページを構成。サイト生成時にプラグインによる処理を追加することで、楽譜など Markdown の仕様に無い要素を自動的に生成する機能を実現。 prefers-color-scheme によるダークモードに対応。 Dependabot で依存関係更新の Pull Request を自動生成するよう設定。

Gatsby を用いたブログの構築方法について 記事 を公開中。

技術スタック

  • TypeScript
  • Gatsby
  • React
  • ESLint
  • Prettier
  • SCSS
  • stylelint
  • GraphQL
  • GitHub Actions
  • AWS (S3, CloudFront, Route 53)
Screenshot
Screenshot
Screenshot
Screenshot