このブログについて

以前のブログは

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

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

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

• Gatsby 公式サイト・チュートリアル

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

	旧ブログ	新ブログ
バージョン	3	4
読み込み可能ファイル	md	mdx

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

• Gatsby 公式サイト・What’s MDX?

3 から 4 にアップデート

• Gatsby 公式サイト・Migrating from v3 to v4

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 が便利そう

• Gatsby 公式サイト・Gatsby Image plugin

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 で（ブログでも）作ろうかなぁ…とか思ったりしています。