Short answer
A single-file HTML page keeps its CSS in a <style> tag, its JavaScript in a <script> tag, and small images as Base64 data: URIs, so nothing depends on other files. Merge your files with the HTML, CSS & JS combiner, embed images with image to Base64, and paste the result into HTMLtoLink.
The skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
<style>
body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }
</style>
</head>
<body>
<img src="data:image/svg+xml,..." alt="Logo">
<h1>Hello</h1>
<script>
document.querySelector('h1').addEventListener('click', () => alert('Hi'));
</script>
</body>
</html>Step by step
- CSS: paste the contents of each stylesheet into one
<style>block in the head, in the same order the<link>tags were. - JavaScript: paste each script into a
<script>block at the end of the body, libraries first. - Images: convert logos and icons to data URIs. Keep each under ~100 KB.
- Fonts: use a Google Fonts
<link>(it needs internet) or a system font stack — embedding font files bloats the page. - Libraries: load from a CDN over
https://. The page then needs a connection, which is fine for a hosted link.
HTML, CSS & JS Combiner
Merge separate HTML, CSS and JavaScript into one self-contained file Open the free tool
Merge separate HTML, CSS and JavaScript into one self-contained file Open the free tool
One gotcha: </script> inside JavaScript
If your JavaScript contains the text </script> (for example in a string), the browser ends the script block there. Write it as <\/script>. The combiner does this for you.
When a single file is the wrong choice
- Many or large photos — Base64 adds a third and blocks rendering. Upload a ZIP instead.
- A multi-page site — each page would duplicate all the CSS.
- Video or audio — keep them as files.
Rule of thumb: if the finished file is over 2–3 MB, a folder upload will feel faster to everyone who opens it.