Search results for "{{ search.query }}"

No results found for "{{search.query}}". 
View All Results

Hello world in 5 minutes

Learn the basics of content creation, publishing, and displaying your content with Kentico Cloud.

In this introductory tutorial, you will build a simple website powered by Kentico Cloud from start to finish. If you are new to the concept of headless CMS, this is a great place to start.

You will learn how to:

  • Create a project
  • Create a content type
  • Create and publish a content item
  • Display the content on a website

No account yet?

If you do not have your Kentico Cloud account yet, sign up at https://app.kenticocloud.com/sign-up. After creating an account and signing in, you will see a content inventory of a sample project, which you won't need now.

Creating a project

Project is the primary organizational unit of your content.

To create a new project:

  1. From the project switcher in the top left, open My projects.
  2. Click Create new (+) in the top right corner.
  3. Name your project, for example, "Hello World".
  4. Click Create project.
See a list of your projects

See a list of your projects

The new project is created and selected as active. Now you can model the first content type.

Creating a content type

Content types (sometimes called content models, or content templates) define the structure of a piece of content – a content item. They are made of content elements such as texts and images.

A content type can be used by a single content item (for example, a homepage) or by many content items (for example, each article can be based on the same Article content type).

Let's create a content type for a homepage with a headline, some text, and a picture:

  1. In the app menu, choose Content models.
  2. Click Create new (+).
  3. Name the content type "Homepage".
  4. Add the desired content elements.
    • Drop in a Text element and name it "Headline".
    • Drop in a Rich text element and name it "Body text".
    • Drop in an Asset element and name it "Picture".
  5. Click Save.

That's it, your content type is ready to use.

Content type for a homepage

Content type for a homepage

Creating a content item

You can now create a content item based on the new Homepage content type.

  1. In the app menu, choose Inventory.
  2. Click Create new (+).
  3. Select Homepage as its content type.
  4. Name the content item "Hello Headless World".
  5. Fill in the text elements Headline and Body text.
  6. Upload an image to the Picture asset element. If you like, you can use our headless horseman.
Draft version of the homepage content item

Draft version of the homepage content item

Publishing

To publish your content item:

  1. In the app menu, choose Inventory.
  2. Open the "Hello Headless World" content item.
  3. Change its status from Draft to Publish.
  4. Click Publish.

Your content item is now publicly available via the Delivery API. Each content item can be accessed at a specific URL similar to this one:

https://deliver.kenticocloud.com/<YOUR_PROJECT_ID>/items/<CONTENT_ITEM_CODENAME>

  1. Replace <YOUR_PROJECT_ID> with the ID of your project, available in the API Keys section.
  2. Replace <CONTENT_ITEM_CODENAME> with the codename of your content item:
    • Open the content item.
    • Click # in the top right corner.
    • Click Copy to clipboard.
  3. Open the URL in your browser.

For example, the URL can look like this:

https://deliver.kenticocloud.com/8d20758c-d74c-4f59-ae04-ee928c0816b7/items/hello_headless_world

The API will return your content item as a structured JSON object that is easy to parse by any programming language.

{
  "item": {
    "system": {
      "id": "3d4ea43d-6ebc-485b-bf39-f428d464f475",
      "name": "Hello Headless World",
      "codename": "hello_headless_world",
      "language": "default",
      "type": "homepage",
      "sitemap_locations": [],
      "last_modified": "2017-11-06T14:27:40.9674111Z"
    },
    "elements": {
      "headline": {
        "type": "text",
        "name": "Headline",
        "value": "Hello Headless World!"
      },
      "body_text": {
        "type": "rich_text",
        "name": "Body text",
        "images": {},
        "links": {},
        "modular_content": [],
        "value": "<p>Kentico Cloud is a headless content management system. It's an application that allows content editors to create, review and manage content.&nbsp;</p>\n<p>But unlike a traditional CMS, it makes no assumption about how the content is displayed (that's what makes it headless). It simply delivers the content as JSON through a Web API to any platform or device.&nbsp;</p>"
      },
      "picture": {
        "type": "asset",
        "name": "Picture",
        "value": [
          {
            "name": "headless_horseman.png",
            "type": "image/png",
            "size": 18631,
            "description": "A headless knight on a horse.",
            "url": "https://assets.kenticocloud.com:443/8d20758c-d74c-4f59-ae04-ee928c0816b7/b40d37d7-31cf-463c-9195-e268a2caeed1/headless_horseman.png"
          }
        ]
      }
    }
  },
  "modular_content": {}
}

Displaying on a website

For the purposes of this tutorial, we've prepared a simple HTML page that uses jQuery to populate a few HTML elements with your content from Kentico Cloud.

Check the JS and HTML tabs in the codepen example below:

You can also view the final result at http://hello-headless-world.surge.sh, or tweak the source code in the codepen repository.

Tip: Change the project ID of the API call to yours to display your own content. Make sure the codenames still match.

What's next?

Working directly with the API interface is fine for small tasks and simple websites. The API reference is your friend. For more complex projects, however, you will want to use a platform-specific SDK or write your own.

We provide SDKs for the Delivery API in JavaScript, TypeScript, Node, Java, .NET, PHP and Swift programming languages. See how the SDKs are used in practice and explore our sample applications.

For more information about the user interface and the content creation process, visit our Help Center.

Hello world in 5 minutes

Learn the basics of content creation, publishing, and displaying your content with Kentico Cloud.