hbox

hbox is a static site generator, which can convert a screenshot of a website into an actual website, making the process of spinning up a new site/design a breeze.

I always wanted to be able to write a blogpost such as this one, in the comfort of Emacs (or any simple text/markdown editor), deploying by just hitting save, and have every possible validation running in the background to make sure I dont release something broken. hbox gives you that, and a bit more.

Show dont tell

hbox can build a non-trival site with multiple posts in less than 50 msecs. This speed means that you can blog with a live preview running. It also means, that the heavy lifting optimizations live in their own command optimize, which I recommend you run before deploying, example workflow here:

The site built, is the one you're reading right now. This entire page, is just text:

How to init a site

Trivially, hbox init foo will give you your first scaffold and you're free to build everything by hand if you like. In that regard, hbox is like almost every static site generator you've ever come across - However, I find this flow to be quite enjoyable:

Chat with ChatGPT, Claude Design Pro Max 5 or whatever about your website
Ask them to generate a high-fidelity mock of your website
Run hbox import foo screenshot.png index and watch the magic happen.

You will get a page in nice semantic html, perhaps a little css file for that page but also a general design.css to govern the entire site.

Pages can easily be copied (they are just files after all) and also updated using AI, like

hbox update foo index \
   "Add a section above the footer which shows \
    a nice hockey-stick graph and add a text section \
    to the right of the graph, which says something \
    about my customers satisfaction"

The AI will think for a bit, then generate something usable, something developer-friendly and put it in a preview folder, awaiting your judgement.

AI Content, come not here

I don't enjoy the part of website building where you're hammering out HTML and CSS, so hbox can handle this for you. But I do greatly enjoy reading articles, blogposts, tutorials, rants written by actual humans, so hbox does nothing to generate content/text for you.

I strongly encourage you to write each and every blogpost by hand and failing that, simply put "I asked AI to write this blogpost using this prompt" and let your users run decide if they want to run the prompt.

Developers workflow

Build

Compiles every page, blogpost, template, markdown file into its final html form.

Validate

Checks every linked resource on every page to make sure that you have no broken links, no un-rendered pages, no mistakes.

You can run this command with the added param --check-external-links which I recommend that you do every now and then. This takes a little bit longer, because it downloads the first 4 bytes from every external link, to ensure that it still returns a 200 OK.

Optimize

This takes a bit longer, because I wanted you to be able to add any and every image you can image to your site and still have fantastic performance. Optimize converts everything to webp and down-scales it (aggressively) to every conceiveable device-size (and a few inconceivable sizes I must admit). This reduces the size downloaded by users by up to 95% without sacrificing quality.

Deploy

For the lazy among us, you can simply configure an ssh user, a host and a folder in your hbox.toml file and deploy will rsync the compiled site to that destination.

The Source

Feel free to have a look here: hbox on Github

The code itself is not AI generated, but it is my first time putting together a complete piece of software in Rust.

Rust is a good fit for hbox, because working with LLMs is exceedingly volatile, so I wanted a language which was very strict, Rust is that by nature.

In addition, Rust has been on my bucket list of language I wanted to learn for a while now, so this felt like a good opportunity.

I set this as 0.9.0 which might be too high in a Rust context. There's still a bit of work to be done on testing and LLM integrations, but all in all I find it enjoyable and reliable to work with.