A roadmap of Static Site Generation using Jamstack Technology with Gatsby

We have already talked about Jamstack technology, its architecture and its benefits in detail and you will find many articles on various platforms on Jamstack technology so we will not discuss it today. This blog will guide you more about Static site generators like Gatsby rather than JAMing, however, Gatsby would be covered under the umbrella of this modern stack architecture. The blog will be paving your path towards implementing the technology based on WordPress as a CMS, GatsbyJS as our very own static site generator and Netlify for easy and free deployment. You may not be able to find any centralized document for the combination of these tools working under modern stack web architecture, so we plan to put the pieces together with an assumption that the readers will have basic knowledge of React and GraphQL. 

Why is WordPress a Headless CMS?

The choice of CMS is tough when you have so many options available in the industry with similar yet distinctive features. Netlify has been showing much interest in the headless CMS to host the Gatsby SSG sites that will ultimately lead to a significant choice of the most accurate and efficient content management system. WordPress in this respect has been the ultimate choice because of it’s easy-to-use platform and market leader in the website development platform. 

I believe it is the most simple and attractive CMS, and without a front-end, it is a great and feasible choice for building a website based on JAMstack technology. The WordPress community has been continuously working on the improvement of the platform in terms of plugins and facilitating the user with a no-code web solution, especially when it comes up to manage the schema of the SSGs.

When you build your website on GatsbyJS SSG, the structure of the website is depicted by the information source that has primarily been determined by the headless CMS. The raw data that has been entered in the headless WordPress in the form of content fundamentally decides the structure in terms of pages and tags for the data models. 

Initially, WordPress was meant to be for the bloggers and by analyzing the blogging websites you will realize that they have been constructed using WordPress but as a monolithic structure. The headless structure has been established to help us in building the basic structure first and then extend it in terms of appearance.

Managing Frontend with GatsbyJS Themes

You need to set up the environment for the Gatsby Project by installing Gatsby CLI, and a little technical knowledge will be required for running basic commands. It is always recommended to start by cloning the starter templates of Gatsby by iterating them to create your first Gatsby appearance. Gatsby projects can be created and saved on the central repository systems like GitHub or BitBucket. If you run the command Gatsby new it is similar to running the git clone command, and npm install in the local folder. But the difference between these two commands is Gatsby will not remotely retain a git while the git clone will retain the git.

The local setup is already available and you can view it by running Gatsby develop command in the project folder. This command will generate the static site in the directory in the development environment and it can be previewed in the most common local used URL localhost:8000. If you are running multiple projects on your system, the URL may be different like 8001, 8002 and so on.

Working with Gatsby Theme

Since we already mentioned that we will be using WordPress as a back-end and content management and Gatsby theme will play the role of the front-end platform. Let’s get into some details into this decoupled approach of website development under the umbrella of Jamstack technology architecture. Managing the content and the backend is being done through WordPress which is the simplest platform for content management. The GatsbyJS theme will be configured pointing to the content management system creating a connection between the two platforms.

The configuration of the theme requires API URL and content API key, the values of the same will be available in the admin panel of WordPress in the integration tab. The site changes can be reviewed through the localhost URL, the changes made through the CMS are immediately reflected on localhost on the theme selected on Gatsby. Although the content on the initial and default theme will be terrible and some changes will be required on this default theme.

The Structural Elaboration of a Gatsby Site

The Static Site generated websites have another level of impact through their speed and you can experience it by scrolling the web pages. GatsbyJS has been based on JavaScript using ReactJS and there will be unlimited options.

Gatsby has been derived to get the raw data from the CMS to form a site structure and transform it into the website structure. All the static pages on HTML, styles in CSS and other assets are available in the public folder whose output will keep on changing with every build.

The front-end files

The static sites have the most salient feature of faster loading, no processes are going on at the backend at the time of page load to display any certain navigation items or widgets. They are also not dependent on the JS files for manipulating the pages at the frontend. Hence the waiting times get to absolute zero since it looks like it was already ready to display. 

GatsbyJS SSG can load the web pages before they are clicked because of several links available on the static pages. Since we have been mentioning “static” several times,  that refers to 100s of pages being processed at the backend. Gatsby build is the default method for deploying the Gatsby site

The back-end source files

The commands like Gatsby build and Gatsby develop are used to locate the file in the public folder. The default layout would not be as expected since it will be displayed randomly. Here we will be needing a template to beautify the content being displayed. So now you can say we are moving towards the presentation layer that is contained in the source folder.

The source folder at Gatsby contains the logic to generate the stylesheets and the static files i.e HTML files. All the files in the src folder are the ReactJS component and the output of the component is a JSX file resulting from the GraphQL queries being passed from one component to another. So we can rightly say that the customization of the theme is performed in the src folder.

Gatsby Templates

Templates are the structure of repeating pages used for the website display. The content for each blog will be different but will follow the same template or design pattern. A template can be divided into the actual GraphQL connecting with the admin to fetch the content to be displayed on the current page. The query results were performed associating the data items and types as per the expectations. The React component accepting the data rendered through GraphQL

For those who are not known to ReactJS would be wondering about the word “component”. The programmers define a component as the reusable blocks of programming code that are shared across the pages.

Configuration and Plugins

You might be wondering how will the components query the data source, and how would they know it is accurate data? Since our components exist and recognize the post and page configuration of the data model will be required. All this sourcing of data in GatsbyJS is performed in the Gatsby-config file. It is configured by installing the Gatsby Plugins and it is a complete web pack file for configuration and it includes;

• The RSS feed
• The advanced sitemap for SEO
• React-helmet to provide JSX element for setting metadata

Client-side JavaScript

The last step is the client-side building of static pages that are the browser of Gatsby allowing to execute the front-end that triggers the user changes. This is the method of implementing the code syntax using the trigger script. All the changes are managed on the client-side on the beautiful template and well-organized pattern by using React components.

Conclusion

Gatsby has changed the web development pattern wherein the static pages being designed for the content that has been written on a separate platform unknowingly how it is going to be displayed. The traditional pattern of website development has always been based on visual-coding using the admin panel, however, Jamstack technology has been based on microservices wherein the content has been divided into components and called as and when required. 

The suitable options for GatsbyJS based website are

• A startup company using NodeJS or ReactJS
• A project for university or students having time to code and work on different platforms learning new technologies.
• The framework freaks who have time to glue up to the computers

Although the framework takes much of your time and energy as it requires your expertise in different programming languages, tools and platforms, and much more. It also provides speed, security and scalability. Every technology in its starting years grabs a bunch of people around to work hard and later in some years it becomes a success and the rest just become the followers.