May 31st, 2021

Setting up DatoCMS and creating your first blog post

A few easy steps to configure DatoCMS for content creation.

Setting up DatoCMS

"Content is king"

"Content is king" is what Bill Gates once said. When I work on my projects I love to first define what kind of content types I will have, what I want to fill it in with. Brainstorming how I can store it and optimise the content creation without doing much 🦥.

DatoCMS comes in handy with that.

After setting up your account and creating your project jump right into Settings -> Models and select the Article model. If you don't see one you can easily create it. The naming convention is pretty clever. If you're looking for building a blog, you need articles, and articles are built upon an article model. So call it "Article". 

In my example there are already a few fields that use for my blog:

  • The cover is the main image for the article,
  • Title, obviously, and blurb to invite people for further reading (it's easier to maintain than truncating the entire article and get artefacts of bad formatting and parsing what's returned from the endpoint
  • Slug is needed to make an SEO-friendly URL, by default they are being generated from the Title field but you have full control over changing it to whatever you want, like "everything-about-pandas"
  • Featured is a toggle that gives me Boolean value to say if this article is featured (will be stick to the top of the blog with emphasized styling)
  • Sections (or Blocks) will allow you to add any kind of Block you'll create. What are these? These are blocks of pre-defined models to organize and store information. I use it for Paragraphs, Screenshots, Related projects/articles, and anything else that doesn't go well with just a regular block of text with inline images (imagine a blog article where you want to link your recent projects or include a custom gallery of your pandas, or sloths)

Creating blocks

To show you how it works, and also present how to create a block and implement it in Nuxt.js I will need a new Block called "Code". I like to keep things simple so the only things I need for the Code block is some meaningful title, programming language name (a shorthand, e.g. CSS -> css) to let the parse know how to format and style it, the actual code block we will gonna paste our snippets and the last: Slice Type. I'm doing this extra relation to a Collection of Slice Types to let Nuxt.js which template to render conditionally. Unfortunately, DatoCMS doesn't provide this kind of meta information in the JSON response so I had to do some "hacking" around it. This approach will cost us a few extra records in the database.

The last step is to add the new block type to our Validation section for the Sections field. This will allow you to only choose selected blocks for your blog article.

Now we can jump to the Content tab and create a new article.

Filling up dummy data

You can start with a real article on you can create a crazy one for debugging. In this example, we will focus on pandas (I love pandas).

As I mentioned before, I very much like to inject custom content types in between the whole article. This is why I use blocks to build up the paragraphs of text, code snippets, related projects or articles and so on.

DatoCMS offers plugins created by the community, one of them is "Fill with dummy text" which comes in handy while debugging styles, either when you write your own or you use the @tailwind/typography plugin with .prose class to do the dirty work for you.

After adding some dummy content you're ready to save the draft article and play with the API explorer. Copy the "slug" value (which in my case is "everything-you-need-to-know-about-pandas") – that will help us create a query to the single article.

API explorer

When fetching articles from the GraphQL endpoints we need two queries:

  • allArticles query to fetch the list of articles – you can only extract the data you need for that list (e.g. id, title, cover, blurb), in other words: lean payload calls
  • article($slug or $id) to fetch a single article (you'll fetch complete data from the article), heavy payload calls

Let's start with the allArticles query. You can rename it to whatever you want (MyQuery -> GetArticles) and save it in notes or a .gql file – we will need it later.

query GetArticles {
  allArticles(orderBy: _createdAt_DESC) {
    id
    featured
    blurb
    title
    slug
  }
}

GraphQL gives you some options to apply for the query: filtering, sorting, pagination, etc. In my example, the article about pandas is not yet available as by default DatoCMS returns only the published entries. Publishing the entry will make it available for testing. Don't worry, it won't be visible on your blog just yet. You need to trigger the build to do so. More about build triggers later on.

Now when we have our dummy blog post, a GraphQL query we can switch to the coding environment and build a simple blog. The best is to start with this repository which provides basic scaffolding for our project.

Updated: May 31st, 2021
stories you may like