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 website 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.

We are currently running in closed-beta: you can create your account but it can take a week or two until you can activate your account. We're doing our best to give access as soon as possible.


Creating a project

After your log in you will see you general dashboard. Here you can find all your projects, but currently it's rather empty, so let's create a new one.

You need to set a project name, and the project id will be generated automatically. The project id automatically generated, however you can change it if you like. But remember that the id should contain only alphanumeric characters, underscores and dashes.

We currently provide three different templates to make it even quicker setting up a new project: a website, a blog and a photo gallery project template.

After your project is created, you can see it in the list. Click on it and you'll find yourself on your project dashboard page.

If you choose to create the project using the template you can skip the next two steps and continue from the Creating a new document


Adding a content type

If you created an empty project, you need to go to the Content types page. Here you can create the first one: your Homepage content type. Since we don't want to create multiple Homepage documents (we can still have multiple versions), select the Singleton content type radio button. Once it's created, you can start adding fields to it by clicking on the cog icon to manage the fields.


Adding fields

Until we have our Page content type, we want to add only four fields:

  • A header image
  • A single line text for the title, and another for the tagline
  • A rich text editor for the content

The label of the field is what you will see in the content editor app next to a field. The API id is the key that will contain the value in a query response.

This is how your field list should look like now.

You can add some validation to the fields if you want to, but we'll skip it for now.

If you go back to the project dashboard page, you will see it changed a bit: there are three panels for your documents. On the top of the page you can find a button, clicking on it you can start creating a new one.


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.

After you named your document, start adding content:

When all is done, click on the Save button and your document will be created. It will be in Draft status. After it's saved you will find that the Publish and Schedule buttons become enabled.


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.


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 published document in the list. Try to add more documents, or content types!