Podcaster

Hosting a podcast and creating its website with Eleventy.

Getting started

This tutorial will guide you through the process of creating a podcast site with Eleventy and Podcaster.

The tutorial doesn’t cover all of Podcaster’s features, but it will show the basics and familiarise you with the structure of an Eleventy podcast project.

This tutorial doesn’t include deploying your site or submitting your podcast to Apple Podcasts, Spotify, or other podcast directories.

1. Create your Eleventy site and install Podcaster

npm install --save-dev eleventy-plugin-podcaster

eleventy.config.js

import Podcaster from 'eleventy-plugin-podcaster'

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(Podcaster)
}

2. Create a podcast.json file for your podcast’s metadata

podcast.json

{
  "title": "Untitled Star Trek Project",
  "siteUrl": "https://untitledstartrekproject.com",
  "description": "A random Star Trek commentary podcast. With Joe and Nathan.",
  "language": "en-GB",
  "category": "TV & Film",
  "author": "Joe and Nathan"
}

3. Specify an image for your podcast

eleventy.config.js

import Podcaster from 'eleventy-plugin-podcaster'

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(Podcaster)
+ eleventyConfig.addPassthroughCopy('img')
}

4. Create an episode-files directory for your episodes’ audio files

5. Create an episode-posts directory for your episodes’ templates

yesterdays-enterprise.md

---
title: Yesterday’s Enterprise
date: 2021-11-04
episode:
  episodeNumber: 1
  filename: "USTP 1, Yesterday's Enterprise.mp3"
  size: 58747007 # in bytes
  duration: 3601.293 # in seconds
---
After the _Enterprise-C_ emerges from a mysteriously swirly space anomaly, Joe and
Nathan find themselves in an alternate timeline where _Star Trek: The Next
Generation_ is dramatically and impractically lit, full of incident, and sceptical
about the 1990s belief in the End of History. _Star Trek: Discovery_ Series 1
arrives nearly 30 years too early, in _Yesterday’s Enterprise_.

Once you’ve completed this step, you have supplied Podcaster with enough information to generate your podcast’s RSS feed. Build your site by running npx @11ty/eleventy in your project directory, and your podcast feed will be created at /_site/feed/podcast.xml.

6. Create an episode page for each episode

base.liquid

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ page.title }}</title>
</head>
<body>
  {{ content }}
</body>
</html>

episode-post.liquid

---
layout: layouts/base.liquid
---
<article>
  <h1>{{ title }}</h1>
  <p class="episode-number">Episode {{ episode.episodeNumber }}</p>
  <p class="publication-date">{{ date | date: "%A %e %B %Y" }}</p>
  {{ content }}
  <audio controls src="{{ episode.url }}" preload="none">
</article>

episode-posts.json

{
  "layout": "layouts/episode-post.liquid"
}

7. Create an index page as the home page

index.liquid

---
title: Untitled Star Trek Project
layout: layouts/base.liquid
permalink: "/"
---
<h1>{{ title }}</h1>
{% for post in collections.episodePost reversed %}
<article>
  <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
  <p class="episode-number">Episode {{ post.data.episode.episodeNumber }}</p>
  <p class="publication-date">{{ post.date | date: "%A %e %B %Y" }}</p>
  {{ post.content }}
  <audio controls src="{{ post.data.episode.url }}" preload="none">
</article>
{% endfor %}

Once you’ve completed this step, you have supplied Podcaster with enough information to generate your podcast’s website. Run npx @11ty/eleventy --serve in your project directory and check out your new site.

Conclusion

If you’ve followed these steps, you have created a podcast website using Podcaster.

Here are the ideas introduced in this tutorial:

You will find more detailed coverage of these topics in the rest of the Podcaster documentation.