Gatsby Blog for a Developer

Posted on .

So long Medium.

I’m starting a new blog. My first post is a comparison of atomic-layout and styled-system’s CSS grid. Initially, I posted this review in an issue on GitHub but then I realized that I enjoy reviewing and comparing libraries, so I set up this blog as a dedicated space for such reviews. In this post, I will go over some of the Gatsby plugins that I used to build this page.

I started by using gatsby-source-filesystem and gatsby-transformer-remark. This is the recommended way to set up a markdown blog. Initially, I was considering not going this way, and try to either use MDX or maybe even write posts in raw javascript. But markdown is nice and now that I think about it the flexibility that I would get by going these alternative routes would probably not pay off.

One thing that I was looking for was a way to show code diffs. I knew that markdown can have syntax highlighting with a language name after the 3 backticks and gatsby-remark-prismjs, but one thing I did not know is that it can also render diffs. Just use diff instead of the language name and starts lines with a + for new lines and - for removed lines. It’s this easy. The new lines will be green and the removed ones will be red. Or any other color, depending on your prism theme. For this blog, I made a custom theme. It uses the same colors as the rest of the website.

To make my code snippets a little nicer I set up gatsby-remark-prettier. Prettier has a configuration parameter that sets the maximum length of each line. Not only this helps prevent horizontal scrolling on mobile but also makes the code fit in the columns of text that you can see if you are browsing this page on desktop.

And I’m using a couple more pretty standard markdown plugins. gatsby-remark-autolink-headers for that link icon that shows up when you hover over a subheading. And gatsby-remark-smartypants to get fancier typographic characters.

Other markdown plugins I use gatsby-transformer-sharp and gatsby-plugin-sharp to generate cool previews for static images. Basically, it takes my jpegs, makes SVG tracings of them and injects the tracings into my build-time rendered HTML, so that you can see the silhouette of an image before it’s even downloaded.

And that’s all the cool plugins I use. I have not mentioned gatsby-plugin-react-helmet, gatsby-plugin-manifest, gatsby-plugin-robots-txt, and gatsby-plugin-sitemap. But only because they are pretty self-explanatory and I’m not sure why Gatsby does not provide this functionality out of the box.

You can see my full gatsby configuration on GitHub.

I hope you found this brief review useful. If you don’t have a Gatsby blog I highly recommend it. The development experience is nice. And if you have a Gatsby blog let me know what plugins you use for your blog, and how I can improve my setup :)

gatsby gif