How to Host a Simple Client JavaScript Web App on Blogger
Have you ever built a small interactive web app using HTML, CSS, and JavaScript and wished you could host it for free on your blog? Blogger, Google's blogging platform, can serve as a surprisingly capable host for small self-contained client-side JavaScript applications. This guide walks you through a method that uses Base64 encoding and iframes to embed your app directly into a blog post.
Why Use Blogger to Host Web Apps?
- Free hosting with no setup
- No external dependencies or servers needed
- Instantly shareable via blog posts
- Great for education, demos, and tools
Step 1: Prepare Your HTML App
Write your app as a single HTML file that includes:
- <style> for CSS
- <script> for interactivity
- No external dependencies or imports
Step 2: Convert HTML to Base64
Use the following Python script to:
- Encode
app.htmlinto base64 - Insert it into a template iframe HTML (
template.html) - Output the final base64 string for blog embedding
import base64
import sys
if len(sys.argv) != 3:
print("Usage: python3 embed_app.py app.html template.html")
sys.exit(1)
with open(sys.argv[1], 'rb') as f:
app_b64 = base64.b64encode(f.read()).decode('utf-8')
with open(sys.argv[2], 'r', encoding='utf-8') as f:
template = f.read()
iframe_html = template.replace("<INSERT_BASE64_HERE>", app_b64)
iframe_b64 = base64.b64encode(iframe_html.encode('utf-8')).decode('utf-8')
print(iframe_b64)Step 3: Create the Iframe Template
Save the following HTML as template.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App Wrapper</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #222;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<iframe src="data:text/html;base64,<INSERT_BASE64_HERE>" title="App"></iframe>
</body>
</html>Step 4: Embed in Your Blogger Post
Once you’ve run the Python script, you’ll get a long base64 string (the final result). Use it in your blog post with the following code:
<button id="launchApp">Launch App</button>
<script>
(function() {
function decodeBase64(b64) {
const bin = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
return new TextDecoder().decode(bin);
}
const b64 = `PASTE_FINAL_BASE64_STRING_HERE`;
document.getElementById('launchApp').addEventListener('click', function() {
const html = decodeBase64(b64);
const win = window.open('', '_blank', 'width=1000,height=700');
win.document.open();
win.document.write(html);
win.document.close();
});
})();
</script>