Everything is Markdown

If you have been following along, you may have a sense that Gatsby has been fun for me. In a previous post describing how to use markdown files to create pages within a Gatsby site. From the perspective of reducing the friction in maintaining this site, an idea grew. What if all pages on the site were sourced from markdown files? Imagine how frictionless the process could be if there were no HTML or JavaScript involved.

First, I had to devise a new file structure for the markdown content. It was logical to place this directory near the header and footer configuration. Creating a child directory pages and placing all blog data under that as well. With a final structure of:

- content
  - configuration
  - pages
    - index.md
    - about.md
    - 404.md
    - blog
      - 2021
        ...
      - 2022
        ...

Now the page content is captured in markdown files and the Gatsby data layer by updating the path configuration for gatsby-source-filesystem. A simple template js file to construct the page:

const ContentTemplate = ({ data: { mdx }, children }) => (
  <Layout>
    <Seo
      title={mdx.frontmatter.title} />
    <div>{children}</div>
  </Layout>
);

Lastly, in the gatsby-node.js file, the data and template are married together to build the pages.

result.data.allMdx.edges.map((edge) => {
    createPage({
      path: edge.node.frontmatter.path,
      component: `${indexPageTemplate}?__contentFilePath=${edge.node.internal.contentFilePath}`,
      context: {
        id: edge.node.id

      },
    });
  });

Now each page for the site is managed by a markdown file. In taking this approach functionality such as the Recent Writings section was lost on the home page. However, there is a way to incorporate it into the markdown. But, that is a future post in the making.