DEV Community

VoiceDeveloper
VoiceDeveloper

Posted on

How to Host an AI Podcast Platform on Bluehost

#beginners #tutorial #ai #webdev

Why a Voice‑AI Podcast Platform?

If you’ve been following the rise of AI‑generated voices, you’ll notice that the podcast space is the next logical frontier. Imagine a platform that lets creators write a script, pick a voice, and instantly publish a polished episode without ever touching a microphone. That’s the promise of a voice‑AI podcast stack built on top of modern cloud services and APIs like ElevenLabs.

In this guide I’ll walk you through a practical, developer‑friendly workflow:

  1. Write a script or pull content from a CMS
  2. Convert the text to speech with ElevenLabs
  3. Store the audio, metadata, and playback URLs
  4. Deploy the web app and API on Bluehost for a cost‑effective, hassle‑free hosting solution

Let’s dive in.

1. The Tech Stack

Layer Technology Why it matters
Backend Python + FastAPI Fast, async, great for I/O‑bound tasks like API calls
Audio Generation ElevenLabs TTS API State‑of‑the‑art voice cloning, realistic prosody
Storage AWS S3 or Bluehost’s file system Durable storage for MP3 files
Web Frontend React or vanilla JS Simple UI for script entry, playback
Hosting Bluehost Affordable, easy to set up, includes free domain & SSL

2. Getting Started with ElevenLabs

First, sign up for an ElevenLabs account. I’m using the affiliate link below, which gives you a generous free tier and a discount on paid plans.

Get ElevenLabs

Once you have your API key, you can start generating voices. Here’s a quick Python snippet that pulls a voice from ElevenLabs and streams the MP3 directly to your app.

import requests
import json

API_KEY = "YOUR_ELEVENLABS_API_KEY"
VOICE_ID = "21m00Tcm4TlvDq8ikWAM"  # Example voice ID

headers = {
    "xi-api-key": API_KEY,
    "Content-Type": "application/json",
}

payload = {
    "text": "Hello, this is your AI podcast episode. Enjoy!",
    "voice_settings": {"stability": 0.5, "similarity_boost": 0.5},
}

response = requests.post(
    f"https://api.elevenlabs.io/v1/text-to-speech/{VOICE_ID}",
    headers=headers,
    data=json.dumps(payload),
    stream=True,
)

if response.status_code == 200:
    with open("episode.mp3", "wb") as f:
        for chunk in response.iter_content(chunk_size=8192):
            if chunk:
                f.write(chunk)
    print("Audio saved as episode.mp3")
else:
    print("Error:", response.text)
Enter fullscreen mode Exit fullscreen mode

Tip: Keep the VOICE_ID handy. ElevenLabs offers a library of voices; you can also upload your own recordings for custom cloning.

3. Building a Simple FastAPI Backend

Below is a minimal FastAPI app that exposes two endpoints:

  1. /generate – accepts a JSON body with text and optional voice settings.
  2. /episodes/{id} – serves the generated MP3 file. 
# app/main.py
import os
import uuid
import json
import requests
from fastapi import FastAPI, HTTPException, UploadFile, File
from fastapi.responses import FileResponse

app = FastAPI()

ELEVENLABS_API_KEY = os.getenv("ELEVENLABS_API_KEY")
VOICE_ID = os.getenv("ELEVENLABS_VOICE_ID", "21m00Tcm4TlvDq8ikWAM")

@app.post("/generate")
async def generate_episode(body: dict):
    text = body.get("text")
    if not text:
        raise HTTPException(status_code=400, detail="Missing 'text' field")

    headers = {
        "xi-api-key": ELEVENLABS_API_KEY,
        "Content-Type": "application/json",
    }
    payload = {
        "text": text,
        "voice_settings": body.get("voice_settings", {"stability": 0.5, "similarity_boost": 0.5}),
    }

    resp = requests.post(
        f"https://api.elevenlabs.io/v1/text-to-speech/{VOICE_ID}",
        headers=headers,
        data=json.dumps(payload),
        stream=True,
    )

    if resp.status_code != 200:
        raise HTTPException(status_code=502, detail=resp.text)

    episode_id = str(uuid.uuid4())
    file_path = f"episodes/{episode_id}.mp3"
    os.makedirs("episodes", exist_ok=True)
    with open(file_path, "wb") as f:
        for chunk in resp.iter_content(chunk_size=8192):
            if chunk:
                f.write(chunk)

    return {"episode_id": episode_id, "url": f"/episodes/{episode_id}"}

