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:
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:
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 .env
file with the DATO_API_TOKEN
variable set with your API token.
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
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:
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:
You can see the final result here.