Why one file?
A single file is the easiest thing to paste into a converter, email to a developer, or keep as an archive. Nothing can go missing, and relative paths stop being a problem.
1. Inline the CSS
Replace <link rel="stylesheet" href="style.css"> with the stylesheet's contents:
<style>
body { font-family: system-ui, sans-serif; }
/* …the rest of style.css… */
</style>2. Inline the JavaScript
<script> // contents of app.js </script>
Place it just before </body> so the page's elements exist when it runs, or add defer logic with DOMContentLoaded.
3. Images: link or embed
- Link to images hosted elsewhere with a full URL — keeps the file small.
- Embed small images (icons, logos under ~20 KB) as data URIs:
<img src="data:image/png;base64,iVBOR…">. Base64 adds about 33 %, so do not embed photos. - SVG can be pasted straight into the HTML as an
<svg>element.
4. Fonts
Use a Google Fonts <link> (it is an external URL, so it works anywhere) or a system font stack.
Let an AI do it
Ask your assistant: “Merge index.html, style.css and script.js into one self-contained HTML file.” Then paste the result into AI HTML to link.
Size check
Free links take up to 2 MB. If your single file is bigger than that, it is almost always embedded images — switch them to links, or upload a ZIP instead.