Herman Starikov

Web Developer @ Coursera

Gatsby Blog for a Developer

Published on May 31, 2019

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.


Text plugins

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 plugins

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

More from the Blog

Read a File in Create React App

October 29, 2019

How to use preval.macro to read any file in CRA

Theming Styled Components in 2019 (Part 2)

June 14, 2019

What are the options to make your styled-components more flexible

Theming Styled Components in 2019

June 14, 2019

What are the options to make your styled-components more flexible

Atomic-layout vs styled-system

April 21, 2019

In depth comparison of React CSS grid libraries.