Quickstart in 5 mins

This guide walks you through creating a basic webpage in Contentstack in less than five minutes. Follow these step-by-step instructions to efficiently set up, publish, and retrieve content.

By completing this guide, you will:

• Understand Contentstack’s core functionalities.
• Build a webpage and structure its content.
• Manage and retrieve content seamlessly.

Tip: To speed up the project setup, use the Bootstrap plugin in the Contentstack CLI.

Steps to Get Started

Through this guide, you will learn how to:

1. Create a Stack
2. Create a Content Type
3. Add an Environment
4. Create Content (Entries and/or Assets)
5. Publish Content
6. Build Your Web Page
7. Retrieve Your Content

Let’s dive into each step.

Create a Stack

A Stack is a container for all your project’s content, including content types, entries, assets, etc.

Note: If you are using a trial account with a sample stack, select the existing stack and proceed to the next step.

To create a new stack, log in to your Contentstack account and perform the following steps:

1. Click + New Stack in the top right corner and click Create New to create a new stack.

   Note: Alternatively, for the Use Prebuilt option, refer to the import a prebuilt stack document.

2. In the Create New Stack modal, enter the following details:
   1. Enter a Name (e.g., My Website).
   2. [Optional] Add a Description (e.g., Content for my website).
   3. Set Master Language (e.g., English - United States).
3. Click Create.

For more details, refer to the Stacks documentation.

Next, let’s create the structure of the web pages by creating content types.

Create a Content Type

A Content Type defines the structure of your webpage.

To create an About Us content type, perform the following steps:

1. Click the “Content Models” icon in the left navigation panel.
2. Click + New Content Type button and from the dropdown, select Create New to create a new content type.

   Note: Alternatively, for the Use Prebuilt option, refer to the import a prebuilt content model document.

3. In the Create New Content Type modal, perform the following steps:
   1. Enter a Name (e.g., About Us).
   2. The UID (Unique ID) is auto-generated, however, you can make changes if needed.

      Note: The UID cannot be modified once the content type is saved.

   3. [Optional] Add a Description (e.g., Organizational details).
   4. Under Type, choose either Single (for a single entry) or Multiple (for multiple entries).
   5. Click Save and proceed.

4. In the “Content Type Builder” page, select the fields you want by clicking the “Insert a field” (+ icon) to add fields. Customize fields by modifying their Properties icon.

   

5. Click Save or Save and Close to save your content type.

Tip: You can use Contentstack Automate to streamline content modeling and reduce manual effort.

For more details, refer to the Content Modeling and Create a Content Type documentation.

Add an Environment

An Environment is the space to publish your content.

To create an environment, perform the following steps:

1. Navigate to the “Settings” icon (press “S”) in the left navigation panel, and select Environments.
2. Click + New Environment.
3. In the Create Environment modal, enter the following details:
   1. Enter a Name (e.g., production).
   2. Choose an Environment Label Color from the color picker.
   3. Specify the Base URL (e.g., http://localhost:8000).
   4. Select a Language (e.g., English - United States).
4. Click Create.

For more details, refer to the About Environments document.

Create Content

Your content comprises entries and/or assets.

To create an entry in the “About Us” content type, perform the following steps:

1. Click the “Entries” icon in the left navigation panel.
2. Click + New Entry.
3. In the Select Content Type modal, select “About Us” and click Proceed.
4. Enter a Title (e.g., Contentstack) and a relative URL (e.g., /about).
5. [Optional] Add Page Components as needed and Tags for easier search and filtering (e.g., Org).
6. Click Save.

Tip: You can use Contentstack Workflows to streamline content approvals and collaboration.

Publish Content

To publish an entry, perform the following steps:

1. At the bottom of the entry editor, click Publish.
2. In the Publish Entry modal:
   1. Select the production environment.
   2. Select the Language (e.g., English - United States).
   3. Under Publish, choose Now (immediate) or Later (schedule for later).
3. Click Send.

For more details, refer to the Publish an Entry document.

Tip: Use Contentstack Automate to create and optimize workflows for efficiently managing and publishing content.

Build Your Web Page

Now that your content is ready, you can use the following tools to further enhance the structure of your web page:

• HTML: Improve the structure of your webpage.
• CSS: Control the visual styling and layout.
• JavaScript (or jQuery): Add interactivity and dynamic functionality.

Once your page is ready, you can host it using a platform such as Contentstack Launch that will help deploy and manage your environments effortlessly with enterprise-grade security.

A sample demo of a web page is available on CodeSandbox.

You can also check out Contentstack's guide on Building Your Website for detailed instructions and best practices for creating your web pages.

Retrieve Your Content

You can fetch published content using the Content Delivery API. Use this request with a REST API client (e.g., Postman):

https://cdn.contentstack.io/v3/content_types/{content_type_uid}/entries/{entry_uid}?environment={environment_name}

To locate the required content_type_uid and entry_uid:

1. Open your entry.
2. Click the Entry Information icon (“i”).
3. Copy the Entry UID and Content Type UID.

Note: Make sure to pass the Stack’s API key and environment-specific delivery token in your client.

For more details, refer to the Authentication and Content Delivery API documentation.

What’s Next?

Enhance your Contentstack experience:

• Contentstack Live Preview: Instantly see how your content changes appear on your website without publishing.
• Visual Builder: Use Visual Builder to design and configure your webpages effortlessly with a drag-and-drop interface.
• Marketplace: Explore integrations and extensions to enhance Contentstack’s capabilities with additional features such as translation, personalization, and automation tools.
• GraphQL API: Learn how to fetch structured data efficiently using GraphQL, enabling optimized querying for large-scale projects.
• SDKs: Utilize Contentstack's SDKs to streamline development across various programming languages and platforms.