Getting started

Welcome to the Zenblog documentation. To get started, you need to create a blog in the Zenblog dashboard and grab your API key.

Install Zenblog

Terminal
1npm install zenblog

Initialize Zenblog

Initialize Zenblog with your API key.

cms/index.tsx
1import { createZenblogClient } from "zenblog";
2
3const zenblog = createZenblogClient({ blogId: process.env.ZENBLOG_BLOG_ID });

Fetch your posts

Fetch your posts from the Zenblog API.

cms/index.tsx
1import { createZenblogClient } from "zenblog";
2
3const zenblog = createZenblogClient({ blogId: process.env.ZENBLOG_BLOG_ID });
4        
5const posts = await zenblog.posts.list();

Render your posts

Render your posts in your app.

cms/index.tsx
1
2<div>
3  {posts.map((post) => (
4    <a href={`/blog/${post.slug}`} key={post.id}>
5      {post.title}
6    </a>
7  ))}
8</div>
9

Fetch a single post with content

cms/index.tsx
1import { createZenblogClient } from "zenblog";
2
3const zenblog = createZenblogClient({ blogId: process.env.ZENBLOG_BLOG_ID });
4
5const post = await zenblog.posts.get({ slug: "my-first-post" });

Render your post

Render your post in your app. NextJS example.

cms/index.tsx
1<div>{post.title}</div>
2<div>{post.content}</div>
3<div>{post.publishedAt}</div>
4<div dangerouslySetInnerHTML={{ __html: post.html_content }} />

You can use something like Tailwind Typography to easily style the HTML content.