How to Merge Multiple Files into a Single HTML File

Q: Why do my images or styles not show up on the published page?

Single-file HTML hosting only uploads one .html file. If your page references relative paths like images/logo.png, style.css or app.js, those files were not uploaded, so the browser cannot find them and the page may look broken.

Q: How do I merge HTML, CSS, JS and images into one file?

Put index.html, style.css, script.js and your images into one folder, then ask an AI tool (such as Claude Code or ChatGPT) to create a self-contained HTML: inline the CSS and JS into / and embed images as Base64 data URIs.

Q: How do I actually use an AI tool to merge them?

Give the AI tool access to the folder (or zip it and attach it), then prompt: merge index.html, style.css, script.js and the images directory into a single self-contained HTML file with inline CSS/JS and Base64 images. Download the generated .html and upload it to SharingHTML.

Q: What should I check after merging?

Open the merged .html in your browser and confirm images, styles and interactions work. Open developer tools (F12) and check Console and Network for 404s. Then upload and preview the live link once more.

When you upload HTML to SharingHTML, you upload a single file. If your page references separate images, CSS or JS via relative paths (for example images/logo.png, style.css, app.js), those files are not uploaded with it — so the browser cannot load them and the page may look incomplete or behave incorrectly.

The fix is simple: merge everything into one self-contained HTML file so the images, styles and scripts are embedded in a single .html document, then upload it once.

What a multi-file page looks like

A typical multi-file project:

website/
├── index.html
├── style.css
├── script.js
└── images/
    ├── logo.png
    └── hero.jpg

If you only upload index.html, the browser will try to load:

images/logo.png
style.css
script.js

Those files are not online, so the page loses images, styles and interactivity.

Method 1: Use an AI tool (recommended)

Put your HTML, CSS, JS and images in one folder, then ask an AI tool to generate a self-contained HTML file.

English/international users can use:

Claude Code
ChatGPT

Chinese users can use:

Doubao
DeepSeek
Zhipu
Kimi (kimi3)
WorkBuddy
Qwen

Example prompt (English)

Merge index.html, style.css, script.js and the images/ directory into a single self-contained HTML file:

inline all CSS into a <style> tag;

inline all JavaScript into a <script> tag;

embed images as Base64 data URIs;

keep the original look and behavior.

Output only one complete .html file.

示例提示词（中文）

把文件夹里的 index.html、style.css、script.js 和 images 目录合并成一个单一自包含的 HTML 文件。要求：

CSS 全部内联到 <style> 标签；

JavaScript 全部内联到 <script> 标签；

图片转成 Base64 Data URL 嵌入；

保持原有页面效果不变。

最后只输出一个完整的 .html 文件。

If the AI tool can read local folders, point it at the folder directly; otherwise zip the folder and attach it. Once generated, download the result as an .html file.

Method 2: Merge manually

If you prefer to do it by hand:

Inline CSS: copy style.css into a <style> tag in the <head>.
Inline JS: copy script.js into a <script> tag at the end of the page.
Embed images: convert images to Base64 data URIs, e.g.
```
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAA...">
```
On the command line you can use:
```
base64 -i logo.png
```
Then prepend data:image/png;base64, to the output.

Check after merging

Always verify the merged file locally before uploading:

Open the merged .html in a browser.
Confirm images, styles and interactions work.
Press F12 to open developer tools and check Console and Network for 404s.
Once it looks good, upload it to SharingHTML.
After uploading, click "Preview" to confirm the live page once more.

FAQ

Why do my images or styles not show up on the published page?

Single-file HTML hosting only uploads one .html file. Relative references like images/logo.png, style.css and app.js are separate files that were not uploaded, so the browser cannot find them and the page may look broken.

How do I merge HTML, CSS, JS and images into one file?

Put index.html, style.css, script.js and your images in one folder, then ask an AI tool (such as Claude Code or ChatGPT) to create a self-contained HTML — inline CSS/JS and embed images as Base64 data URIs.

How do I actually use an AI tool to merge them?

Give the AI tool access to the folder (or attach a zip), then use the example prompt above. Download the generated .html and upload it.

What should I check after merging?

Open the merged .html in your browser, confirm images/styles/interactions work, check developer tools for 404s, then upload and preview the live link once more.

Conclusion

If your uploaded page is missing images, styles or interactivity, the cause is usually local resources that were not uploaded with the single HTML file.

Merging the HTML and all its resources into one self-contained HTML file is the simplest and most reliable way to use single-file hosting. Merge once, upload once, and the link just works.