# Hello, world

This quick example shows how to create content in BCMS and display it on your website using API directly. You’ll create a blog post and fetch it in your frontend.

## Step 1: Create a template

1. In the dashboard, go to Templates
2. Click Create new template
3. Name it Blog 
4. You'll, by default, get two mandatory fields: Title and Slug.
5. Add these fields too:Description → Rich Text (required)
6. Cpver image → Media (required)

![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/6867a35d2aaad4944e7b6189/bin2/CleanShot%202025-07-04%20at%2011.47.57%402x.jpg?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)

---

## Step 2: Add content

- Go to Entries → Blog 
- Click Create new entry
- Fill in:Title: Hello, world
- Slug: hello-world
- Pick an image
- Content: This is my first post using BCMS.
- Click Create

![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/6867b1c339707ccb0eff40e0/bin2/CleanShot%202025-07-04%20at%2012.49.07%402x.jpg?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)

---

## Step 3: Create an API key

To access content from your frontend, you need an API key.

1. Go to Settings → API Keys
2. Click Add new key
3. Name it Public Website
4. Set permissions:Read access to the Blog template
5. Click Save

Copy the API key ID, Token, your orgId, instanceId, and the templateId of your Blog template. Blog's template ID is accessible from the URL on the Administration → Templates → Blog.

---

## Step 4: Fetch the entry with curl

Once your entry is created, you can fetch it using curl.

```BASH
curl -X GET \
  "https://app.thebcms.com/api/v3/instance/<INSTANCE_ID>/template/<TEMPLATE_ID>/entry/<ENTRY_ID>/parse?apiKey=<API_KEY>"
```

Example in JavaScript:

```TYPESCRIPT
const instanceId = "<INSTANCE_ID>";
const templateId = "<TEMPLATE_ID>";
const entryId = "<ENTRY_ID>";
const apiKey = "<API_KEY>";

const url = `https://app.thebcms.com/api/v3/instance/${instanceId}/template/${templateId}/entry/${entryId}/parse?apiKey=${apiKey}`;

fetch(url)
  .then((res) => {
    if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
    return res.json();
  })
  .then((data) => {
    console.log("Response data:", data);
  })
  .catch((err) => {
    console.error("Request failed:", err);
  });
```

Replace:

- <INSTANCE_ID> with your project instance ID
- <TEMPLATE_ID> with your template ID
- <ENTRY_ID> with your entry ID or slug
- <API_KEY> with your API key value

---

## Step 5: Fetch and render in Next.js

Example using getStaticProps:

```TSX
export async function getStaticProps() {
  const res = await fetch(
    'https://app.thebcms.com/api/v3/instance/<INSTANCE_ID>/template/<TEMPLATE_ID>/entry/<ENTRY_ID>/parse?apiKey=<API_KEY>'
  );
  const post = await res.json();
  return { props: { post } };
}
export default function Blog({ post }) {
  return (
    <main>
      <h1>{post.meta.en.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.en }} />
    </main>
  );
}
```

---

## Next steps

- [Use widgets in content](/docs/inside-bcms/widgets)
- [Use BCMS with your favorite framework](/docs?error=integrations,670e90c0cedcf9e4d34d1bde)
- [Install the SDK for easier API access](https://www.npmjs.com/package/@thebcms/client)