---
title: "Quickstart in 5 mins"
description: "Quickly create a basic webpage in Contentstack in under five minutes. Follow step-by-step instructions to build, publish, and retrieve content easily."
url: "https://www.contentstack.com/docs/headless-cms/quickstart-in-5-mins"
product: "Contentstack"
doc_type: "guide"
audience:
  - developers
  - admins
version: "current"
last_updated: "2026-06-22"
---

# 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](/docs/developers/cli/bootstrap-starter-apps) in the Contentstack CLI.

## Steps to Get Started

Through this guide, you will learn how to:

1.  [Create a Stack](#create-a-stack)
2.  [Create a Content Type](#create-a-content-type)
3.  [Add an Environment](#add-an-environment)
4.  [Create Content (Entries and/or Assets)](#create-content)
5.  [Publish Content](#publish-content)
6.  [Build Your Web Page](#build-your-web-page)
7.  [Retrieve Your Content](#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](/docs/developers/quickstart-in-5-mins#create-a-content-type).

To create a new stack, log in to your [Contentstack account](https://www.contentstack.com/login) 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](/docs/developers/marketplace-platform-guides/installing-a-starter#install-starter-via-stack-creation-experience) 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](/docs/developers/set-up-stack/about-stack) 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](/docs/developers/create-content-types/import-prebuilt-content-models) 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](/docs/developers/create-content-types/about-fields) you want by clicking the “Insert a field” (+ icon) to add fields. Customize fields by modifying their [Properties](/docs/developers/create-content-types/about-field-properties) icon.
    
    ![Content Type Builder Example](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb2c162fcc83f8f76/67c5797624e52c469ae6f4fd/Quickstart-About-Us-Page.png "Content Type Builder Example")
    
5.  Click **Save** or **Save and Close** to save your content type.

**Tip:** You can use [Contentstack Automate](/docs/developers/automation-hub-guides/about-automation-hub) to streamline content modeling and reduce manual effort.

For more details, refer to the [Content Modeling](/docs/developers/how-to-guides/content-modeling) and [Create a Content Type](/docs/developers/create-content-types/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](/docs/developers/set-up-environments/about-environments) document.

## Create Content

Your content comprises [entries](/docs/content-managers/author-content/about-entries) and/or [assets](/docs/content-managers/author-content/about-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](/docs/developers/set-up-workflows-and-publish-rules/about-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](/docs/content-managers/author-content/publish-an-entry) document.

**Tip:** Use [Contentstack Automate](/docs/developers/automation-hub-guides/about-automation-hub) 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](/docs/developers/launch/about-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](https://codesandbox.io/p/sandbox/contentstack-jtw5q?from-embed).

You can also check out Contentstack's guide on [Building Your Website](/docs/developers/building-websites) 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](/docs/developers/apis/content-delivery-api#authentication) and [Content Delivery API](/docs/developers/apis/content-delivery-api) documentation.

## What’s Next?

Enhance your Contentstack experience:

*   [Contentstack Live Preview](/docs/content-managers/author-content/about-live-preview): Instantly see how your content changes appear on your website without publishing.
*   [Visual Builder](/docs/content-managers/visual-builder/about-visual-builder): Use Visual Builder to design and configure your webpages effortlessly with a drag-and-drop interface.
*   [Marketplace](/docs/developers/marketplace-platform-guides/about-marketplace): Explore integrations and extensions to enhance Contentstack’s capabilities with additional features such as translation, personalization, and automation tools.
*   [GraphQL API](/docs/developers/graphql-api/about-graphql): Learn how to fetch structured data efficiently using **GraphQL**, enabling optimized querying for large-scale projects.
*   [SDKs](/docs/developers/sdks): Utilize Contentstack's **SDKs** to streamline development across various programming languages and platforms.

**Additional Resource:** Explore [Contentstack Academy](https://www.contentstack.com/academy), where you can find courses, tutorials, and certification programs to deepen your understanding of Contentstack’s features and best practices.