I recently open-sourced my blog built using Gatsby! This post will walk you through why I chose Gatsby, the Gatsby plugins I used, as well as highlight some features that I have included in my blog. Why use Gatsby? One of the biggest pros of Gatsby is its ecosystem. There’s an endless number of plugins to add the features you need, as well as plenty of to get you started. templates Another important benefit is performance. Out of the box, you’re going to get a lightning-fast site, which in turn will boost your SEO. For reference, my site gets a near-perfect score with Gatsby: Lighthouse Gatsby blogs are built using React and GraphQL, so if you happen to be a React developer (like me) this is also a great plus to be able to build your site with a technology you feel comfortable with. Using Markdown with Gatsby I love Markdown, and Gatsby lets me write all of my blog posts with it. Gatsby’s is a great way to get started with this. If you’re looking for something a bit more powerful than Markdown, Gatsby also provides support for . With MDX, you’re able to write your posts in Markdown, and then also add in JSX components wherever you like. official blog template MDX Although my site only uses Markdown at the moment, I based my site off this so that I have the flexibility to add JSX to my posts down the road if I choose. mdx-blog-starter Gatsby plugins If you’re looking for a feature to add to your site, chances are there exists a plugin that will do it for you. A few notable mentions: if you’re looking to add Google Analytics to your site gatsby-plugin-google-analytics makes sure that external links in your Markdown will open in a new tab gatsby-remark-external-links for an RSS feed (which comes in handy when you want to cross-post to DEV!) gatsby-plugin-feed will add the ability to link to subheadings on your page (you can see it if you hover over one of the headings on this post) gatsby-remark-autolink-headers Social cards with Gatsby Social cards are the images you see when you share a link to your blog on sites like Twitter or Facebook. This is what the social card looks like for this post: There are a couple of plugins that will generate social cards for you, however they are slightly limited in their design and functionality. I instead opted to that lets me create a React component for my social card, and take a screenshot of it. modify a script created by Max Poutord Newsletter sign-up prompt Everyone recommends that you should have a newsletter, so I’ve added a component to the bottom of each blog post that gives readers the option to subscribe. I decided to go with as it was the cheapest option I could find, compared with some of their competitors. I’m yet to release my first newsletter, but I am thinking of making it a monthly roundup of my posts and what I’ve been up to. Feel free to if you are interested! buttondown.email subscribe Web monetization with Gatsby During DEV’s web monetization hackathon a couple of months back, I wrote a post on how to set up . Essentially, web monetization means that if people visit my site, and they’re subscribed to a service like , I will receive a small amount of money (fractions of a cent) depending on the amount of time they visit my site.It’s super simple to set up. I’ve only made $5 so far, but I think the idea behind it is pretty cool. web monetization with Gatsby Coil Each post links to its Markdown file Now that my blog is open source, I can give readers the opportunity to make contributions to my site. At the top of each post, I have a link to its Markdown file on Github. If you happen to notice a typo while reading one of my posts, you’re welcome to open a pull request on Github to fix it! Hosting Gatsby on Netlify For hosting, I use . It’s very user-friendly, and it’s free! Each time I push to my blog’s repository, it will automatically trigger a new deploy and my site will be ready in minutes. Netlify What’s next? Updating my blog has been kind of addictive, and there’s a couple more features that I’m planning on adding: Better code snippets Integration with DEV using its API I think this blog overhaul has rejuvenated my interest in writing posts, and so I’m excited to see what the following months will bring. Stay tuned! Github: https://github.com/emgoto/emgoto.com Previously published at https://www.emgoto.com/gatsby-blog/

Coil

Facebook

Google

Super

Twitter

Subscribe to my newsletter!

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Open Sourcing my Gatsby Blog

Too Long; Didn't Read

Companies Mentioned

Emma Goto

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Open Sourcing my Gatsby Blog

Too Long; Didn't Read

Companies Mentioned

Emma Goto

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES