Pager (pager.joodaloop.com)
A single-page site builder with live reload, auto-linked headings, image aspect ratios, markdown support, and accessibility warnings.
All you need are these two files in any folder:
├── pager.yaml
└── pager.html
You set up your site details in pager.yaml like so:
title: My Site
description: A cool site
favicon: link-to-favicon.png
card: link-to-card.png
domain: example.com
port: 8080
tailwind: true
css:
- style.css
inject: '<!-- anything you want to add to the <head> of the page -->'And pager.html contains your content:
<main>
<h1> You don't even need <body> or <head> tags </h1>
<p> Just write content, and whatever else you want </p>
<figure>
<img src="photo.jpg"/>
<figcaption> Like images, etc. </figcaption>
</figure>
</main>Once you have both files, you can start the server by running pager inside the folder. This builds index.html and index.md, starts a server that live-reloads on any file change. So, finally:
├── index.html // GENERATED BY PAGER: your page, ready to deploy
├── index.md // GENERATED BY PAGER: your page as Markdown, ready to share
└── pager.html // your prose
├── pager.yaml // your site config
NOTE: Unlike what you might expect, the index.html and index.md files are not meant to be edited by you. They are generated from the pager.html file, which is the thing you should be editing.
Apart from giving you good HTML skeleton from your config details, Pager also comes with...
If you have the Tailwind CLI or executable installed globally, set tailwind: true in pager.yaml and Pager will compile your Tailwind classes and inline the result into the page.
Set PAGER_DEBUG=1 when running Pager to show detailed build timings and raw Tailwind output.
This is independent from css:. Entries in css: are treated as normal stylesheets (linked by default, inlined only when inline_css: true).
You can include local CSS globs in css: as well:
css:
- /css/*
- /components/*.cssConvert markdown or CSV files to HTML with the <convert> tag:
<convert src="about.md" />
<convert src="data.csv" />.md— converted to HTML elements.csv— rendered as an HTML<table>(first row becomes<thead>)
Embed any file as a syntax-highlighted code block with the <syntax> tag, with the language auto- detected from the file extension using chroma.
<syntax src="example.py" />
<syntax src="config.yaml" />Add <toc /> anywhere in content.html to render a list of links to headings (level 2 to 4) in the page.
- Markdown page for LLMs to read/humans to copy — generates
index.mdwith YAML frontmatter as a render-equivalent of the HTML page. - Headings without an
idget an auto-generatedidbased on their text content:<h2>My Section</h2>→<h2 id="my-section">My Section</h2> - Images with a local
srcgetaspect-ratiofrom actual file dimensions. - External links get
target="_blank"andrel="noopener". - Local link checking — warns on
<a href="#missing-id">and<a href="missing-file.pdf"> - Asset hashing — links to CSS files using content hashes query strings for cache busting.
- Warnings for missing alt text, icon-only links without
aria-label, missing frontmatter fields, missing referenced files, title > 60 chars, description > 160 chars
git clone https://github.com/youruser/pager.git
cd pager
go installThis places the pager binary in ~/go/bin. Make sure it's in your PATH:
# add to your ~/.zshrc or ~/.bashrc if not already there
export PATH=$PATH:$HOME/go/binWe have a small set of CLI commands, and all you really need in practice is the pager command.
pager newThis scaffolds starter files into the current directory.
If you want Pager to do it inside a folder called mysite instead:
pager new mysite
cd mysiteThis is optional. Pager will work in any folder that has a pager.html and pager.yaml file, and you can arrange everything else however you like. This command just scaffolds my preferred structure to get you up and running.
pagerThis builds index.html and index.md, starts a server that live-reloads on any file change.
Use -p for a different port:
pager -p 3000pager buildBuilds index.html and index.md without starting the server.