Inlining and downloading a web page for offline consumption
A guide showing how to download a web page as a single HTML file with all CSS, JS, and images embedded into it.
Recently, a colleague wanted to keep a copy of a web page on her local machine. A lot of tools she had found to do so were creating a hierarchy of files/directories when she just wanted a single file. Luckily, there are a few great cross-platform tools to do just that! The one I recommended to her was Remy Sharp's "Inliner" tool.
Inliner is a Node.js utility that turns a web page into a single HTML file with everything inlined (including CSS, JS, and images). This means that you'll be left with a single file on your local machine that contains all the important bits of the web page you want to keep!
Inliner is relatively easy to use, but people who aren't developers might not be familiar with some of the jargon, or the various parts of the toolchain. This blog post will provide a quick guide on how to get it installed and running.
First, install Node.js by visiting https://nodejs.org/en/download/ and downloading and running the installer for your platform of choice (Windows/Mac). (If you're a Linux user, you can use your distro's package manager of choice - I'm going to assume you don't need further instruction!)
Next, open a console window (Command Prompt or Powershell on Windows, Console on Mac, Terminal on Linux).
Then, enter the following command to install Inliner:
npm install -g inliner
Good work! Inliner should now be installed.
Using inliner to download a web page:
First, open a console window (Command Prompt or Powershell on Windows, Console on Mac, Terminal on Linux).
Next, run Inliner with a command similar to the following:
inliner https://url-of-the-web-page.com > path-to-save-it-to.html
(Note, you don't want to enter this command verbatim - you need to modify the URL and the path so that you download the website you want, to the location that you want. I've put some examples below.)
Example - Downloading Matt's profile page to your 'Documents' folder on Windows:
inliner https://mking.net/about > %HomeDrive%%HomePath%\Documents\about-matt.html
Example - Downloading Matt's profile page to your 'Documents' folder on Mac:
inliner https://mking.net/about > ~/Documents/about-matt.html