Horbit Quickstart
Show your Horbit blog on your own website in ten minutes.
1. Switch the blog on
In the Horbit console open Configuration → Modules and turn on Blog. Write a post and publish it — an empty blog returns empty lists.
2. Create keys
Open Configuration → API keys.
- Create a secret key (
htk_…) for your server. It is shown once; store it as an environment variable. - Create a publishable key (
hpk_…) for the browser, and list the origins of your site on it (for examplehttps://example.org).
See Authentication for what each key can do.
3. List posts on your server
const API = 'https://api.horbit.ng/v1/public/blog';
export default async function BlogIndex() {
const res = await fetch(`${API}/posts?limit=10`, {
headers: { 'x-api-key': process.env.HORBIT_SECRET_KEY! },
next: { revalidate: 60 },
});
const { data: posts } = await res.json();
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<a href={`/blog/${post.slug}`}>{post.title}</a>
<p>{post.excerpt}</p>
</li>
))}
</ul>
);
}4. Render one post
export default async function BlogPost({ params }) {
const { slug } = await params;
const res = await fetch(`${API}/posts/${slug}`, {
headers: { 'x-api-key': process.env.HORBIT_SECRET_KEY! },
next: { revalidate: 60 },
});
if (res.status === 404) notFound();
const { data: post } = await res.json();
return (
<article>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content.html }} />
</article>
);
}content.html is sanitised by Horbit — no scripts, no event handlers — so it is safe to insert as-is.
5. Add the stylesheet
<link rel="stylesheet" href="https://api.horbit.ng/v1/public/blog/styles.css?key=hpk_…" />Posts now look the way your team designed them in Horbit. To match your site instead, see Styling.
Next steps
Count views and add comments and reactions with the publishable key — see Comments, reactions & views.