How to convert an HTML file with content folder to a self-contained HTML file?

Question

How do I convert an HTML file with content folder to a self-contained HTML file which can be viewed from anywhere with its images etc.

How can it be done so that it's also editable and stays self-contained, post-edit?

I basically need to make HTML file based documentation which can be viewed from anywhere. Unfortunately it HAS to be HTML, otherwise I would have made PDFs

Answer 1

You can use pandoc, it has an option to create self-contained html files https://pandoc.org/MANUAL.html#option--self-contained.

If you start with html, this is the command.

pandoc in.html --self-contained -o out.html

This tool can do a lot more things, for example, you can also generate html from markdown files or generate pdfs instead.

Answer 2

The most direct way is to convert all asset urls to data: urls. (There are online coverters available that will take a provided asset and produce a data: url from it.)

A possibly simpler way is to convert image and font urls to data: urls while instead inlining scripts and css.

---

Edit: Possibly of interest: inliner, a Node utility for doing this kind of thing. "Turns your web page to a single HTML file with everything inlined". Also performs a number of minifying optimizations.

Answer 3

I don't know exactly what you're envisioning, but HTML was never meant to be fully self-contained. There may be some loopholes that allow it in the end, but to my knowledge there are no premade tools that do this 'conversion'. It would require the following things:

• Converting all linked style sheets and scripts to inline style sheets and scripts. This means that whenever there's a <script src="http://url.to/foo.js"></script> you'll have to download foo.js and include it as such: <script type="text/javascript"> [this is the content of foo.js] </script>. Something similar applies to CSS and other linked source files.
• Downloading all linked media (images mostly, I presume) and converting them to blobs (a service that provides you with a base64 blob you can use within a HTML file is https://www.base64-image.de/). This means replacing <img src="http://url.to/image.jpg" /> with <img src="data:image/png;base64,[converted image data goes here] />. So there's gonna be some manual labour involved there, but it probably can be done (almost) fully.

Possibly there's a way to accomplish what you're wanting to do another way though, what exactly is your reason for wanting this?

Answer 4

Here's another option: write your documentation in markup, then use a tool such as "Marked 2" (http://marked2app.com) to convert to self-contained html. Works slick. Plus you can go back and edit the markup any time you need to update your documentation, then simply re-export your html file.