Rasmus Olsson

Moving from wordpress to gatsby

March 14, 2021

I few weeks ago I decided to move on from wordpress and build my own site. Wordpress have served me well for the past 2 years but as a developer it has always felt a bit to much black-box.

In this post I will go through my new setup with gatsby.


Gatsby is a framework that is particularly used to build static pre-compiled websites. It is built on top of react and you can extend it to render dynamic pages like any react application. It:

  • has flexible graphql api with graphiql (a helpful interface) to query and mutate data
  • offers a rich amount of plugins that can be configured
  • supports both Typescript(@types) and Javascript
  • describe posts through .md or .mdx files. Regular markdown files(.md) and markdown combined with custom react components(.mdx) for more customization.

Hosting the site

I went with Netlify. Netlify has great supports for gatsby, pre-configured build templates, a generous free tier, let's encrypt(free SSL), dns, github integration and easy to configure CI/CD.


Daily usage

When I write a post with gatsby I write it as a .md file in vscode. After that I push the code to github. This then notified netlify which starts the CI/CD builds. The artifacts are then uploaded to the new site with the added post.

This means that I need to redeploy the site in order to add a post. I don't use any database, and the deploy only takes a few minutes so I think that is a good trade of(to not pay for a database). There are options to integrate gatsby with data sources. You can then store the .md files in a database and use the graphQL API to query it.

More about different data sources can be found here: https://www.gatsbyjs.com/docs/tutorial/part-four/

Site speed

There are many benefits of using gatsby for good site speed. It's pre-compiling the site into static pages and a lot of the computation is made on compile time. Gatsby also benefits from SPA and only re-renders parts of the application on route changes.


  • Netlify free tier
  • Let's encrypt (free SSL)
  • Domain name (still using Godaddy from my previous wordpress setup)

When down from about 150-200$ to around 10£ a year.

Gatsby plugins

At the time of writing, I use a the following gatsby plugins:

gatsby-plugin-typescript //typescript support gatsby-plugin-sharp //gatsby-transformer-sharp for loading .md files and images gatsby-plugin-react-helmet //to manipulate the <head> tag in html (mostly) for SEO gatsby-plugin-feed //RSS feed gatsby-plugin-manifest //manifest file, PWA, add to home screen and logo's gatsby-plugin-offline //offline mode, pre-caching gatsby-plugin-sitemap //sitemap gatsby-plugin-google-gtag //google analytics


Gatsby is a great choice if you know a bit of frontend web-development. Its easy to get started and setup and offers a wide range of plugins. Its very fast, backed by a big community and built on top of react.

More about gatsby:

Happy Coding!

please share