In our recent blog posts, we mentioned that you should not use WordPress for your enterprise website and that we recommend GatsbyJS over WordPress for content-driven sites.
We stand by these claims. But we understand that some readers may have been confused. WordPress is a CMS that outputs content from your admin to the front-end of your website, but Gatsby is a React-driven static site builder that doesn't have a CMS or any built-in automation.
In this post, we are going to provide a step-by-step walk-through of how we configure our Gatsby projects to be content-managed, cost-efficient, and automated. Keep in mind that we are writing from the perspective of a company looking to launch a simple marketing website, but this infrastructure could also be used for a web application or to extend your online store.
Let's get started.
The Modern Content Management Stack
At Tragic, we are always evolving our development toolset. Both keeping up with the evolution of our favorite frameworks and exploring new solutions to better enable our team to build cutting-edge applications. There has been a trend over the last several years of decoupling the front-end and back-end of an application. This method has proven to be an effective way for organizations to maximize their ability to build, pivot, and scale.
Here is our outline of the decoupled stack that we often leverage for marketing websites and simple web applications.
GatsbyJS
As we wrote previously, GatsbyJS is an open source front-end framework for building websites and apps that is powered by React. Gatsby creates a static website with data from multiple sources, including content management systems, APIs, databases, and file systems. We like Gatsby because of its high performance, increased layer of security, low cost to host, and because it aligns with our JavaScript expertise.
Since switching to Gatsby, we have more time to develop features because we spend less time battling plugins or performing monotonous security updates.
Contentful
Contentful is a headless content management system (CMS). They have an API-first approach, which allows you to connect almost anything as your data source. Their offering is software as a service (SaaS), so you do not have to worry about managing the overhead or remembering to do security updates.
We like Contentful because they handle security and hosting, while providing us the interface to easily create flexible data structures.
As explained, content management systems are a big target for malicious attacks from site takeovers to ransomware and data miners. It's a great benefit to our clients, especially smaller ones, to have another company manage the CMS infrastructure. It ultimately means less ongoing administrative work and reduced support costs.
Google Cloud Platform (GCP)
We use Google Cloud Platform (GCP) to host our clients. Google's service is great – fast, scalable, reliable, and affordable. People assume that going with a big cloud provider is expensive, but our experience has been the opposite. GCP has been our core since we first set foot on the cloud. Google provides beautiful UX, is more affordable than competitors, and makes it easier for us to build and scale in the cloud.
Google also invented Kubernetes and continues to develop advanced cloud and multi-cloud tools to support sophisticated DevOps teams.
Bringing It All Together
Contentful offers content integration through its modern GraphQL API. But this post is going to focus on the publication automation, not the standard content integration details.
There are three services that need to be setup:
- Cloud Storage - File bucket to host your static website
- Cloud Build - Runs the Gatsby build commands to rebuild and deploy the project to Cloud Storage
- Cloud Functions - Provides an HTTP endpoint that initiates the Cloud Build trigger
And two automations that need to be setup:
- Automate a build when new code is deployed to the master branch.
- Automate a build when Contentful content is published. Without this second piece, you would have to run the Gatsby build command manually and copy files over in order to see your new content.
This walkthrough assumes basic knowledge of provisioning resources and setting permissions in Google Cloud Platform.
Setup Your Hosting with Cloud Storage
One of the benefits of building a static site is that raw assets and HTML pages can be hosted on a file server, like Google's Cloud Storage, instead of a standard server.
This is not only much cheaper than a standard host, but also only charges based on demand and scales to infinity. As a result, no advanced Kubernetes deployment is needed for optimal cost and performance.
To start, provision a new Cloud Storage Bucket.
Enable Code Deployment Automation with Cloud Build
Then, create a .yaml file and hook up your repository. Choose the branch that will automate the new build (in most cases, this is master).
Note: You will need the name of the trigger for your Cloud Function
Create a Cloud Function to Automate Contentful Build
Next, we want to create a Cloud Function that will trigger Cloud Build. This serverless function will sit idle until new code is pushed.
This is the trickiest part of the automation, and many of the recipes we found online did not work to successfully initiate a Cloud Build. We have created a repository with our NodeJS function that finally worked for us, a repository is linked at the end of the article. Make sure to edit the advanced options to adjust the timeout and set the function to accept unauthenticated requests.
Note: The "function to execute" is the build function in index.js
Copy Your Cloud Function's Public URL to Contentful Webhook
Contentful has a built in webhook feature that can notify you when changes have been made. We can use this webhook to notify us of new content being pushed to Contentful's backend. Contentful also provides templates for easy integrations with common CI/CD tools.
Then, we want to adjust the Contentful trigger settings to match the Cloud Function that we originally created in Google Cloud Platform (GCP). Your setting should match what you see above.
The End Result
The end result is a highly automated process where your teams can focus on writing and editing content, not worrying about fumbling around in the admin console of your CMS.
This configuration allows you to write content where you want and push that content to Contentful's backend. The webhook will see new content is available and automatically trigger the GCP Cloud Function to run a new Gatsby build.
The entire process takes minutes to deploy, meaning your new content will always be available for site visitors to see. Moreover, this system can scale up to meet any level of demand. You no longer have to worry about provisioning the right amount of hardware.
You can find a repository with a Cloud Build yaml and the Cloud Function files for the Gatsby automation on Google Cloud here.
Want to learn more about GatsbyJS and Contentful? Contact the Tragic Media team today for a free consultation and to learn more about how we build modern content management systems.
