Free podcast website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: gabble.md, data: gabble.json

Podcast website template: first screen on a phone

About this podcast website template

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.

At a glance, October 2026. 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.

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

Good for:

Podcast network or show collectiveRecording studio or audio production houseRadio station, audio magazine or newsletter with live eventsAny membership or creator community with a paid tier, a member grid and event dates

Turn the podcast website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

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

Prompt for the agent:

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.

In a terminal

npx degit 8bsite/podcast-website-template my-site

Podcast website design and motion

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.

Every value of this podcast website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the podcast website page

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
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?
The first screen: a full orange field with the headline, a paragraph about the paid Plus shelf, a button and three Plus series rows
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
A featured episode: sticky player card beside a six-line transcript whose words light up as you scroll
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
Eight show tiles in a row that scrolls sideways while the section is pinned, with colour trails behind the tiles
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
Grid of six author cards with round photos plus a count card, "+1,194 authors and a chair for you"
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
A free recording studio for authors: heading, text, button, two photos and four fact tiles
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
Three numbered steps along a looped line; an orange chevron disc rides the line as you scroll
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
Four live show dates in a list beside a photo of an audience
The heading rises and each of the four date rows slides in from the left trailed by colour copies.
Ask a show anything
A pinned chat of three voice notes from listeners and three replies from shows
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
Five questions as native details rows
Question rows slide in from the left with colour copies, and the plus icon turns into a cross as a row opens.
Say hello
Three colour bands: Write (email), Call (phone), Visit (address)
Scrubbed to scroll: the three bands slide in from alternating sides, and each value follows a beat later.
Footer
Footer: seven links, two social links, a drawn loop with a large wordmark, copyright with the Design: 8B credit and a privacy link
The loop line at the top right of the wordmark draws itself once its top reaches 88% of the screen height.

Before you publish the podcast website site

Replace social preview image, favicon, contact form (sends nothing yet), email address, phone number, map and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this podcast website template

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

Not a podcast website? More free templates