Blogtini

Themes

Fri, 30 Oct 2026 00:00:00 GMT

Every blogtini theme, on this site -- click around inside the preview, and flip thru themes w/ ← →. Your pick is never saved. Live preview themes → To use one, put its name in your site's `config.yml`, eg: `theme: librarian`. To see *your* site in every theme, add a `preview/` page to it -- see [Docs](../docs/#themes).

future imperfect

The default. Posts w/ big featured images, and a sidebar w/ recent posts, about & categories.

HTML5 UP, via Hugo Future Imperfect Slim

editorial

A magazine look: a clean column of posts, w/ a big sidebar menu that tucks away.

HTML5 UP

massively

A big intro over a full-page photo, then posts as tiles.

HTML5 UP

phantom

Posts as colorful tiles that light up as you hover.

HTML5 UP

striped

A classic blog: posts w/ stats beside them, and a sidebar w/ a calendar.

HTML5 UP

forty

Bold, full-bleed image tiles -- great for photo-heavy posts.

HTML5 UP

strata

A fixed profile column on the left, posts on the right.

HTML5 UP

helios

A big banner header, a nav bar w/ dropdowns, and a classic multi-column layout.

HTML5 UP

strongly typed

Bold type & heavy borders, w/ a nav bar & dropdowns.

HTML5 UP

hyperspace

A purple one-pager: a side nav that lights up as you scroll, posts as "spotlight" rows that slide in.

HTML5 UP

librarian

Posts as library catalog cards, on Tufte's book typography -- w/ a red "loan period" stamp: the reading time.

blogtini's own -- more

terminal

A retro terminal: monospace, amber on near-black, a shell prompt atop every page.

panr's Hugo Terminal theme

grid

Future imperfect, w/ posts as a simple grid of cards.

blogtini

