いつか作ろうと思っていたブログをついに作った。

構成

Gatsby で markdown を渡す形で作成した。コンポーネントは tsx。最初は Contentful を使おうとしていたが、やっぱり手元に markdown 欲しいなとなり、gatsby-transformer-remarkを使うことにした。Nuxt のNuxt/contentでも軽く作ってみたが、使用感で Gatsby にした。

gatsby-config はこんな感じ

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown-pages`,
        path: `${__dirname}/src/markdown-pages`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [
          `gatsby-remark-prismjs`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
      },
    },

記事一覧のクエリは以下。

const query = graphql`
  query allMarkdownRemark {
    allMarkdownRemark(sort: { order: DESC, fields: frontmatter___date }) {
      edges {
        node {
          frontmatter {
            slug
            title
            date
            description
            image
          }
          id
        }
      }
    }
  }
`

デプロイ

デプロイは Netlify にデプロイした。push したら自動でデプロイしてくれるので便利。ドメインは買おうとしたが、まあ今はとりあえず後回しにしておく。

GitHub：andynuma