@app.get("/episodes/{episode_id}")
async def serve_episode(episode_id: str):
    file_path = f"episodes/{episode_id}.mp3"
    if not os.path.exists(file_path):
        raise HTTPException(status_code=404, detail="Episode not found")
    return FileResponse(file_path, media_type="audio/mpeg")
Enter fullscreen mode Exit fullscreen mode

Deployment Note: Don’t forget to set ELEVENLABS_API_KEY as an environment variable on your host.

4. Frontend: A Tiny React App 

// src/App.js
import React, { useState } from "react";

function App() {
  const [text, setText] = useState("");
  const [episodeUrl, setEpisodeUrl] = useState("");

  const generate = async () => {
    const res = await fetch("/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text }),
    });
    const data = await res.json();
    if (data.url) setEpisodeUrl(data.url);
  };

  return (
    <div style={{ padding: "2rem" }}>
      <h2>AI Podcast Generator</h2>
      <textarea
        rows="6"
        cols="60"
        placeholder="Write your episode script here..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <br />
      <button onClick={generate}>Generate Episode</button>
      {episodeUrl && (
        <div style={{ marginTop: "1rem" }}>
          <h3>Listen:</h3>
          <audio controls src={episodeUrl} />
        </div>
      )}
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Bundle the React app with Vite or Create‑React‑App and place the build folder next to your FastAPI code. The FastAPI server can serve the static files with StaticFiles.

5. Deploying on Bluehost

Bluehost is a solid, budget‑friendly option for hosting small to medium web apps. Here’s why it’s a great fit for a voice‑AI podcast platform:

  • Easy Setup: One‑click WordPress installs, but you can also use the cPanel to set up a Python environment.
  • Free SSL & Domain: Secure your audio streams without extra cost.
  • Affordable Plans: Start with a shared hosting plan and scale as traffic grows.

Sign up for Bluehost

5.1. Setting Up the Environment

  1. Create a new cPanel account and log in.
  2. Go to “Python App” and click “Create Application.”
  3. Choose a Python 3.10+ version and set the app root to /public_html.
  4. Upload your project files via FTP or the File Manager.
  5. In the “Environment” tab, add the ELEVENLABS_API_KEY as a secret variable.

  6. Install dependencies:

    pip install fastapi uvicorn python-multipart requests

  7. Start the app with uvicorn app.main:app --host 0.0.0.0 --port 8000.

  8. Point a custom domain (free with Bluehost) to your app’s URL.

Tip: Use the “Cron Jobs” feature to run a background task that cleans up old episode files and keeps your storage budget in check.

5.2. Scaling & Cost

Bluehost’s shared hosting plans start around $2.95/month. As your audience grows, you might need a VPS or dedicated server. Bluehost offers quick upgrades, and the migration process is straightforward—no downtime if you plan it right.

6. Testing the End‑to‑End Flow

  1. Visit your Bluehost domain (e.g., https://mypodcast.com).
  2. Paste a script into the textarea.
  3. Click “Generate Episode.”
  4. The audio should stream instantly.

You can also test the API directly with curl:

curl -X POST https://mypodcast.com/generate \
     -H "Content-Type: application/json" \
     -d '{"text":"Testing AI podcast generation."}'
Enter fullscreen mode Exit fullscreen mode

You should receive a JSON response with an episode_id and a url. Hit that URL in your browser or with curl to confirm the MP3 is served correctly.

7. Wrap‑Up

Building a voice‑AI podcast platform isn’t as daunting as it sounds. With ElevenLabs handling the heavy lifting of realistic speech synthesis and Bluehost offering a straightforward, affordable hosting environment, you can focus on creating great content rather than wrestling with infrastructure.

Next Steps

  1. Add a CMS (e.g., Strapi or Directus) to manage episode scripts.
  2. Implement authentication so only authorized users can generate episodes.
  3. Add analytics to track listener engagement.

Call to Action

Ready to bring your podcast to life with AI‑generated voices? Try ElevenLabs for cutting‑edge text‑to‑speech and Bluehost for a hassle‑free, budget‑friendly hosting solution.

Get ElevenLabs | Host on Bluehost

Happy coding—and happy podcasting!

Top comments (0)