Tech-savvy time-saver: How You Can Host a Simple JavaScript Web App on Blogger

Tuesday, August 05, 2025

How You Can Host a Simple JavaScript Web App on Blogger

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.html into 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>