Cheatsheets and Snippets – Markdown Powered Gatsby Mini Site

As I’ve been trying to hone my chops as a self-taught developer, one thing that has helped immensely is compiling my own cheatsheets and reference material. I realize that there is a huge amount of programming cheatsheets already out there and my own are not likely to get much traffic, but I am a huge believer that writing things down helps cement them in your own brain. Plus, it is always easier to read your own writing style than someone else’s!

I used to keep these cheatsheets and snippets in random files in either Dropbox or OneNote, but as the collection started growing, I felt the urge to get them in order. As a project for myself, I converted them all to Markdown, placed them into an organized Github repository, and then integrated Gatsby (GatsbyJS). Gatsby is a ReactJS based static-site generator that can take a variety of inputs, including Markdown, and allows you to customize how it builds the output HTML by integrating custom React components, CSS, and more.

My Gatsby setup is still pretty boilerplate at the moment, but I have added a few unique features, and I plan on adding more soon. So far, I’ve added:

  • Dark vs light theme picker
    • Simple CSS, JS, and persisted state through localStorage
  • Auto-generated directory index pages
  • Some custom automated markdown link fixing (needed for my current unique repo setup)

I also set this mini-site up to be compiled and served by Netlify, which allows me to have the site auto-rebuild and deploy when ever I push changes to the actual Markdown cheatsheets.

The Gatsby/React/Netlify powered portal is now live at cheatsheets.joshuatz.com, and I plan on continuing to built out my collection.

I might even add some non-development related cheatsheets, so I don’t have to keep googling things like recipe ingredient equivalents.

Leave a Reply

Your email address will not be published. Required fields are marked *