Static Portfolio with Gatsby and DatoCMS

Lorezz
Lorezz
Apr 10, 2018 · 3 min read

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

Image for post
Image for post

Start with the starter

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

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

after that you can get started with:

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:

Image for post
Image for post

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

Image for post
Image for post
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.

Image for post
Image for post
DatoCMS ApiKey

Well done, you can now run the project with:

Image for post
Image for post

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

Image for post
Image for post
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:

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

Image for post
Image for post
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):

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

Image for post
Image for post
Deploy with DatoCMS

You can see the final result here.

DatoCMS

The API-based CMS your editors will love

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store