Introduction

The website that you're currently on was my first deep dive into web development and my personal blog/portfolio. I have been wanting to learn more web dev and establish a home on the web so this project was perfect for that. This is a very brief overview of how the page works and some of the core functionality, but for more details please visit my GitHub!

Requirements

When creating the site I first established the requirements that would later drive my selection of website framework. Given that the website serves as a portfolio and blog I was able to ease up the requirements to just using a static site generator. The primary needs that drove the development were:

1. Lightweight and Snappy
   • Much of the content we see on the web is on mobile where the bandwidth can be limited. The site needed to be lightweight to maintain snappiness in these bandwidth limited cases.
2. Low Post Creation Overhead
   • If creating new posts was not as trivial as working off a template I could easily see myself not writing posts just due to that overhead. I needed a solution to programmatically handle much of the repetitive linking that happens with new posts.

After exploring a few frameworks it was evident that a site based on Gatsby was a great choice as the static site generator for this project.

Framework using Gatsby

Gatsby was an excellent choice as it very easily satisfies my two primary needs.

1. Gatsby's static site generation means that content rendering can be done server side and pages can be preloaded based on links on the current page.
2. Plugins within Gatsby's ecosystem allow for markdown processing straight into the primary data pipeline GraphQL.

Alongside the site specific needs, Gatsby is built on React which gives me much more flexibility to programmatically generate aspects of site using repeated components.

Further Explanation

I will go more in depth about the post processing tools that I wrote to give a better idea of what kind of data is moving into GraphQL and how it is rendered.

Markdown Post Files

Every project and blog post is a separate mdx file that contains the markdown layout for the blog contents as well as metadata associated with the post called frontmatter. In each file we begin with something like this:

In this example (the frontmatter for this page!) we can see that the associated templateKey, publish state, title, and other aspects of the post are all detailed here. These get directly imported and are referenced through the GraphQL queries later on.

Gatsby Node Page Generation

On site build, Gatsby aggregates all the markdown files into GraphQL but we still need to associate other aspects to this markdown to create a page. To name a few: page url, template association, and state filtering. These steps happen with a combination of the Javascript in gatsby-node.js and the GraphQL queries found in the same file. Let's start with the query.

This query filters out all markdowns that have the template key project and are noted as published. This return a Javascript object that is used by Gatsby in gatsby-node.js to generate the site based on the template!

This bit of code iterates over the data retrieved for blog posts and projects and generates a page using the selected template (currently using the same template for both) and passes a bit of context for the template to query the respective information for that post. Outside of the work in gatsby-node.js the rest of the site is continuing to populate queries and stylistic choices that work around these posts!

Questions

Please let me know if you have any questions and I'd be happy to answer. Also if you have any suggestions those are equally welcome!