An example of a single-file blog, made by Gregory Cadars.
Pocket web books
Another limited attempt1 at DIY web books: these self-contained2 HTML files should look alright on most devices with a modern browser, ready to be read, downloaded, or added to you home screen:
Alice’s Adventures in Wonderland - Lewis Carroll
- Portable HTML - Deluxe Edition (with images) 3.9 MB
- Portable HTML 179 KB
In Praise of Idleness - Bertrand Russell
- Portable HTML 94 KB
Swipe, click, or use ← → keys. f for full screen, i to invert colors.
-
I originally wanted to combine CSS columns with snap-scroll for pagination, only to realize that generated columns aren't real elements you can snap to, so turning pages is made possible in a basic way in javascript. (The offset for the current page is not calculated yet, so resizing the viewport takes you back to the first page) ↩
-
Fonts and images are inlined as Base64 strings. ↩
Portable HTML, an idea
Anchor #links are a good and proper mechanism for navigating a single document, and using :target
to show and hide content allows for a normal hyperlink behaviour within pseudo-pages, without reinventing any wheel. The desired outcome is a simple, resilient, portable document.
Obviously, this idea would be unfit for anything more complex than a simple blog, photo gallery, or personal website.
Basic setup:
Each “page” is a <section>
with a unique id
<section id="contact">
<p>Contact me!</p>
</section>
They are hidden by default, unless they get #linked to:
section { display:none; }
section:target { display:revert; }
This is a simplification: in order to inclusively hide the content, less obtrusive CSS properties are needed. This page uses height:0
and overflow:hidden
.
Pros
- Once the document has loaded, it’s The Fastest Website Ever Made™.
- Base URL can be
file:///
or anything or even nothing, links will always work. - “Save as PDF” naturally produces a linked table of contents.
- Browser history behaves normally.
- No Javascript.
Cons
- Figuring out how to keep the page accessible (and having visual tabbing, page search, working correctly) — suggestions welcome
loading="lazy"
for images is not widely supported yet.- CSS setup can get a little puzzling.
- Search engines see only one page, page title, etc.
- No Javascript.
Ideas
- Make http://info.cern.ch/hypertext/WWW/TheProject.html portable.
- Use Hugo or Jekyll or Eleventy or (…) to output a single HTML file.
To do (portable-php)
- Add Smartypants or JoliTypo for finer typography.
- Add an option to inline assets (images, fonts) as Base64 strings.
- Sidenotes / inline notes instead of #footnotes.
- Add RSS feed.
Style broken images when offline.Native lazy loading for images.Inline CSS styles and favicon.
PHP and “Save As…”
simply npm your webpack via grunt with vue babel or bower to react asdfjkl;lkd hgxdlciuhw
— Frank Chimero, Everything Easy is Hard Again
The barebones PHP script1 generating this website is offered as a no-fuss tool for anyone willing to publish a diary, a collection of recipes, some documentation… as a simple web document.
Because of its humble purpose, it uses simple means. PHP is ubiquitous and usually needs no configuration, while “Save As…” seemed like the most obvious way to export a single HTML file without using a terminal.
(This said, it should be trivial to instruct a more capable static site generator or CMS to produce a similar “portable HTML” website.)
-
Disclaimer: I do not know how to write PHP. This script is composed of ten years old php.net comments, Stack Overflow snippets, and long forgotten Gists. It kind of works (?) but it probably should not be hosted on a public web server. ↩
This blog is a single HTML file

It simply uses URL #fragments
and the :target
CSS selector to show and hide “pages”. The result is a self-contained website, digital book, interactive document, or whatever you want to call it. More information.
Get portable-php to generate the HTML from Markdown files.
Requirements:
- PHP
How to use:
- Write posts in
/content
- Open
http://example.com/portable.php
in your browser - Save as
index.html
Or from the command-line:
php portable.php > index.html