building a personal blog with bb.bi

option A: let AI build your blog page

the fastest path. enable the posts plugin, open the AI assistant, and describe what you want. the AI reads your plugin data and generates a working blog page with post list, categories, tags, and pagination — all wired up.

1. enable the posts plugin

dashboard → your handle → plugins → enable posts. add a few posts with categories and tags so the AI has something to work with.

2. open the AI assistant

go to any page editor, click AI assistant, and tell it what you want. be specific about style and features:

"build a minimal blog page for a software developer.
show posts as a list with title, date, and tags.
add a sidebar with categories. include pagination.
use a clean, monochrome style with lots of whitespace."

3. generate and refine

the AI generates a complete page with working post list, category filters, tag navigation, and detail pages. you can refine it — make the typography larger add a dark mode toggle move tags above the post list — as many times as you like.

4. customize post detail pages

go to plugins → posts → the detail template setting. click generate with AI and the AI creates a matching detail page template for individual posts — consistent typography, layout, and style.

you can also generate tag page and category page templates the same way. clicking a tag or category renders a dedicated archive page with filtered posts.

option B: build it yourself with the SDK

prefer full control? bb.bi provides a JavaScript SDK that your HTML pages can call directly. write your own blog layout in HTML, and use the SDK to fetch and display posts.

the SDK is available automatically — no install, no build step. just call bb.posts.list() from your page's script.

fetching posts

bb.onReady(async function() {
  var result = await bb.posts.list({ limit: 10 });

  result.posts.forEach(function(post) {
    var el = document.createElement("a");
    el.href = bb.url(post.slug);
    el.innerHTML =
      '<h2>' + bb.escapeHtml(post.title) + '</h2>' +
      '<time>' + bb.formatDate(post.publishedAt, "long") + '</time>';
    container.appendChild(el);
  });
});

filtering by category or tag

// filter by category
var result = await bb.posts.list({ category: "tutorials" });

// filter by tag
var result = await bb.posts.list({ tag: "javascript" });

// pagination
var page2 = await bb.posts.list({ limit: 10, offset: 10 });

listing categories and tags

// get all categories
var cats = await bb.posts.categories();
cats.categories.forEach(function(cat) {
  // cat.name, cat.slug
});

// get all tags
var tags = await bb.posts.tags();
tags.tags.forEach(function(tag) {
  // render tag cloud
});

auto-filtering on tag/category pages

when a visitor navigates to a tag or category page, the SDK sets bb.filter automatically. your code can read it to show the current filter context:

if (bb.filter && bb.filter.tag) {
  heading.textContent = "tagged: #" + bb.filter.tag;
}

if (bb.filter && bb.filter.category) {
  heading.textContent = "category: " + bb.filter.category;
}

// bb.posts.list() automatically applies the active filter —
// no need to pass category/tag manually on these pages.

helpful utilities

the SDK includes utilities you'll use constantly:

• bb.url(slug) — build internal links relative to the current page
• bb.formatDate(iso, style) — format dates as "Jan 15", "January 15, 2025", or "3d ago"
• bb.escapeHtml(str) — safely insert user content into HTML
• bb.truncate(str, max) — truncate text with ellipsis
• bb.navigate(slug) — navigate to a subpage
• bb.el(selector) / bb.els(selector) — query DOM elements

full SDK reference is available in the dashboard under your handle → SDK reference.

mix and match

the two approaches work together. start with AI to get a working blog page, then edit the generated HTML to add custom behavior. or start from scratch and use the AI to refine specific sections.

you can also use visual element editing — select any element on the preview, then tell the AI to change just that part. want to redesign the post card layout without touching the sidebar? select the card, describe what you want, done.

what you get

example: a developer's blog

you claim alex as your handle. you enable the posts plugin and create a few categories: tutorials, notes, projects. you write your first post.

you open the AI assistant and ask for a minimal blog page with post list, category sidebar, and a clean serif font. the AI generates the page. you publish it.

alex.bb.bi                    → blog home (post list)
alex.bb.bi/hello-world        → post detail
alex.bb.bi/tag/javascript     → all posts tagged "javascript"
alex.bb.bi/cat/tutorials      → all posts in "tutorials" category

later, you decide the post cards should show a reading time estimate. you select a post card in the visual editor, tell the AI add estimated reading time under the date, and it updates just that element. your blog evolves with you.