Create a content managed website

Now that you are familiar with the basic concepts and our approach at Mozaik, you can follow this short tutorial to set up a new project in Mozaik.

This tutorial helps you getting an overview how you can create projects, content types, fields, and most importantly documents. We are going to create a very simple website with a homepage and few other pages. You can find more details about this project (full content type and field descriptions, and a sample UI with source code) in the coming weeks.

You can follow this tutorial and create the components yourself, or if you want to get started even quicker, you can create the project scaffold by selecting the Sample blog template when creating a project.


Create an account

The very first thing you'll need is a Mozaik account. If you don't have one yet, the just head over to the sign up page and create one.


Creating your workspace and master project

After your log in you will see your main dashboard showing your workspaces. A workspace has a master project for serving your production content and can have multiple sandbox projects for testing purposes or local development.

When you create a workspace it automatically creates a master project as well with the same name.

The first step in creating a new workspace is to set the master project name. At the moment it has to be unique as this is going to be part of your endpoint. You can also set a more friendly Display name, but this is optional.

At the second step you can select between creating a project from scratch (Empty project) or by using a template. We currently provide 2 different templates to make it even quicker setting up a new project: a blog and a cinemas and movies template. The latter one also has some dummy data. Let's go ahead by creating a project by a template. And select the Sample blog template at the third step.

After your project workspace and master project are created, you are automatically redirected to the master project dashboard page.


Creating a new document

Every document should have a title and a slug. A slug must be unique within a content type. The document title is displayed in the document list. You can modify the document title any time, but the slug can be modified only until the document is published, as it can be used to retrieve a single document through the API.


Publish your content

When a document is in draft mode you can either schedule it for a date when you want it to become published, or publish immediately. Let's publish it now: click on the Publish button.

When it's done, you will see that the Revert, Unpublish and Archive buttons become enabled. You can learn more about the built-in publishing workflow in the Concepts documentation.


Adding a content type

If you created an empty project or you want to add a new content type you need to go to the Content types page. The Simple and Single content types describe the shape of a document, the Embeddable content type is ideal for defining reusable components that can be added to other content types, and the Enumeration content type can be used for defining values for a select input.


Adding fields

A content type can have multiple fields (except the Enumeration content type as it has multiple values). Each field has a label, an id (API id) and a type. Also you can set the position of the field which will be used for ordering the fields on the content editor page. You can also set a Group name for a field. Fields with the same group name will be displayed on the same tab on the content editor page.

You can also add validations to the fields: Every field can be marked as required and based on the the type of the field you can select from different validations. For example a Single line text input can have a minimum length, maximum length and length range validations.


Query the API

We can now test the API, and see how the document is delivered through it. Here you can see two examples: one for retrieving a list of documents and one for getting one document by its id. For more details on how document queries work, see the API examples documentation.


That's it!

In a few easy steps, you've just created a new project and added a new content. If you go back to your project dashboard, you will see your recent documents in the list. Try to add more documents, or content types!