Gatsby > 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:

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 projects

We have also prepared for you some sample projects:

Gatsby Blog

Try this demo »

Ecommerce with Gatsby

Try this demo »