cs-icon.svg

Quickstart in 5 mins

Here’s a quick guide that explains how to create a basic webpage in Contentstack in under 5 mins.

Note: Learn how to use the Bootstrap plugin in Contentstack CLI to automate the project setup process for starter apps.

The steps to be followed are given below: 

  1. Create a Stack
  2. Create a Content Type
  3. Create Environment
  4. Create Content (Entries and/or Assets)
  5. Publish Content
  6. Retrieve your Content
  7. Display your Content

Let’s look at the steps in detail.

  1. Create a Stack

    First, you need to create a stack that will hold all the data to your project.

    Note: If you are using a trial account with a sample stack, you can select that stack and move on to the next step.

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

    1. Log in to your Contentstack account. Click on + New Stack on the top right corner.
    2. In the Create New Stack dialog box, enter the following:
      1. Name (mandatory field): Name of your project, for example, “My Website.”
      2. Description (optional field): Enter a relevant description, for example, “Content related to my website.”
      3. Master Language (mandatory): Select the primary language of the stack, say “English - United States”.
    3. Click on Create.

    This creates your “My Website” stack. Read more about Stacks.

    Next, let’s structure the pages of your website using content types.

  2. Create a Content Type

    Content types define the structure or blueprint of your web page.

    Learn more About Content Types.

    Based on the structure of your webpage, you can create either a Webpage (for web pages, e.g., homepage, contact page, etc.) or Content Block (for reusable content blocks, e.g., header, footer, menu, etc.) content type.

    Next, mark your content type as either Single (to create a single entry) or Multiple (to create multiple entries with the same structure).

    Now, let’s see the steps to first create a Homepage content type:

    1. Click the “Content Models” icon on the left navigation panel of your page. 
    2. Click on + New Content Type.
    3. In the Create New Content Type form, perform the following steps:
      1. Select Webpage.
      2. Provide a suitable Name for your content type, say Homepage.
      3. Select Multiple because we can use this content type to create other similar pages.
      4. Add a Description (optional), and click on Create and Add fields.
    4. Next, add the following fields.
      1. Add a File field by clicking on the “Insert a field” “+” button and name it “Image.”
      2. Add a Multi line Textbox field and name it “Description.”
    5. Click on Save and Close.

    Refer to the Content Modeling and Content Type documentation to know more.

    Your “Homepage” content type is ready to use. You can now use this content type to create entries.

  3. Create Environment

    We need to add a publishing environment that corresponds to one or more deployment servers or a content delivery destination where you can publish the entries.

    Learn more About Environments.

    To add an environment in Contentstack, go to your stack and perform the following steps:

    1. Click the “Settings” icon on the left navigation panel and select Environments.
    2. Click on + New Environment.
    3. Provide a suitable Name, say “production”
    4. Specify the Base URL under the Preview URLs section (e.g., ‘http://YourDomainName.com’), and select the language (e.g., English - United States). For this example, you can use http://localhost:8000.
    5. Click on Add.

    Now you are ready to create your content.

  4. Create Content (Entries and/or Assets)

    Now, to add an entry for your “Homepage” content type, go to your stack, click the “Entries” icon on the left navigation panel and perform the steps given below:

    1. Click + New Entry.
    2. Select the content type for which you want to add the entry and click Proceed:
      1. Title: Enter a title for your entry, say “Contentstack”
      2. URL: This field will be autopopulated. You can click on the Edit (pencil) icon to change it.
      3. Image: Click on Browse File and select any images.
      4. Description: Enter body content of your choice.
    3. Click on Save.

    With this step, you have created sample data for your website.

  5. Publish Content

  6. To publish your content, perform the following steps:

    1. After creating your entry, click Publish.
    2. Under Environment, select the Production environment.
    3. In Language(s), select English - United States.
    4. Under Publish*, you have two sub-options – Now and Later.
      1. Now allows you to publish an entry immediately
      2. Publish Later allows you to publish an entry at a later date/time. You can select the date and time of publishing.
    5. Click on Send.

  7. This publishes your content in your publishing environment.

  8. Retrieve your Content

    The published content is accessible via Content Delivery APIs. You can use the following request using any third-party REST API clients (e.g., Postman) to get a single entry. Learn more about Content Delivery API.

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

    You will find both the content_type_uid and entry_uid details in the entry page:

    1. Click on the entry you created.
    2. On the right-side of the entry page, click on “Entry Information” icon “i”.
    3. Under Entry ID you will find the entry UID, and under Content Type ID, you will find the content type UID.

    In place of environment_name, you need to pass the name of your environment.

    The response of the above API request returns a structured JSON object as follows:

    { 
   "entry":{ 
      "locale":"en-us",
      "title":"Contentstack",
      "url":"/home",
      "image":{ 
         "uid":"blta07d95f7872eb58e",
         "created_at":"2019-08-05T10:54:54.628Z",
         "updated_at":"2019-08-05T10:54:54.628Z",
         "created_by":"bltaaba5fbac0ff0622",
         "updated_by":"bltaaba5fbac0ff0622",
         "content_type":"image/png",
         "file_size":"1096",
         "tags":[ 
         ],
         "filename":"cs.png",
         "url":"https://images.contentstack.io/v3/assets/bltfa9026798819a8a2/blta07d95f7872eb58e/5d480afe19e55743594783fb/cs.png",
         "ACL":[ 
         ],
         "is_dir":false,
         "_version":1,
         "title":"cs.png",
         "publish_details":{ 
            "environment":"bltd43777d94dc2c16f",
            "locale":"en-us",
            "time":"2019-09-18T07:27:23.643Z",
            "user":"bltaaba5fbac0ff0622"
         }
      },
      "description":"ContentstackTM is the hub powering omnichannel content, digital experiences and personalized customer journeys. It is the industry leader in the headless content management system (CMS) category. Marquee customers include Amway, Best Buy, Cisco, Dell, Ellie Mae, Express, Farm Bureau Insurance, J.D. Power, Marriott, Martha Stewart, Miami HEAT, and Sky. Contentstack sits at the heart of an award-winning Digital Experience Platform (DXP) and is the exclusive API-first CMS for the SAP Cloud.",
      "tags":[ 
      ],
      "uid":"blt619fd79eea73f3cc",
      "created_by":"bltaaba5fbac0ff0622",
      "updated_by":"bltaaba5fbac0ff0622",
      "created_at":"2019-08-05T10:55:05.499Z",
      "updated_at":"2019-08-05T10:55:05.499Z",
      "ACL":{ 
      },
      "_version":1,
      "_in_progress":false,
      "publish_details":{ 
         "environment":"bltd43777d94dc2c16f",
         "locale":"en-us",
         "time":"2019-09-18T07:27:23.643Z",
         "user":"bltaaba5fbac0ff0622"
      }
   }
}

  9. Display Your Content

    Till now, you have developed a sample web page and seen how to fetch your content. Now let’s see how to display the content on the web page.

    To design our web page, we have used the following tools:

    • HTML: To define the structure of the web page, and to mention how the elements in the structure will populate themselves with the content retrieved from Contentstack.
    • CSS: To define the styling of your HTML page.
    • JavaScript: To add interactivity to your web page. We need to specify the destination URL to fetching values from the JSON object of the published entry. This file uses JQuery (library of JavaScript).

    For your reference, we have already created a demo web page using CodeSandbox.

What's next?

You can explore and try out our Content Delivery and Content Management REST API requests. We also have our very own GraphQL APIs that you can explore.

Contentstack also provides Postman collections of our Content Delivery, Content Management, and GraphQL APIs which will help you to get started with the APIs and try them out through the Postman client. To get started with the the Postman collections, download the latest version of the Postman collection(s) and the Postman app, set your Contentstack account-specific values in the collection environment, and try out our APIs with ease.

You can also try out our platform-specific SDKs or write your own.

Was this article helpful?

More articles

What You Need to Get Started

Learn more

How to Start Using Contentstack

Learn more

Sample Apps

Learn more
^