Setting_up_the_project.md

Setting up the Blog Example Project

In order to make use of our different skeleton examples, we need to create a project that has a specific model structure. In this guide, we go through creating said example project and how to fill it with your own content.

Getting started

To start your Blog Example you have two choices of going forward:

Starting from scratch

The first step in our journey for an awesome blog model structure is the project creation. Navigate to your project overview and click on Create new Project. Choose a name and description and select your desired region.

That was easy, wasn't it? The actual model creation won't get any more difficult, we promise! 🤓

Creating the Content Models

To create the necessary content models you can now click on your created project to get to your project dashboard. Select Schema in the sidebar. By default, you will be on the first of two nested tabs. You should be on the Models tab, the other tab being Enumerations, which we won't worry about for now. This is where it gets interesting. In order to use the example project, we need to have a fixed structure for our models.

Our Blog will consist of two main Models:

• Post: Here we will have all the field related to our posts such as title, content, image and much more.
• Author: This will be a collection of fields describing the Author (name, image, bibliography)

Doesn't sound complicated at all, doesn't it? Let's get started!

Post Model

First, we will take care of the Blog Post Model. Click Add Content Model on the top right. Enter Post as display name, the API ID will be filled in automatically. The display name will be the model name shown in the GraphCMS UI, while the API ID is the name in the GraphQL API. If you want to you can set a description and hit Save.

After the Model is created, we can continue creating the fields. We will go through the creation of some fields together and have you create the rest.

Let's start with our Post Title: click the FIELDS tab to the right of the window. You'll be presented with a series of fields. Drag the Single line text field onto our new model. Now we enter Title as Display Name - the API ID will be filled in automatically again. There's no other configuration we need to do so we just hit Create, or return on your keyboard.

Next up we will create our Post Slug field, which we will use for the URL in the detail view. Drag another single-line text field into our model. Enter Slug as Display name (API ID gets filled in). That's all for configuration, so hit Create.

Now you need to create to following fields to finish up the Post Model:

• Content field – Type Markdown
• Cover Image field – Type Asset Picker
• Date and Time field – Type Date and Time
• Tags field – Type Single line text - under Additional Options checkbox Is List?

Author Model

One of our last steps is the Author Model. Just like before, click Add Content Model on the top right and enter Author as Display Name and hit Save.

Now we will add the necessary fields:

• Name field – Type Single line text
• Image field – Type Asset Picker
• Bibliography field – Type Multi line text

Now we are nearly done with our Content Model, and we just need one more step to connect a Blog Post with an Author.

Relations

Relations are used to make a connection between two models.

To set up a relation from our Post Model to the Author Model we need to create a Reference field. The general approach to create relations is top-down. So you would create the Relation from the Model that is "above" the other. In this case Post would be our top level model and Author beneath it.

Drag a Reference field onto the Post Model.

The following steps are easy but important to understand so we'll break them down into a list:

1. On the right panel, click the drop-down "Select model" and choose Author. This is telling us which two models to connect.
2. Click the drop-down for the connection icon between "One to one relation" – in our case, we will define our content model that a post can only have one author, but that an author could have written many posts. To do this, we'll choose the "many to one" selector, that is the three dots on the left leading to one dot on the right. See the image below for an example.

Permissions

There's one more thing we need to do before we can access the later created content via the API - Permissions for the project!

Under the settings for our project, we can scroll down to the Public Api Permissions section. Click the drop-down and change this to read.

Creating Content

In order to have a good source of content for the demo applications, we want to create at least 5 content entries. You can decide yourself what they should be 😊

To create some posts, click on Post under Content in the left navigation. Click on the + symbol on the top right to start the creation.

Fill in all the Fields you need for a Post. The Authors field is the Relation we just created. You'll need to create authors on their own before you can connect them. Similarly, you will need to upload images under Assets before you can attach them, as well. Don't worry, this will change soon!

When you create content, all items start as Draft – you will need to switch this to Published before you can see the content.

Repeat these step until you have a few posts ready.

When you are done with the content creation you are ready to jump into the examples!

Choose your Example

You can now choose between the React and Vue example to continue your journey!