Gatsby.js — Markdown to HTML and Grayscale Images

Photo by Joao Cruz on Unsplash

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Transforming Markdown into HTML

We can transform Markdown into HTML with Gatsby.

To do this, we use the gatsby-transformer-remark plugin.

For example, we write:

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-remark`
  ],
}

pages/pandas-and-bananas.md

---
title: "Sweet Pandas Eating Sweets"
date: "2020-08-10"
---
Pandas are really sweet.

pages/index.js

import React from "react"
import { graphql } from "gatsby"
export const query = graphql`
  query {
    allMarkdownRemark {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          excerpt
        }
      }
    }
  }
`
const IndexPage = ({ data }) => {
  return (
    <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.id}>
          <h3>{node.frontmatter.title}— {node.frontmatter.date}</h3>
          <p>{node.excerpt}</p>
        </div >
      ))}
    </div >
  )
}
export default IndexPage

We add the plugins in the gatsby-config.js file.

The plugins are added to the plugins array.

We need the gatsby-source-filesystem plugin to read the files.

The path property has the string of the path to read from.

The gatsby-transformer-remark plugin transforms Markdown into HTML.

Then in the IndexPage component, we make the query with the graphql tag to get the Markdown data,

And we get the data from the data prop.