when i was in the 5th grade i got into making my own websites. mostly they were just simple pages where i proudly displayed my collection of Dragonball Z gifs i had downloaded, but that's not the point

the point is, if a 10 year old could make a website in the 90s, it should be even easier for an adult to make one in the 2020s…right?

i mean, yeah? kinda. not as easy as i would like tho. there's no shortage of paths you could take to create your own personal website, but i've recently had a difficult time choosing a path for myself, much less someone who hasn't been doing stuff like this since they were a child

so i made a new path.

a path for bimbos, by bimbos.

static site generators

bimbo is a "static site generator" - a tool that can help you build a website without having to do a lot of busy work (e.g. writing bespoke HTML for every page). there is no shortage of tools like this (and honestly, most of them are probably better than mine^[1]), but they tend to assume you already know a lot about web development and have time to read a ton of documentation to use them

i somehow find myself in a weird space where i don't have enough time to learn any of these existing tools, but did have time to make my own. go figure.

the goal of bimbo is to be simple enough that you don't have to hold very much knowledge in your head to use it. you'll edit some files, let bimbo do its thing, and in seconds you'll have a complete website ready to be uploaded to a hosting service.

files?

yes, files. you will need to edit some text files for this.

bimbo is not a visual editor but it does come with its own web server that reloads automatically when you make changes.

i promise it's not that bad.

you can open the bimbo menu by left (on Mac)/right (on Windows) clicking this icon, which should look something like this if it's your first time:

select create new project > minimal and select a folder to create the minimal project in. bimbo will automatically load the new project, which you'll see when opening the menu again:

select preview in browser and watch in amazement as a real live^[2] webpage appears in your default web browser

if you open the bimbo menu and select open project folder, you'll find the following folders:

content

/content is where most ppl will spend the bulk of their time. anything you write in here will appear on your website for all the world to see

bimbo expects to find .md (Markdown) files in this folder, which will be converted into .html files on build.

templates

/templates is the next layer up in a sense - since you can't do very advanced formatting with Markdown, you'll likely want a bit of raw HTML in the mix.

any .html files in this folder can be used as a base, with your content and other unique data being piped in at build time - no need to copy/paste stuff!

/templates/partials contains .hbs (Handlebars) files - we'll go into more detail about these later, but they're basically smaller templates that can be nested within the larger ones.

a simple example is the navigation bar at the top of this page - we want it everywhere, so it's included as a "partial" on each page template.

static

/static is where you keep things that you want copied over 1:1 when the site is built.

a good example of this might be some image files or CSS/JavaScript that doesn't require any processing through bimbo

_site

finally, /_site is where bimbo will output everything. this is the fully generated site that will be uploaded to your webhost!

you could totally do any editing of these files in Notepad or something simple like that, but i recommend downloading VS Codium^[2] for a nicer experience. if installed, you can select the edit in VS Codium menu option to quickly open your project folder in the editor

let's look at some of the options you have for defining data:

bimbo.yaml

bimbo.yaml acts as a "global" configuration file that all pages have access to. for example, you may notice the footer on this page includes the title of this blog and my name. if i wanted to include the title elsewhere, i could use this placeholder in a .html or .hbs file:

{{site.title}}

this placeholder matches a key in bimbo.yaml:

site:
  title: bimbo blog

so {{site.title}} will be replaced with "bimbo blog" when the site is rebuilt.

content "front matter"

you can also include key/value pairs directly inside your content .md files - using this post as example:

---
title: metadata and config
date: 2026-01-04
draft: false
---

this is called "front matter"

as you might guess, the title and date values are pulled into the post.html template used to generate this page.

the draft value is a bit special - if bimbo sees tha this value is true, it will skip it during the build process.

defaults and overrides

if you'd like to apply some default metadata to your content files, you can do so globally by setting the contentDefaults in bimbo.yaml.

if you'd like to only apply defaults to a subset of your content, you can create a ~default.yaml file in a folder, which will affect only .md files in that directory.

bimbo will ultimately use whatever values are most specific (global > local to folder > front matter) when generating a page.

this process varies slightly depending on which hosting service you use, so i won't go into great detail here. i will say that Neocities seems to be the one i hear about most commonly. personally, i've been trying out Nekoweb, and liking it so far.

one-click deploy

if you pay the minimum price for bimbo, you can access bimbo+^[1] which has a "one-click deploy" feature. you can enable this by selecting your provider of choice from the set up deployment menu. bimbo currently supports Neocities and Nekoweb via API, but you can use any hosting service that supports SFTP (Secure File Transfer Protocol) by selecting the other option.

upon selecting one of these options, a window will pop up and ask for some information that will be saved in bimbo-secrets.yaml^[2]. after adding this configuration, you should now see an option to deploy to your provider in the menu.

you can always edit bimbo-secrets.yaml later or delete it entirely to restore the set up deployment option if you want to use a different provider.

templating deep dive

let's look at /templates/archive.html:

<!DOCTYPE html>
<html>
{{> head}}

<body>
    <div id="container">
        {{> navbar}}
        <div id="content">
            <h1>{{title}}</h1>
            {{{content}}}
            {{> post-list}}
        </div>
        {{> footer}}
    </div>
</body>

</html>

these double bracket placeholders that appear all over the template files are Handlebars expressions. a simple example here is the {{title}} expression, which gets replaced on build with the title value defined in archive.md.

by default, Handlebars will "escape" values returned by an expression. if you don't want this, you can add a third set of brackets to return the "raw" value instead (as is the case with the {{{content}}} expression, which is the Markdown body of archive.md converted into HTML)

