Why you should use Gatsby to empower your website
I am a software architect, here at Jahia for the last 15 years, doing mostly Java programming, I have seen my fair share of trends and new frameworks. It is not always you fall for something new and shiny and wonder why it wasn’t around before.
Gatsby is one of those wonders for me. I tried it and fell for it, and here I will argue it is a tool you need to have in your box for your web projects.
The main reason for me is the power of the source plugins family in Gatsby. Using a dedicated plugin for e-commerce like Shopify or using a generic source plugin for GraphQL API to get content out of your CMS, Gatsby eases the process of assembling those data together.
If your project can be run statically (and it probably should) then you should use Gatsby and have it deploy and hosted on a platform like Netlify. This will allow you to reduce the costs of your API calls as Gatsby will only call your CMS and other data sources upon building the site. This way no more calls to your costly hosted services for every client visiting your site. You can limit dynamic parts to your authenticated users to manage their orders or other private and personal content.
Using hooks it is possible to ask Netlify to rebuild your site when you publish new content. In a matter of seconds (an average of 40 seconds between publication and the new site being deployed in production) my site is updated to the latest content pulled by Gatsby from my GraphQL entry points and still it is delivered really fast by using Netlify CDN architecture.
I will show you how to plug everything together from Jahia to Gatsby.
Jahia loves GraphQL. With Jahia, a schema is federated from your different modules, which themselves can extend the schema by using GraphQL Java annotations or by using GraphQL SDL files. We have dedicated tutorials about those subjects on our academy.
For this first view of Gatsby and Jahia together I will show how you can query Jahia to create pages per content in Gatsby, like exporting the news from your site and having a page with the list of news in Gatsby and one individual page per news.
First, set-up Gatsby. In our development team we use yarn, you can install Gatsby by running:
> yarn global add gatsby-cliyarn global v1.19.1
[1/4] 🔍 Resolving packages...
warning gatsby-cli > core-js@2.6.10: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning gatsby-cli > yurnalist > babel-runtime > core-js@2.6.10: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "gatsby-cli@2.8.13" with binaries:
- gatsby
✨ Done in 7.53s.
To have a more detailed step by step set-up of Gatsby you can look into their tutorial here.
Then create your first Gatsby site:
> gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-worldYou should now start your new website by going into hello-world folder and running:
> gatsby developThe next step will be to add the gatsby-source-graphql plugin inside your project by editing the file gatsby-config.js
This will allow us to query a Jahia server with GraphQL queries. Said queries need to be put first in gatsby-node.js, let's add a query to fetch all the news on our platform:
This query will run against your Jahia server, as you defined the fieldName jahia in the source GraphQL plugin configuration. Gatsby will create a page for every news in your website, for each news we will use the title of the news for the path, giving us some nice URLs. Those news will be rendered using a components template in ./src/components let’s look into it.
With this your site will contain one page per news on Jahia. All you need to add now is a page to list all those news, so that your visitor can easily find them. This is a regular Gatsby page (under the pages folder).
We need to link to this page, an easy way is to just add a link to the page in index.js
If you clone my example from https://github.com/cedmail/gatsby-bootcamp it is using Gatsby Layout to add a header with all the navigation Link.
And the detailed view of a news
As we saw in this article, using GraphQL to query our content allows us to quickly generate static website based on our editor generated content, Jahia gives you the flexibility to define your content and your GraphQL API, Gatsby will generate a blazing fast website based on this content.
In the next iteration, I will show how to integrate with Cloudinary and Netlify to automatically deliver the best media experience and update your static site every time new content is published on your Jahia platform.
