The source code for each episode is stored in the Git repository and marked with a Git tag.

For example:

episode-003

I would like readers to be able not only to read the source code, but also to actually run the application corresponding to each episode.

GitHub Pages provides a simple way to do this.

The goal of this experiment is to publish the web application corresponding to the episode-003 tag.

🟧 Publish code tagged with "episode-*" as live demos on GitHub Pages
🔴 Adding an "episode-*" tag publishes the corresponding code under "live-demo/episode-*"
🔴 The published files are taken from the commit referenced by the tag
🔴 Removing an "episode-*" tag removes the corresponding live demo
🔴 An index page listing the published episodes is generated under "live-demo"

I'll have AI implement this.

I am not familiar with GitHub Actions at all.

I will describe what I want and ask AI to implement it. I will then test what AI produces and ask it to fix any problems I find.

I repeated this process until the GitHub Actions workflow worked.

See github/workflows/deploy-pages.yml for the workflow.

I am not yet familiar enough with GitHub Actions to explain the code myself.

The workflow rebuilds the entire GitHub Pages site whenever an episode-* tag is added or removed.

When a tag is removed, it does not directly delete the corresponding directory. Instead, it rebuilds the site using all remaining episode-* tags, so the deleted episode naturally disappears.

For each tag, only index.html, main.js, and style.css are extracted from the commit referenced by the tag. The workflow also generates an index page listing all published episodes.

🔴 Display the feature implemented in each episode and the list of tests that became Green