a README that people actually visit

what you need

a single-page dev profile works on the free plan. upgrade to pro for subpages (project details, blog, about) and a subdomain.

two ways to build it

path A: describe it, AI builds it

open the AI assistant and describe your page. the AI generates complete HTML — layout, typography, colors, hover states, everything.

"personal developer page for a backend engineer.
stark white background, monospace headings, clean sans-serif body.
my name 'Alex Chen' at the top, one-liner: 'I build infrastructure.'
then a section with 4-5 projects — name, one-line description, GitHub link.
below that: links to my blog, GitHub, Twitter, email.
feel: minimal, precise, no decoration. like well-written documentation."

refine it: make the project names bolder, add a subtle hover underline on links, reduce the spacing between projects. each refinement costs 1 credit.

path B: write the HTML yourself

switch to the code editor and write whatever you want. standard HTML and CSS — no framework, no compilation, no restrictions. if you can write it in a browser, it works here.

<style>
  body { font-family: 'JetBrains Mono', monospace; background: #fafafa; }
  .projects a { border-bottom: 1px solid transparent; }
  .projects a:hover { border-color: currentColor; }
</style>

<h1>Alex Chen</h1>
<p>I build infrastructure.</p>

<div class="projects">
  <a href="https://github.com/alex/kv">kv</a> — distributed key-value store
  <a href="https://github.com/alex/pipe">pipe</a> — unix pipes for the browser
</div>

or mix both: generate with AI, then open the code and adjust. the two approaches are complementary.

the SDK: your page is programmable

every bb.bi page has access to a JavaScript SDK via window.bb. no import, no build step — it's just there. this is what makes a bb.bi page different from a static HTML file: your page can read data, call plugins, and react to context.

fetching your latest posts

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

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

page view counter

// enable the counter plugin, then:
var count = await bb.counter.getValue();
document.querySelector('.views').textContent = count + ' views';

// increment on each visit
await bb.counter.increment();

contact form

// enable the contact form plugin, then:
form.addEventListener('submit', async function(e) {
  e.preventDefault();
  await bb.contact.submit({
    name: form.name.value,
    email: form.email.value,
    message: form.message.value,
  });
  form.innerHTML = '<p>sent — thanks!</p>';
});

the SDK is intentionally simple — vanilla JS, no dependencies, no async/await required (promises work fine). it's designed for developers who want to write real code, not wrestle with a platform.

a dev blog without the overhead

enable the posts plugin. write posts in the dashboard with markdown, categories, and tags. the AI generates a blog page that matches your site — or you build the layout yourself using bb.posts.list().

no static site generator. no build pipeline. no deploy process. write a post in the dashboard, hit publish, it's live. your blog renders on the same page infrastructure as everything else — fast, cached, global CDN.

alex.bb.bi/blog                    → post list
alex.bb.bi/blog/building-kv        → post detail
alex.bb.bi/blog/tag/rust           → posts tagged "rust"
alex.bb.bi/blog/cat/tutorials      → posts in "tutorials" category

if you outgrow the built-in editor, you can fetch posts via the SDK and render them however you want — custom layouts, syntax highlighting, table of contents, whatever you need.

host your images properly

enable the media library plugin (pro+) and get permanent, short image URLs:

alex.bb.bi/m/avatar        → profile photo for GitHub, Twitter, etc.
alex.bb.bi/m/og            → default OG image for social shares
alex.bb.bi/m/kv/screenshot → project screenshot for the README
alex.bb.bi/m/blog/hero     → hero image for a blog post

use them in your GitHub READMEs, blog posts, social profiles — one URL, always works, never expires. update the image and the URL stays the same.

why not just use GitHub Pages?

example: a backend engineer

Alex is a backend engineer who builds open-source tools. he claims alex as his handle and opens the AI assistant.

he describes: "minimal page, white background, monospace headings. my name and a one-liner at the top. then a list of projects — name, description, GitHub link. then links to my blog, GitHub, Twitter. no colors, no icons, just text." the AI generates the page. he adjusts the font weight and publishes.

he enables the posts plugin and starts a dev blog. writes about building a distributed key-value store. the AI generates a matching blog page — same typography, same spacing. he publishes his first post.

he upgrades to pro, enables the subdomain (alex.bb.bi), and adds project detail pages with code examples and architecture diagrams. each subpage is generated with the AI using his main page as a style reference.

alex.bb.bi                         → personal page
alex.bb.bi/blog                    → dev blog
alex.bb.bi/blog/building-kv        → post: building a distributed KV store
alex.bb.bi/projects/kv             → project detail: architecture, API docs
alex.bb.bi/contact                 → freelance/consulting inquiries

his bb.bi/alex link goes in his GitHub bio, Twitter bio, conference slides, and email signature. one URL, everything in one place. the page loads in under 200ms from anywhere in the world.