Type CMS is a cloud-based content platform. There is nothing to install and you don't need to worry about the underlying infrastructure for your projects. In this article we'll walk through how easy it is to get started with Type CMS.
Creating an organization
After signing in for the first time, if you are not part of an organization, you will be prompted to create one. This self-service screen lets you choose between the Free tier or, for those looking to scale and take advantage of all Type CMS features, the Pro tier. You can see a comprehensive comparison between our different plans on our pricing page.
For this example project we will select our free tier. We'll name our organization Demo and select AWS for our cloud provider and our region for our organization will be North America.
We can also optionally add our teammates to our organization from this screen. Select Create organization to continue.
Creating a project
Now that we've created our Demo organization, we'll create our first project. Think of projects as websites, applications, or a way to isolate content across different initiatives within an organization.
Select Create new project.
For this example, we'll call our project NextJS site. We have a companion article to this blog post that walks through connecting your project to a Next.js application.
Select the default language for your project. The default language for a project also sets the default language for all entries and content within your project.
As your organization grows, it is helpful to have visual accents on projects to quickly identify projects. Select a theme color to apply a preferred accent to your project.
Next, select Create project.
After creating your project you will be prompted with a project onboarding screen that can help you get started quicker. You can skip this or follow the steps in the onboarding prompt. We'll skip adding users because our organization currently only has one user, the creator of the organization.
Type CMS offers role-based access control in the form of groups and permission sets. To expedite the project creation process, Type CMS offers three commonly used permission groups in the onboarding step. We'll add all three groups to our project.
You can read more on groups in Type CMS in the article Role-based Access Control with Type CMS.
Our final step in the project onboarding prompt is adding environments. Environments can be created later in the project dashboard, but Type CMS also offers two commonly used environments during onboarding. We'll add both of these environments to our project, as well.
Now that project onboarding is complete, we can select Finish setup to continue to our project.
Managing environments
Environments are used throughout your project to define where your content should be published. For example, your website may have a development, staging, and production environment that you want to isolate content changes across for stakeholder review. The same concept applies here. For our example, we'll have two environments, development and production as setup during project onboarding.
Similar to our project settings, environments also have themes that we can apply for quick visual indicators as to what asset in our project is in which environment.
Select production to view settings for the production environment.
We'll apply the lime theme to our production environment. This step is completely optional.
We can now see the production environment set to lime within our project. This will be useful later when you need a quick high-level view of what content is where as your project grows.
Creating templates
Templates define the structure of different content in your project. Entries are all associated with a specific template that lets your users build consistent, structured content.
Select Create template to create your first template.
In this example project we'll be creating a blog, let's call this template Blog post. Select Create to continue to the template builder.
After your template is created, you'll be redirected to a blank template builder. Select Add items to begin adding items to your template. For our blog, we'll select the following items:
- Slug - for our blog URL
- Text field - for our blog title
- Text area - for our blog summary
- Rich text - for our blog body
- Select - for our blog category selection
- Date picker - for our blog's public publish date
- File - for our blog image
We'll now see our template builder populated with our selected items. Next we will give each item a user-friendly title so our users know which item is connected to each component on our web page. For developers, we'll want to add human-readable field IDs to each item to make the developer experience easier when integrating with our application. You can quickly assign field IDs by selecting the refresh icon next to your item's name.
You'll notice our Category (select) field has a red warning label on it. Because this field is a select field, we need to add options to it for the user to select from.
Select the gear icon on the Category item to configure these options.
For our blog post template we'll add three options for a user to choose from, food trends, meal prep tips, and chef interviews. Once you have added all your options for the select dropdown, select Done to continue.
We now have a complete and valid template to use for all of our blog posts in our project.
Creating entries
Now that we have our Blog post template created, we can create our first entry. Select Create new entry to continue.
In the Create new entry prompt, add your blog title in Entry name and select Blog post under Select a template. Select Create to continue.
After selecting Create in the previous step you will be directed to the entry editor for our first blog post. Notice that the entry editor follows the structure that we created in our Blog post template. Let's start populating the entry for our blog post.
To speed up the process in this example, we'll use the OpenAI integration to use ChatGPT to generate content for our blog body. Scroll to the rich-text editor (RTE) in the entry editor and select the AI option from the RTE menu. Next, select Generate content.
In the AI prompt we can provide our instructions on what we want to write in our blog post. Select Generate to continue.
Once your content is generated you can review and edit it, ask AI to regenerate it, or, go back to the prompt screen to provide a new prompt. We'll continue with the content it generated for us in this example. Select Add to editor to continue.
Our blog body now has content. Next, let's add an image for our blog. Select Select files in the image field.
We don't have any assets in our project yet, so let's upload an image to use in our blog. In this example, I grabbed a stock photo from Unsplash to use in our blog post. Select Upload files to upload one or more files. You can also drag and drop files into the asset manager modal to upload them.
Now that we have our image for our blog, let's select it and select Select 1 file to add it to our entry.
We now have all of our content populated in our entry for our blog post. Select Save at the top of the entry editor to save the content and create our first version of this entry.
Publishing content
Our content is ready to be published. At the top of the entry editor select Publish. You will be prompted to select which environment you would like to publish the selected entry version to. We'll select development for now. Next select Publish now under Schedule options. Finally, select Publish to publish this entry to the development environment.
You'll notice that version 1 of this entry in the right column now indicates that the selected version has been published to our development environment. We can also see at a quick glance in the right column which versions of this entry are published to which environment under Publish status.
So far in this guide we've created a new organization, added our first project, set up groups, environments, templates, and published our first entry. Our final step is to create a project token that our developers can use to connect our content to our application.
Connecting content to applications
To pull our content into our applications we need to first create a project token. Select Tokens in the left navigation in the project dashboard.
Next, select Create token.
In the Create new token prompt we'll add our token name and select the environment our token has access to. We’ll name this token Dev environment because we’ll use it to fetch content that has been published in the development environment.
After selecting Create on the token creation prompt, we will be directed to our token overview page of our newly created project token.
Here we can get our project token to pass to our dev team, view analytics around requests using this token such as number of requests, types of requests, as well as the geolocation of the requestor on the application side.
Type CMS provides access control options for tokens that can be used to restrict token usage from specified IP addresses and / or create secret keys to use with your tokens.
In this guide we setup a new organization in Type CMS and walked through the steps to creating project and publishing content. If you're a developer looking for assistance integrating Type CMS with your application, check out our companion article Creating a Blog with Type CMS and Next.js.
As always, if you need assistance with any part of getting started with Type CMS, please reach out to us.
We can't wait to see what you build.