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
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.
Costs
- 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
Conclusion
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:
- Home https://www.gatsbyjs.com
- Tutorial: https://www.gatsbyjs.com/docs/tutorial/
- Course: https://www.udemy.com/course/gatsby-tutorial-and-projects-course/
Happy Coding!
