|<!-- -->flabaka.com

このブログについて

このブログについて

以前のブログは

以前のブログは、GatsbyJS のバージョンは 3 で、gatsby-starter-blog のテーマを使っていました。

「(GatsbyJS)バージョン 4 になっているんだよなぁ…」と思いながらも長いこと放置してました。

久しぶりに公式サイトを見てみたところ、mdx ファイルを読み込んで表示させるというものが、チュートリアルのページに掲載されていました。(gatsby-starter-blog は、md ファイルの読み込みだった…)

4 から新しい機能も追加されているみたいなので、GatsbyJS に再入門がてら、ブログを作り直してみました。

旧ブログ新ブログ
バージョン34
読み込み可能ファイルmdmdx

基本的には mdx ファイルの読み込みだけど、gatsby-config.js > gatsby-plugin-mdx > options > extensions に追加指定することで(md ファイルなども)読み込み可能になるらしい…

3 から 4 にアップデート

Gatsby のバージョンを 3 から 4 にアップデートするには、上記ページを参考にすると良さそう。

今回は gatsby-starter-blog をアップデートするのではなく、新たに作り直しました。

チュートリアルにある Gatsby Cloud は便利そうだけど、今回は見送ることに…

allMdx を使う

gatsby-plugin-mdx をインストールした後は、(allMarkdownRemark ではなく)allMdx を使うらしい…

export const query = graphql`
  query {
    allMdx(sort: { fields: frontmatter___date, order: DESC }) {
      nodes {
        frontmatter {
          date(formatString: "YYYY-MM-DD")
          title
          description
        }
      }
    }
  }
`

StaticImage が便利そう

import { StaticImage } from "gatsby-plugin-image"

return (
    <Layout>
        <StaticImage src="./hoge.jpg" alt="XXXXXX" layout="constrained" />
    </Layout>

こんな感じでクエリを使わずに画像を表示出来るみたいです。

CSS は styled components

CSS は何にしようかな…と思ったんですが、ひとまず styled components で良いかな? と。

コンポーネントベースで作成していくには、CSS は何がベストなのかを探りつつ、色々試していこうかなと思っています。

今後は

今後も React、GatsbyJS、CSS の勉強を続けながら、TypeScript と NextJS で(ブログでも)作ろうかなぁ…とか思ったりしています。

©2022 flabaka.com