Gatsby + DatoCMS = the future of web design

What is the process of creating a website using GatsbyJS, DatoCMS and Gatsby Cloud?

23 March 2021

DatoCMS - general information

DatoCMS is a Headless CMS entirely based on API, i.e. all content is available via:

  • Content Delivery API in GraphQL - used to retrieve content from one of your DatoCMS projects and deliver it to your web or mobile projects
  • Content Management API - used to manage the content of your DatoCMS projects (creating, updating, deleting, and fetching)


DatoCMS also has a very good integration with the technology we use to create modern websites - GatsbyJS. The most important advantages include:

  • live reloading of content as it gets saved
  • state-of-the-art integration with Gatsby's GraphQL API
  • advanced processing, optimization and lazy loading of photos
  • convenient interface for creating data structures (models, blocks)
  • the possibility of organizing fields in fieldsets, which makes the work of editors easier
  • wide range of field types (Text, Media, Date and time, SEO, Location, Color, etc.)

Below is a list of fields that can be selected:


Content creation in DatoCMS

Content creation in DatoCMS is based on the concept of models and blocks. In fact, the function of the model is determined by the editor himself :). It can be:

  • a single subpage (home page, contact, career, etc.)
  • template for repetitive subpages (e.g. news, products)
  • a module that will be duplicated on many subpages (e.g. a header with a description)
  • a channel in which we can define a set of values ​​from which we want to choose a value in various places of the page (e.g. margins - large, medium, small, etc.)

Inside the model, we can define the so-called blocks, or structures that can be duplicated within the model. This type of solution can be used, for example, in various types of sliders, tiles, etc.

Integration with Gatsby Cloud

DatoCMS is on the list of CMSs for which Gatsby Cloud has introduced automatic integration. What does this mean in practice? This means that the integration of our system with Gatsby Cloud takes place virtually without much involvement of the developer. The whole process takes literally 2 minutes and is extremely simple and intuitive. Having a website created in Gatsby Cloud, all you need to do is select DatoCMS from the list of available CMSs and click Connect:

Then you need to authorize Gatsby Cloud to use our project in DatoCMS and that's it! More information about Gatsby Cloud available here.

Sample model - structure

An example model created in DatoCMS looks as follows:

It consists of elements such as the header, description, text on the button, internal link (another subpage on our website), external link (link to another page) and the field 'title for datocms', thanks to which we can give the model a name under which the entry will be stored in the CMS.

The process of creating a new module

The process of creating a new module in a project consists of several steps:

  • first, we create a module view in Gatsby (we use styled-components for styling, but you can also use CSS Modules or even pure CSS)
  • then we create a model in DatoCMS corresponding to the data structure that we will display in our module
  • after creating the model, complete it with content in the Content tab
  • then we download the data through a query in GraphQL (to write the query properly, we use the tool integrated in Gatsby - GraphiQL)
  • we connect the downloaded data to the previously created view
  • we send all changes to the repository where the project is located and which is connected to Gatsby Cloud
  • sending changes to the repository on the appropriate branch will automatically rebuild the page

And that's it - the new module is now visible on the site and all content is downloaded from DatoCMS! :)

Updating and maintaining the code

We use two very interesting tools to ensure the quality of our code:

  • Snyk - this is a tool that informs us that there are new versions of the libraries installed in our project. Usually, newer versions are better optimized, run faster and cause fewer unexpected errors, so thanks to this tool we can keep our website updated.
  • SonarCloud - this is a tool that analyzes the website code more directly. It finds the so-called "Code smells", i.e. code fragments that can be written better, i.e. usually - shorter :)

Technology stack - scheme

Below is a diagram that presents the discussed tools and technologies along with the relationship between them:

Summary

Using the technologies and tools discussed in this article, we recently created the Apius Technologies website and the Smart Security landing page. We cordially invite you to visit and experience how pleasant it is to use websites created with the use of the latest technologies!