Embedding Dependencies into a HTML File

toolspeaking / 1 min read

I use HTML to generate slide decks. Usually my HTML will reference a host of other files on my machine (CSS, JavaScript and images). If I want to distribute my deck then I have a couple of options:

  • just send the HTML file without all of the dependencies or
  • send the HTML file and dependencies (normally wrapped up in some sort of archive).

Both of these have problems. In the former case the HTML just ends up looking like ass because it relies on all of those dependencies to sort out the aesthetics. In the latter case I need to take care of the directory structure and, if those dependencies are distributed across my file system (which they generally are!) then this can be a challenge.

However, there’s a very handy tool called inliner which resolves these issues.

Installation is simple.

sudo npm install -g inliner

And creating a single HTML with all of those dependencies embedded is easy too.

inliner original-document.html >embedded-document.html

If an internet connection is going to be available then you can reduce the file size by not embedding dependencies which are referred to by absolute URLs.

inliner --skip-absolute-urls original-document.html >embedded-document.html

The tool works perfectly with local HTML files but can just as easily be applied to URLs.