the last thing i'd like to point out in this template is the use of > - this is where the .hbs files in /templates/partials come in. instead of piping data in, these expressions will be expanded into HTML "partials". let's look more closely at /templates/partials/post-list.hbs, which will replace {{> post-list}}:

<div id="postlistdiv">
    <ul>
        {{#each site.blogPosts}}
            <li><a href="{{this.url}}">{{formatDate this.date}} » {{this.title}}</a></li>
        {{/each}}
    </ul>
</div>

here we have some more unique Handlebars syntax. let's talk about #each first, which accepts an array (in this case, site.blogPosts) as an parameter. the HTML inside the #each block will be rendered once per item in this array, which we can access using the this variable.

the end result is a bulleted list of dates and titles, which link to the actual posts themselves. there's a bit of bimbo specific^[1] junk^[2] happening here that isn't super important, but hopefully it mostly makes sense!

i'd recommend checking out the Handlebars documentation to learn more about this syntax and what kinds of things you can do with it

working with /data

in addition to all the folders we covered in an earlier post, you can also create a /data folder to load in a handful of non-Markdown formats such as '.json' and '.yaml'. these can be accessed in templates via the special site.userDefined variable.

for a simple example, let's imagine we have a /data/colors.txt file that contains the following:

Red
Green
Blue

this list will automatically be split into an array that can then be iterated over:

<ul>
    {{#each site.userDefined.colors}}
        <li>{{this}}</li>
    {{/each}}
</ul>

which will be compiled into the following:

<ul>
    <li>Red/li>
    <li>Green/li>
    <li>Blue/li>
</ul>

Bluesky

if you found this place, you probably know what Bluesky is bc i have been posting about bimbo on there. if you don't, it's a social media site like Twitter^[2] but with some futuristic tech stuff going on in the background that i don't really care to explain, BUT the important part for our purposes is that you can pretty easily use their API^[3] to grab data and do cool stuff with it on your website

thanks to this post from Jonathan Moallem of Caps Collective, it was trivially easy to just kind of drop-in support for "comments" via Bluesky posts. the idea is that you can make a post on Bluesky linking to your blog post and any replies to that will be displayed on the actual webpage of your blog post.

the advantage of this approach is that it captures a lot of the conversation folks are already having in response to your Bluesky post (rather than splintering it with a bespoke commenting platform), it allows you to leverage Bluesky's moderation tools (blocking users on Bluesky will also hide their posts on your blog), and maybe most importantly (to me, anyway) - it doesn't require someone to sign up for another service (assuming they're already on Bluesky, obviously)

adding comments with bimbo

since this is something i'm personally interested in leveraging for my blog, i decided to make it a Proper Feature in bimbo rather than just hacking it in^[3:1]. i think it's about as straightforward as it can be (without a lot of extra work on my end, anyway), but as always, please let me know^[4] if you have suggestions on how to improve this functionality

also - i suppose it's worth saying that i assume you're using the latest version of bimbo and a fresh project (initialized from the latest example.zip) for this to work.

first off, you'll want to open bimbo.yaml and edit the value under site.integrations.bskyUserId:

  ...
  sortPostsAscending: true
  codeTheme: tokyo-night-dark
  integrations:
    bskyUserId: sofkq7uzgyczeyl24wxuc47o

the existing user ID is for an account i made just for this demo site, which is @bimbo.nekoweb.org^[5]. the other important bit of config will be on the blog post itself, as we can see here on 7-bsky-comments.md:

---
title: comments with Bluesky
date: 2025-02-07
draft: false
bskyPostId: 3lincp4ikhe2c
---

so now you know my Bluesky user ID and the ID of the specific post that we want to display comments from. but how do you get these for your blog?

it's not pretty, but you'll want to open the elipsis (...) menu on the Bluesky post in question and click "Embed post". here's what i get when i copy this code:

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:sofkq7uzgyczeyl24wxuc47o/app.bsky.feed.post/3lincp4ikhe2c" data-bluesky-cid="bafyreibm7nkc6sa5xs47du7x4ogdxiyqkbwykh62s6s4o32v6wkdddowcq"><p lang="en">this is a post to test comments on bimbo blog!</p>&mdash; bimbo.nekoweb.org (<a href="https://bsky.app/profile/did:plc:sofkq7uzgyczeyl24wxuc47o?ref_src=embed">@bimbo.nekoweb.org</a>) <a href="https://bsky.app/profile/did:plc:sofkq7uzgyczeyl24wxuc47o/post/3lincp4ikhe2c?ref_src=embed">February 20, 2025 at 4:12 PM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

see the data-bluesky-url value? let's look at that more closely:

data-bluesky-uri="at://did:plc:sofkq7uzgyczeyl24wxuc47o/app.bsky.feed.post/3lincp4ikhe2c"

it's still ugly, but you can hopefully see now where these IDs are coming from: the user is just after the at://did:plc: bit and the post is after that final slash. these are the values you'll want to copy out and place in their respective locations^[6]

that's it?

that's it! your post should now have some indication of being connected to Bluesky at the bottom. i should also note - if you don't include a bskyPostId on a post, it simply won't show any of this junk. so it's totally opt-in.

bonus feature: icons

this is not really relevant to all this comments stuff but you may also notice that there are icons alongside your reply/repost/like counts - the latest bimbo has a new Handlebars helper function that allows you to quickly add icons in your templates via Feather

if you want to icons elsewhere on your site, i recommend checking out templates/partials/bsky-comments.hbs to see how i'm implementing them. have fun!