Want to make your own theme, or port one? See [THEMES.md](https://github.com/traceypooh/blogtini/blob/main/THEMES.md).

Documentation

Fri, 30 Oct 2026 00:00:00 GMT

Your site is a folder of markdown files in a free git repo. Each post is one plain text file; a single line of JS has blogtini "paint" it, in the browser, w/ your theme. **No build step is required. An optional build step makes it better.** ## Get started Easiest: the [blogtini-go](https://github.com/traceypooh/blogtini-go) template -- a ready-to-go site, w/ a homepage, an about page, a first post, & publishing on each push. Click **Use this template**, turn on Pages, & edit `config.yml` -- its README walks you thru it, in 2 minutes. Or by hand: your site's top folder needs just three files -- then add posts: - `theme.js` -- one line, loading blogtini: ```js import 'https://blogtini.com/index.js' ``` - `config.yml` -- your site's settings, eg: ```yaml title: My blog site_url: https://you.github.io/myblog/ theme: librarian ``` - `index.html` -- your homepage: copy the top of [blogtini's](https://github.com/traceypooh/blogtini/blob/main/index.html), down thru its `body` line (the one w/ `class="homepage"`) -- then write your homepage, in markdown, below that. Then host it, free, w/ GitHub (or GitLab) Pages: push it, and turn on Pages in the repo's settings. Optionally, use your own domain (~$20 USD/year) -- like blogtini.com. ## Write a post A post is a folder w/ an `index.html` that's really front matter + markdown, eg: `2026-01-i-baked-a-pie/index.html`: ```markdown --- title: I baked a pie date: 2026-01-15 tags: - baking featured: pie.jpg comment: --- It was *delicious*. ``` - The `comment:` line is what makes it work: the browser runs that script tag (the front matter just sees a string) -- so `https://you.example/2026-01-i-baked-a-pie/` shows your post, in your theme. - Images go in `img/` (eg: `featured: pie.jpg` is `img/pie.jpg`). - Optional: `description:` (a one-liner for feeds & link previews), `featuredcaption:`, `categories:`, `author:`. - `type: page` makes it a page (eg: about): for your nav menu, not the list of posts. - `theme: terminal` shows just that post in another theme. If JS never loads, a page still shows its text after a few seconds -- it's never stuck blank. ## Your site's settings In `config.yml` -- just what you want to change. Some favorites: ```yaml title: My blog site_url: https://you.github.io/myblog/ # your live site, ending w/ / theme: librarian posts_per_page: 10 img_site: img/me.jpg # your picture, for sidebars & "about" bits menu: main: - name: About url: /about/ - name: Contact url: /?contact sidebar: about: I bake pies, & write about them. social: rss: index.xml github: you mastodon: mastodon.social/@you contact: email_service: https://formspree.io/f/your-form-id # for the contact page: /?contact reading_time: true ``` blogtini's own [config.yml](https://github.com/traceypooh/blogtini/blob/main/config.yml) has more. Settings like `sidebar:` merge w/ the defaults -- so set just the parts you want. ## Themes 13 themes come w/ blogtini -- see them all, live: [Themes](../themes/). - Pick yours in `config.yml`, eg: `theme: editorial`. - Visitors can try others w/ the theme picker -- their pick lasts 24 hours, just for them. - See *your* site in every theme: add the 5-line `preview/index.html` from the [README](https://github.com/traceypooh/blogtini#themes), then open `https://you.example/preview/`. - A link can switch a visitor to a theme, like the picker does: `[Try it](#theme=terminal)`. Make your own: [THEMES.md](https://github.com/traceypooh/blogtini/blob/main/THEMES.md). ## How your posts get found A static host won't list your files -- so blogtini finds your posts from the first of: 1. `index.xml` -- made by the [build](#the-build-optional): a feed, sitemap & search index, in one file 2. `index.txt` -- a plain list, one post per line. Hand-edit it, or: `find . -name index.html > index.txt` 3. `sitemap.xml` 4. else: the pages each visitor has opened. Search, tags & prior/next still work -- so even a one-post site shows every feature. (Crawlers need the build, or an `index.txt`.) The page you're on always shows its own file -- so your edits show right away. ## The build (optional) It makes your site better for everything that doesn't run JS: link previews, search engines, RSS readers. It writes `index.xml` (your RSS feed & sitemap, w/ every post) -- and w/ `--seo`, a tiny head line atop each post. It runs on [deno](https://deno.com) or `node`, from your site's top folder: ```sh deno run --reload=https://blogtini.com --allow-read=. --allow-write=index.xml --allow-env=GITHUB_REPOSITORY \ --allow-import=blogtini.com:443,esm.ext.archive.org:443 https://blogtini.com/bin/build.js ``` Easiest: a GitHub Action runs it each time you push -- copy blogtini's [.github/workflows/](https://github.com/traceypooh/blogtini/tree/main/.github/workflows). ## Comments - Visitors comment on a post -- each one arrives as a pull request on your repo. Merge it to publish it. (Via [staticmin](https://github.com/traceypooh/staticmin), a tiny comment service.) - They all live in one easy-to-read `comments.json`. To remove a comment, delete its few lines. - No emails are stored. Commenters' Gravatars (if any) get saved into your repo -- so your readers never call gravatar.com. No Gravatar: a GitHub-style "identicon". - Replies nest under their parent. ## Your own scripts A page can have its own script tags (eg: a photo gallery). They run before blogtini has drawn the page -- so wait for it, in a `type="module"` script: ```js await new Promise((resolve) => (document.documentElement.hasAttribute('data-blogtini-rendered') ? resolve() : document.addEventListener('data-blogtini-rendered', resolve, { once: true }))) // your stuff ``` To find your elements in any theme (some draw inside shadow DOM): `import { query_all } from` the same blogtini url your `theme.js` imports, eg: `query_all('.my-gallery')`. ## Versions `https://blogtini.com/index.js` is always the latest. Or pin a release (any git tag), for a site that never changes under you: ```js import 'https://esm.ext.archive.org/gh/traceypooh/blogtini@2.0.0/index.js?bundle=false' ``` (Keep the `?bundle=false`.) The themes come from that same version. [Releases](https://github.com/traceypooh/blogtini/releases) say what's new. ## Work on it locally Any static file webserver, from your site's top folder, eg: ```sh python3 -m http.server ``` then open http://localhost:8000. If the list of posts looks wrong, run the build (it reads `index.xml`). After adding or deleting a post, click the bottom ↻ button (just on `localhost`) to have blogtini look again.

The Librarian theme

Wed, 28 Oct 2026 00:00:00 GMT

Blogtini has a brand new theme -- and this one is ours. Not a port: **Librarian** was made from scratch, for blogtini, and you won't find it anywhere else. Every post becomes a typewritten library catalog card. Each post page gets a "DATE DUE" slip in its margin. The search box, subjects & theme picker live in oak card catalog drawers, with brass label holders & pulls. And the red rubber stamp on every card? That's the post's **estimated reading time**, stamped as its loan period. This post is already showing itself in Librarian (unless you've picked another theme). **[Try it on the whole site](#theme=librarian)** -- your pick lasts 24 hours, just for you, and the theme picker at the bottom of any page switches back anytime. To make it your own site's theme, put `theme: librarian` in your `config.yml`. ![Finding aids: card catalog drawers for search, subjects, categories and the theme picker](../img/librarian-drawers.png) ## Reading a card Here's how each part of a real catalog card maps to a post: ``` ┌─────────────────────────────────────────────┐ │ WEBS Jaquith, Tracey. │ │ .L30 The Librarian theme / Tracey │ │ 2026 Jaquith. -- October 28, 2026. │ │ 1,240 words : front., 2 ill. │ │ │ │ Blogtini has a brand new theme ... │ │ │ │ 1. website. 2. features. ... │ │ I. Title. ╔═════════════╗ │ │ ║ LOAN PERIOD ║ │ │ (o) ║ 6 MIN ║ │ │ ╚═════════════╝ │ └─────────────────────────────────────────────┘ ``` - **Call number** (top left): the post's first subject, a [Cutter number](https://en.wikipedia.org/wiki/Cutter_Expansive_Classification) made from its title (a letter & two digits, like a library's), and the year. It's a little made up, but it's ours. - **Main entry**: the author, last name first -- when a post has one. - **Title & date**, then the **collation**: a book's card says how many pages & illustrations it has. Ours counts words & images, and a post's featured image is its **frontispiece** (`front.`) -- the picture facing a book's title page. - A **summary**, then the **tracings**: the subjects a card is filed under. Each one links to every post with that tag or category. - The **punched hole** at the bottom, where the drawer's rod goes through. - The **stamp**: reading time, at about 213 words a minute. Each post's stamp lands at its own slight angle, with slightly uneven ink. ![A post page, with its DATE DUE slip in the margin](../img/librarian-post.png) ## Built on Tufte CSS Posts are set in [Tufte CSS](https://edwardtufte.github.io/tufte-css/): Edward Tufte's book typography, with its wide right margin for notes. That margin is where the DATE DUE slip goes, and where a featured image's caption appears. The body text is ET Book; the cards are typed in Courier Prime. The rest follows the library idea: - **Finding aids** (an archivist's word for the guides to a collection): the search, subjects, categories & theme picker drawers, at the end of every page - **Subject headings**: the tags page is laid out like a book's index, with dotted leaders - **Previous / Next on the shelf**: a post's neighbors - **Ask a librarian**: the contact page - **Colophon**: the footer - **Shh!**: the comment form asks you to keep it down - **The reading room after hours**: the dark scheme, for nighttime readers Like everything else in blogtini, it doesn't call out to anyone else's servers. Tufte CSS & the fonts are self-hosted alongside the theme -- no font CDNs. ## Reading time, for every theme The reading time behind the stamps is now shared by all the themes. Future Imperfect's "4-Minute Read" and Striped's clock use it too. Don't want it? `reading_time: false` in your `config.yml` turns them all off (Librarian drops its stamps & slips). ## Show off any theme Two more new things, for every theme: - A post can pick its own theme: `theme: librarian` in its front matter, like this post. (A viewer's own pick from the theme picker still wins.) - A link can switch a viewer to a theme, just like the theme picker: `[Try it](#theme=librarian)` in a post's markdown -- or share a link like https://blogtini.com/#theme=librarian

Blogtini v2

Mon, 26 Oct 2026 00:00:00 GMT

Blogtini v2 is here! Instantly previewable 10+ themes! Your posts are still just markdown files in a free git repo -- and now they hold up better everywhere: for crawlers, feed readers, link previews, people without JavaScript, and (we hope) the far future. The promise is unchanged: **no build step is required. An optional minimal build step makes it better.** # Themes, themes, themes Ten themes now ship with blogtini, including ports of many favorites from [HTML5 UP](https://html5up.net): future imperfect, editorial, massively, phantom, striped, forty, strata, helios, strongly typed, and grid. Pick one in your `config.yml`: ```yml theme: editorial ``` Or try them live with the theme picker -- your pick (and your light/dark choice) sticks for a day, just for you. # Comments, rebuilt - **One file.** Every comment on your site now lives in a single `comments.json` at the top of your repo. No build step is needed to show them -- merge a comment's pull request, and it's live. - **Still moderated.** Each new comment arrives as a pull request (via [staticmin](https://github.com/traceypooh/staticmin), our tiny Staticman on Netlify). Each one lands in a random "slot" in the file, so two pending comments almost never conflict -- even with GitHub's web "Merge" button. - **No emails stored.** Not even as a checksum. Each commenter gets a private, site-specific id instead. - **Your Gravatar, kept local.** If you have a [Gravatar](https://gravatar.com), a copy comes along with your comment, into the site's `avatars/` folder -- so readers' browsers never call out to gravatar.com. No Gravatar? You get your own colorful identicon, made right in the page. - **Replies nest properly**, and comments are oldest first, like a conversation. Try it: leave a comment below! # Fail open If the JavaScript never loads -- blocked, offline, or a thousand years from now -- your page still shows its text after a moment, instead of staying blank. It's just a markdown file, after all. # One feed to rule them all The optional build now writes one rich `index.xml`: your RSS feed (with summaries, images, and full text), your sitemap, *and* the site's search index -- in one request, instead of fetching every post. No build? A hand-made `index.xml`, `index.txt`, or `sitemap.xml` still works. The build is now one script that runs on [Deno](https://deno.com) *or* Node -- even in the iOS Code App, with a press of ▶. Add `--seo` for a tiny head line atop each post: its title and image, for link previews. # Privacy Reading a blogtini site with comments no longer sends anything to gravatar.com. Blogtini's libraries all come from [esm.ext.archive.org](https://esm.ext.archive.org) (the Internet Archive's own mirror) -- as do pinned, versioned releases of blogtini itself, like before. **🎉 Here's to v2! 🎉**

Blogtini Turns One!

Fri, 14 Feb 2025 00:00:00 GMT

Blogtini is now feature complete with everything working! See below for the major features finally finished. # Comments We use [Staticman](https://github.com/eduardoboucas/staticman) for comments. We've created a free lightweight setup for comments using https://netlify.com "serverless edge" functions. More information can be seen here: https://github.com/traceypooh/staticmin # Contact (email) blog maintainer The contact form is setup -- https://formspree.io is a good option to use and this blog uses it as an example. # Versioning Releases now get tagged (eg: `1.0.8`). Blog sites can opt to use a **specific version** of blogtini, in their site's top-level `theme.js` like this: ```js import 'https://esm.ext.archive.org/gh/traceypooh/blogtini@1.0.8/index.js?bundle=false' ``` (The default theme then comes from that same version, too.) Optionally, sites can pick a non-default theme by name in their `config.yml` -- it comes from that same version, too, eg: ```yml theme: grid ``` # Light/dark mode Light/dark mode is improved with multiple cosmetic bugs fixed. There is a new [💡] icon in the top nav bar to toggle between light & dark modes if desired. (Otherwise, local time & system preferences are used). # Styling & CSS This is an internal detail -- but now all markup is created via Web Components, and all the CSS is "inline" inside the web components JS files. This allows for clean versioning of all CSS, since all the JS files are versioned. **❤️ Happy Saint Valentine's Day! ❤️**

Blogtini SEO

Sat, 06 Jul 2024 00:00:00 GMT

We're now working on improved Search Engine Optimization by adding [head] element tags and [JSON-LD](https://schema.org/BlogPosting) Looking into a GitHub Actions step to create/update the `sitemap.xml` file as well as dynamically prepend a head with metadata and JSON-LD to the start of blog markdown `.html` files. Also of interest is sharing markdown blog posts to social networks and pasting links into text messages. We want the card-like preview with title and image relevant to the blog post to work.

Blogtini @ DWebCamp

Fri, 23 Jun 2023 00:00:00 GMT

Here's the slides from my talk at DWebCamp 2023 https://dwebcamp.org/ --> https://tracey.archive.org/dweb-2023

Blogtini Themes and Web Components - Update

Thu, 15 Jun 2023 00:00:00 GMT

Working with the amazing [Renior, another volunteer](https://twitter.com/renoirb) ... We've been splitting up the main (javascript) post "crawling" and processing, from the formatting. ## Themes That gives us very easy to create themes! A theme can reuse formating or "business logic" from other themes -- or come up with any number of new ways to display pages and/or the entire site. The above image shows the theme picker from the top nav menu. ## Web Components We settled on [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) which are browser native (as opposed to `react`). Tracey likes [lit](https://lit.dev/) since it is a lightweight/minimal setup atop native web components. But a theme can use any style of web components they like. ## Example Once the posts are all parsed from your site, they are stored in a browser cache (`localStorage` or `indexedDB`). When you arrive at a blog post, a page, or a list of posts for a given tag, etc. the main javascript can simply rewrite the page `` tag to: ```html

...

``` Each web component is its own javacript file that knows how to render the given section. For example, this is the default theme's [bt-post](https://blogtini.com/theme/future-imperfect/bt-post.js) file/component. Here is a [second theme](https://blogtini.com/theme/grid/index.js) and how it sets itself up -- as overrides to the main theme.

Blogtini @ DWebCamp

Fri, 26 Aug 2022 00:00:00 GMT

Here's the slides from my talk at DWebCamp 2022 https://2022.dwebcamp.org/ https://tracey.archive.org/dweb-2022

blogtini update

Mon, 25 Jul 2022 00:00:00 GMT

I'm now moving towards a setup that is entirely `markdown` and `js`. I've got client-side searching woriking dynamically with `lunr`. I'm setting up two `.git` hooks to run a small script before a `git commit` and after a `git merge`. Then we should be pretty close to a fully automatically updated `sitemap.xml` and `staticman` setup for comments.

About the Pooh

Mon, 16 Mar 2009 00:00:00 GMT

## A little (more about me) I'm into software, UI/UX, video, devops, biking, time-lapse photography, sewing, design, lighting, and interior decorating. I have a twin! ![tracey with twin](https://www.hunterleebrown.com/photos/tracey/TraceyGrabs009.jpg) It's true! ## My Work I'm presently working at [Internet Archive](https://archive.org). # About this site I modeled this after my personal website https://traceypooh.com that uses [Hugo](http://gohugo.io/) -- a static site engine written in Go. (I migrated from wordpress). - I now write in _Markdown_ - very natural and simple. - I copied most of the them features from: [Hugo Future Imperfect Slim](https://github.com/pacollins/hugo-future-imperfect-slim), porting from `Go` templates to pure `javascript` - We can use GitHub or GitLab to host the entire website in a single code repository. - It _very_ nicely auto builds/deploy upon each `git push`. - It's totally free except for any optional domain name (for modest annual fee, typically ~$20 USD/yr)