This Blog

My hope with creating this site was to have a place where I could create writings in markdown to help produce blog posts.

I also hoped that it could be a place where I could do some longer form technical explanations on other things that I was learning related to my career in programming.

I chose gatsby based on the gatsby starter blog because it allows me to:

• Quickly style a site to my liking
• Have an easy deployment process without having to manually trigger deploys (which I can do with gatsby cloud)
• Write blog posts not in html, but in markdown
• Write code in my posts with proper syntax highlighting out of the box

Gatsby allows these things through the use of its plugins which can do a number of things for you during development and buildtime.

When a gatsby project is built (gatsby build), a node.js server process performs a bundle of things with the end goal being converting assets and pages into html that can be rendered in a browser. The entire site is generated ahead of time by gatsby.

At a high level, this looks like: (see more here)

• Node objects are sourced from whatever sources you defined in gatsby-config.js with plugins as well as in your gatsby-node.js file
• A schema is inferred from the Node objects
• Pages are created based off JavaScript components in your site or in installed themes
• GraphQL queries are extracted and run to provide data for all pages
• Static files are created and bundled in the public directory

Some important plugins of note are:

1. gatsby-source-filesystem
2. gatsby-tranformer-remark
3. gatsby-remark-prismjs

While there are many other plugins that help have the site be fully functional, these provide the core aspects that I was looking for with this page.

1. gatsby-source-filesystem:

   • This plugin creates File nodes from files from the local filesystem, which transformer plugins (like gatsby-tranformer-remark) can use to turn into other forms of data.

2. gatsby-tranformer-remark

   • This tranformer plugin takes the markdown files and converts them into MarkdownRemark nodes which (after the schema is inferred and a snapshot is created) can be queried for an html representation of the markdown which can they be placed within a layout.

3. gatsby-remark-prismjs

   • This plugin allows for the use of syntax highlighting during the transformation step between the markdown nodes and the html representation of the markdown. Specific prism.css themes can be specified.

With the help of these plugins- I have all the functionality for a blog site that I currently am looking for.