Static Portfolio with Gatsby and DatoCMS

This Mini-Guide will get you started with Gatsby and DatoCMS in minutes.

Start with the starter

There is a nice open source starter, a portfolio example app, that you can find here on GitHub:

datocms/gatsby-portfolio

If you haven’t already installed it, install the gatsby client globally:

yarn global add gatsby-cli

after that you can get started with:

gatsby new my-portfolio https://github.com/datocms/gatsby-portfolio
cd my-portfolio
yarn install

Now, to complete the setup of the example you will need a DatoCMS API token, but before create an API token you need to create a new DatoCMS site.

Create a new DatoCMS site

The portfolio example comes with a backend configuration on DatoCMS. To set it up, start from www.datocms.com and register.

All you have to do is create a new site on the admin Dashboard and choose “Demo Project”, then select:

DatoCMS will ask you for your preferred technology. For this example choose Gatsby:

DatoCMS, create new Gatsby site

Dato will create a copy of the demo portfolio app and will deploy it to Netifly for you. You can skip this publication step and continue with just the sample data.

So now you have pre-filled data and you can also grab an API token, that you can generate from the API Tokens section. Next you can add it to your project by creating a .envfile with the DATO_API_TOKEN variable set with your API token.

DatoCMS ApiKey

echo 'DATO_API_TOKEN=abc123' >> .env

Well done, you can now run the project with:

yarn develop

You will see something like the previous picture, saying that the site is running on localhost:8000 and the GraphiQL interface is running on the same port on route localhost:8000/___graphql

Demo site running

Querying DatoCMS with GraphQL

Behind the scenes, the starter uses this gatsby-plugin that makes DatoCMS content available to Gatsby via GraphQL queries.

Gatsby includes an in-browser IDE for exploring GraphQL, that make s it super easy to test queries on pages and contents created with DatoCMS.

For example, if you try this query you will obtain results sorted by last update:

{
  works: allDatoCmsWork(sort: {fields: [updatedAt],order: DESC}) {
    edges {
      node {
        id
        title
        updatedAt(formatString: "MM-DD-YYYY")         
      }
    }
  }
}

GraphiQL makes existing queries available via an auto-complete menu:

GraphiQL: An in-browser IDE for exploring GraphQL, included in Gatsby

Deploy the App

To deploy the app you can do it yourself, building and deploying the generated version inside the public folder (in the example with surge):

yarn build
cd public
surge .

or, instead, using the automatic build tool integrated with DatoCMS:

Deploy with DatoCMS

You can see the final result here.