How often do you have to build an API to deliver content which should be displayed on a website? It can be anything like a blog, company page, product page, documentation, everything where the data does not change very frequently.
Even if a website is simple, you have to create and manage a lot of things.
Let's think about a very simple website (JS) where you have a couple of pages, blog, contact form. Your client wants to have a possibility to edit this data and because the budget and time are limited (as always), you decide to use Contentful as a CMS. The website can have a huge number of visitors so it would be nice not make requests to Contentful every time when a user visits a page. What do we need to do?
We have to create an API which can connect to Contentful and get the required data. Let's call it a proxy.
We have to cache the data so we need to set up a Redis and of course implement this feature.
We should also cache the images so we can store them on our side.
We should remove not used images from our storage to reduce the cost.
We need to invalidate the cache if there is any change in Contentful.
It would be nice to have unit tests for our API.
We have to configure CI/CD.
Setup API monitoring.
Create a website and use our API to get content.
A client may want some changes, like content transformations or some special changes in content, based on Contentful data. Every time we have to edit our API and the website.
Everyone can break the website by removing the required data, changing the data structure, etc. It's not easy to prevent situations like this. Someone can remove or edit content by mistake, API can get new data, cache it and the website can have issues with displaying it.
We have to host our API, caching server, images, etc.
API should be scalable and secure.
It's not a rocket sience but it requires some time.
The question is, can we do it better?
Of course we can!
We can use Static Site Generator.
#What is that?
In general, it's a framework which can take your data and build a static website. It's a really popular approach and there is a lot of ready to use generators.
Let's try to plan how can we create the same website using a static site generator.
#Which framework should we use?
That's a good question. In my opinion, it depends on what you need and what programming language you want to use. There is a lot of frameworks which can convert markdown files to create a website but in our case, we want to use Contentful. Not every static site generator has a ready to use support for Contentful.
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
Gatsby is also a JAMStack.
#What should we do with Gatsby to create our website?
- We can build a frontend using JS (React) and CSS.
- We can use a Contentful plugin to get all the data from Contentful (even images).
- We can use GraphQL to inject the content to our site.
- We can build our site as a static files.
- We can deploy it to CDN.
#What's the advantage?
- We don't need a custom API, caching, servers (backend), monitoring, etc.
- We will make requests to Contentful only during the build time, nothing more.
- If the Contentful data is broken, the website will not build so we won't break it for users.
- It's a static page so it's secure.
- It's fast, it can be served over a CDN.
- Better performance.
- Development is faster because you have to build only a website.
- Hosting is cheaper and you don't need a lot of maintenance.
#How can we host and update the site?
We can use Netlify. I'm using it for my blog and it's really simple and does everything that I need. To host a static site you need only Netlify. They have CI/CD, automatic (free) HTTPS, Netlify Edge (~CDN) to host our site, functions, forms, image resize service and more.
- Every time when someone edits data in Contentful, we can run a webhook and inform Netlify about new changes.
- Netlify can get our website from a git repository, fetch the fresh data from Contentful, build the website with new data and deploy it.
- The same with changes in a git repository. Netlify can rebuild a site on every change.
#Can we use other data sources than Contentful?
Yes, we can. If we have an API where we can get our data, we can use it to generate our website. Gatsby has ready plugins for PostgreSQL, Instagram, custom API, Markdown, Vimeo, Google Photos, Trello, Contentful, Wordpress, Drupal, Medium, Twitter, and many many more.
#Do we have to use Netlify?
No. You can use everything which allows you to serve static files. It can be AWS Amplify, Github Pages, Google Cloud Storage bucket, AWS S3, Firebase, Surge.sh, Now.sh and even your own Nginx server on a Raspberry Pi.
#Do I need GraphQL server for the data?
No. Let's use Contentful plugin as an example. It knows how to fetch the data from Contentful and using Gatsby it prepares GraphQL data for you. You can also use development server to test queries.
#Can I use dynamic data, make queries, etc?
#Is it difficult to create a website using Gatsby?
I would say no. Without React experience it took me about 6 hours to create this blog. I refreshed my knowledge about React, created a very simple (by purpose) layout using JSX and Emotion (CSS-in-JS!) for the first time. I learned how to use Gatsby to convert all my blog posts written in Markdown and get the data using GraphQL. Using Gatsby plugins my blog has RSS, sitemap, lazy loading for images, mulitple image sizes for different screen resolutions, favicons, it embeds Twitter, Youtube and other services automatically, etc.
Look at the Lighthouse results!