2022-03-08 10:00:00

このブログは何でできているか?

この記事では、このブログがだいたいどんな技術を使って作られているか話してみようと思います。 このブログは主にこちらの技術を使っています。

  • GatsbyJS on TypeScript
  • Contentful
  • Linaria
  • TailwindCSS

GatsbyJS on TypeScript

SSGのためのReact製フレームワーク。そのうち触ってみようと思ってて、この度ようやく手を出せた! Gatsbyはプロジェクトのテンプレートが充実していて、Contentful用のテンプレートももちろん用意されてます。なのでGatsbyとContentfulを連携するのはかなり簡単だったりします。 ただ、このブログはTypeScriptで作っています。このGatbyテンプレートはJavaScriptのコードなのでTypeScriptを使うにはコードを修正する必要があります。ここはちょっとはまりましたが、ネットにわんさかと手順を解説してくれる記事があるのでとりあえずどうにかなりました。 TypeScriptは本当にいいですよね!もうJavaScriptには戻りたくないです(笑)。

Contentful

ヘッドレスCMSでブログの記事を管理しています。サイトは英語なので英語に抵抗があると少し辛いかもしれませんが、適当に触っていたらとりあえずどうにかなります(笑) とはいえ、多分まだまだできることは色々ありそうなんで気が向いたら色々いじくり回してみよう。

Linaria & TailwindCSS

スタイルシートはTailwindCSSをベースに、CSS Modulesで実装しています。 ただ、場合によってLinariaを使ったりもしています。LinariaもTailwindも、はGatsbyJSだとプラグインが出てるので簡単に使うことができるので嬉しいですね! ただ、実はCSS Modulesで結構ハマりました。最終的に、「gatsby-plugin-dts-css-modules」というプラグインを導入することで解決することができました!