# Free podcast website template

> Free HTML podcast website template for podcast networks and audio studios: shows, authors, live dates. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Podcast website template: one free HTML file for a podcast network or audio collective, with a paid shelf, a featured episode, a sideways row of eight shows, an author grid, a free studio, live dates and voice notes. White ground with orange, yellow and lavender tiles. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/gabble/
- Live demo: https://8b.com/templates/gabble/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/gabble/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/podcast-website-template
- Download ZIP: https://8b.com/templates/gabble/podcast-website-template.zip
- Template name in the repository: Gabble
- At a glance: One 110 KB index.html with its CSS and JavaScript inside, 12 sections, 24 Unsplash photos credited in CREDITS.md, Funnel Display and Google Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/podcast-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/podcast-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/podcast-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/podcast-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my podcast network or studio: name, shows and hosts, author count, paid tier and price, featured episode, studio address and hours, live dates and venues, how people submit a pilot, contact details>. Replace first the name, shows, authors and Plus series. Keep the section ids, the classes AGENTS.md lists and three submission steps, and set the footer wordmark's len to the new name's character count. Ask me for missing facts and never invent prices, payouts, dates or contacts.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/podcast-website-template my-site`.

## About

A podcaster website often has to sell more than episodes. This one is built for a network: shows with hosts, a paid shelf, a free studio for authors and a run of live nights. If you are looking at examples of podcast websites, note the structure: it is a front page for a catalogue, not an episode archive with a feed. A radio station, audio magazine or creator community with a paid tier and event dates can reuse it.

Vibe coding a podcast template with Claude Code, Cursor or Codex goes fastest when you hand the agent the facts only the network has: author count, Plus price, show names and hosts, studio address and hours, live dates and venues, how pilots are submitted. The demo invents all of them, including the guest and the transcript. Faces carry named alt texts, so swap names and photos together.

As a podcast site template, pick it for a network, collective or studio that wants a bright, friendly front door with a paid shelf and live nights. A single show needs far fewer sections, and a [membership community](https://8b.com/templates/softlife/) with its own sign-in suits a different template. The weak spot is audio: there is no player, only a decorative waveform, so you link or embed your own. If you would rather not touch code, 8B also has an AI website builder.

## Design

- Palette: #ffffff (page ground, listener chat bubbles, live date rows, two studio fact tiles, FAQ rows, text on the ink sections), #1e1c22 (text, the shows, live and footer grounds, dark buttons, favicon letter), #ff6b1f (the opening field, main buttons, show replies in the chat, the author count circle, the submission marker, the footer loop), #f9e38c (studio ground, yellow show and contact tiles, live date blocks, the first step's fill), #cdbbf8 (letters ground, player card, lavender tiles, light text on the ink sections), #f1f0f3 (FAQ ground, grey pills such as search and Log in, the FAQ icon discs and the menu button), #646069 (secondary text, captions, search placeholder), #a98af2 (submission loop line, step ring borders and phone rail, the voice note waveform marks), #b8860a (only in leftover rules for a first screen that is no longer in the page, nothing visible uses it), #6a45d6 (show names on the author cards)
- Fonts: Funnel Display (section headings, the logo and footer wordmark, the large menu links, transcript quotes and step titles, at regular weight except the medium logo and wordmark), Google Sans (body text, buttons, badges, labels and the card and show titles, at regular and medium weight)

Big rounded tiles carry the page. The opening is a full-height orange field with a drawn white loop, the heading and three paid series rows. A sticky player card runs beside a six-line transcript, the shows are tall photo tiles in one row, and authors are round faces in a wrapped grid. A looped line with three numbered discs links the submission steps. The footer wordmark fills the width.

Section grounds change as you scroll: orange, white, ink, yellow, lavender and grey, with large rounded corners where they meet. Colour copies trail behind moving tiles on the shows row, the studio facts, the live dates and the contact bands, and the author faces fan out from one stack.

## Sections and motion

- **Navigation** (navigation): sticky top bar: wordmark, search field, author count with three faces, Log in, Join, a menu button; hides on scroll down; menu overlay with search and ten links. Motion: The bar slides away after a short downward scroll and returns on scroll up, and this keeps running with reduced motion.
- **Curious how things get made?** (opening): the first screen: a full orange field with the headline, a paragraph about the paid Plus shelf, a button and three Plus series rows. Motion: On load a white loop draws itself while the heading block and the three series rows fade and slide in from the right, one after another.
- **This week: the bridge that sings** (episode): a featured episode: sticky player card beside a six-line transcript whose words light up as you scroll. Motion: Scrubbed to scroll: transcript words go from faint to full ink while the orange waveform fills left to right, and the heading rises line by line.
- **Shows for every odd curiosity** (shows): eight show tiles in a row that scrolls sideways while the section is pinned, with colour trails behind the tiles. Motion: Pinned: the row of eight tiles travels sideways, each tile dragging three colour copies in proportion to scroll speed that fold back when scrolling stops.
- **1,200 authors, one rule: be curious out loud** (authors): grid of six author cards with round photos plus a count card, "+1,194 authors and a chair for you". Motion: The six faces and the count circle start as one fanned stack and slide to their places as the grid scrolls in, then names and bios fade up.
- **A booth with a red floor, free for our authors** (studio): a free recording studio for authors: heading, text, button, two photos and four fact tiles. Motion: The heading rises, and the four fact tiles slide in from the left trailed by two colour copies each.
- **Add your podcast in three steps** (submit): three numbered steps along a looped line; an orange chevron disc rides the line as you scroll. Motion: An orange chevron disc rides the looped line, or a vertical rail on phones, and each numbered disc fills with colour as it arrives.
- **Gabble Live: shows with an audience that laughs back** (live): four live show dates in a list beside a photo of an audience. Motion: The heading rises and each of the four date rows slides in from the left trailed by colour copies.
- **Ask a show anything** (letters): a pinned chat of three voice notes from listeners and three replies from shows. Motion: Pinned for about 1.3 screens of scroll: the first of the six chat messages is already in place and the other five pop in from their own sides while the thread slides up.
- **Questions people ask before they press play** (faq): five questions as native details rows. Motion: Question rows slide in from the left with colour copies, and the plus icon turns into a cross as a row opens.
- **Say hello** (contact): three colour bands: Write (email), Call (phone), Visit (address). Motion: Scrubbed to scroll: the three bands slide in from alternating sides, and each value follows a beat later.
- **Footer** (footer): footer: seven links, two social links, a drawn loop with a large wordmark, copyright with the Design: 8B credit and a privacy link. Motion: The loop line at the top right of the wordmark draws itself once its top reaches 88% of the screen height.

## Good for

- podcast network or show collective
- recording studio or audio production house
- radio station, audio magazine or newsletter with live events
- any membership or creator community with a paid tier, a member grid and event dates

## Questions

**Is this a free podcast website template I can use for a client's network?** Yes. It is one index.html under the MIT license, so you can use it for your own or a client's podcast site at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, and CREDITS.md lists the Unsplash photos and the Google Fonts.

**Does it have an audio player or an RSS feed?** No. The waveform and the timestamps are decoration, and Listen to episode 41 only jumps to the shows section. Link that button to your episode page or embed your host's player, and make the apps answer in the questions describe your real feed. The page neither reads nor builds a feed.

**How do I give it to Claude Code, Cursor or Codex?** Download index.html and AGENTS.md with the curl lines at the start of AGENTS.md, put them in an empty folder and tell the agent to read AGENTS.md before editing index.html. Give it the files, not the page address, because a link comes back as a summary. Then paste the prompt from this page, filled in.

**What breaks if I change the wrong thing?** Keep the section ids, the data-8b-section and data-8b-motion attributes and the classes AGENTS.md lists for each script, plus three submission steps. Set the footer wordmark's --len to the new name's length. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

**What do I have to connect before launch?** The search fields send people to /search, which does not exist, so build that page or delete the fields. The pilot button opens a mailto link, and the tickets, Plus, voice note, Log in and listen buttons point to placeholder paths or anchors. There is no contact form. Without JavaScript the menu overlay cannot open.

**Can I get a site like this without editing code?** Yes. [8B's AI website builder](https://8b.com/) designs a new site from a one-sentence description, in its own design rather than this template. Designing and restyling are free; hosting with SSL, full HTML export and AI edits in chat come with Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.

## Before publishing

Replace: social preview image, favicon, contact form (sends nothing yet), email address, phone number, map and social media links, plus the invented demo facts (prices, dates, addresses).

- Search shows fields in the top bar and the menu overlay lead to a GET form to /search with the query in q now; point them to your own search page, or remove the fields if the site has no search.
- Log in links in the top bar and the menu overlay lead to /login now; point them to your listener or author sign-in page, or remove them.
- Join buttons in the top bar and the menu overlay lead to #submit now; point them to your sign-up page, or keep #submit to send people to the submission steps.
- Try Plus free for a month button in the opening lead to #faq now; point them to your paid membership sign-up page.
- Listen to episode 41 button in the episode section lead to #shows now; point them to the page or player of the featured episode.
- Browse all shows button in the shows section lead to /shows now; point them to your full show list.
- Book a session button in the studio section lead to #contact now; point them to your studio booking page, or keep #contact once the contact details are real.
- Send a pilot button in the submit section lead to mailto:pitch@gabble.example now; point them to your submission form or the inbox that takes pilots.
- Tickets links on the four live dates lead to /live/lisbon-november, /live/porto-november, /live/madrid-december, /live/lisbon-december now; point them to the ticket page of each event.
- Send a voice note button in the letters section lead to /voice-note now; point them to your voice note form or the app page that takes recordings.
- Visit band in the contact section lead to a Google Maps search for Lisbon now; point them to a map link to your real address.
- Privacy link in the footer lead to /privacy now; point them to your privacy policy.
- The page has no audio player: the waveform and the timestamps are decoration, and "Listen to episode 41" only jumps to the shows section until you link it to a real player or episode page.
- The shows row and the letters chat are pinned scenes; on short screens the pinned stage can be taller than the viewport, so test the shows row on a laptop height. The episode player stays stuck at the top on phones while the transcript scrolls under it.
- Several texts sit on the loud orange field and the lavender tiles in dark ink; if you change those colours keep the contrast of dark text on them.
- The stylesheet still carries about ninety lines of unused rules for a first screen that is no longer in the page (selectors starting #opening .op-first, .op-card, .op-new, .op-media and similar); they do nothing and can be deleted.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).