You're reading "Build a site with GatsbyJS and DatoCMS"

Getting started

If you are new to the world of static site generators, NodeJS, React or GraphQL we highly recommend the excellent Gatsby tutorial that introduces all the tools and concepts that you'll need.

Once you are all comfortable with Gatsby you can add our source plugin.

Source plugin

DatoCMS offers an official source plugin to interact with Gatsby.

Inside your Gatsby project, you can install the gatsby-source-datocms package by running this command:

$ npm install --save gatsby-source-datocms

Add the plugin in you gatsby-config.js file, specifying the API token of your administrative area:

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-datocms`,
    options: {
      apiToken: `YOUR_READONLY_API_TOKEN`,
      preview: false,
      disableLiveReload: false,
    },
  },
]

You can find your API token in the Admin area > API tokens section:

foo

Pull DatoCMS content into components

Gatsby uses GraphQL to let components declare the data it needs and then gives this data to components. Suppose your DatoCMS administrative area has a single-instance model called About page (with an about_page API identifier).

In your Gatsby project you can create an About React component in src/pages/about.js, and pull data from DatoCMS like this:

import React from 'react';

export default const About = ({ data }) => (
  <article className="sheet">
    <h1>{data.datoCmsAboutPage.title}</h1>
    <p>{data.datoCmsAboutPage.subtitle}</p>
    <img src={data.datoCmsAboutPage.photo.url} />
    <div dangerouslySetInnerHTML={{ __html: data.datoCmsAboutPage.bio }} />
  </article>
);

export const query = graphql`
  query AboutQuery {
    datoCmsAboutPage {
      title
      subtitle
      photo { url }
      bio
    }
  }
`;

Obviously, that's just a simple example: you can learn all the details about how to access your records in the plugin README.

Example project

We have also prepared for you an example project that you can see live here.

If you want to try it out yourself, please sign up for a free account and click on the following button:

Go ahead to: Next steps
Feel like something is missing in this page?
, submit an issue or propose a change on Github!