Skip to content

wiki‐tools‐002

Jump to bottom
OGAWA Keiji edited this page Sep 4, 2026 · 1 revision

Change a Published Live Demo

Motivation

The okoze application itself is main.js, written in JavaScript. index.html and style.css are containers used to publish the live demo.

The main.js of a published episode is, in principle, not modified after publication because it represents the completed result of that episode.

On the other hand, index.html and style.css may need to be modified after publication, for example to improve the presentation or usability of the live demo.

This time, I will create a mechanism for modifying the HTML and CSS of a published live demo.

The published tag itself is not modified. Instead, the modified version gets a new tag, so the original episode remains preserved in Git history.

What to Build

🟧 HTML and CSS modification
🔴 The HTML and CSS can be modified based on the contents of the `episode-NNN` tag.
🔴 The contents of `live demo/okoze/episode-NNN/` are updated.
🔴 The URL of `live demo/okoze/episode-NNN/` does not change.
🔴 The live demo index does not change.
🔴 The contents of other live demo episodes do not change.

How to Use It

Create a branch from the tag of the episode to be modified, and modify the HTML and CSS.

  • Checkout the tag of the episode to be modified.
  • Create a branch named fix/episode-NNN-fix1.
  • Modify the HTML and CSS.
  • Commit and push the changes.
  • Create the tag episode-NNN-fix1.
    • The character following fix is the revision number. Use 1–9, A–Z, and a–z in that order.
  • Push the tag.
    • GitHub Actions runs and updates the live demo.
  • Delete the branch fix/episode-NNN-fix1.

For example, to modify episode-003:

git switch --detach episode-003
git switch -c fix/episode-003-fix1

vi index.html

git add index.html
git commit -m "Fix episode-003 live demo"
git push -u origin fix/episode-003-fix1

git tag -a episode-003-fix1 -m "episode-003-fix1"
git push origin episode-003-fix1

# The live demo is updated.

git switch main
git branch -D fix/episode-003-fix1
git push origin --delete fix/episode-003-fix1

Implementation

Modify the GitHub Actions workflow.

  • Process all episode-* tags in alphabetical order.
  • Checkout each tag.
  • Extract the episode number from the tag name.
  • Deploy it to episode-NNN/.
  • If another tag with the same episode number is processed later, delete the previous contents and recreate the directory.

For example:

episode-003
episode-003-fix1
episode-003-fix2

are processed in this order.

When episode-003-fix1 is processed, episode-003/ is recreated with the contents of episode-003-fix1.

When episode-003-fix2 is processed, it is recreated again with the contents of episode-003-fix2.

Therefore, the live demo URL remains:

/okoze/episode-003/

but the latest fix is ultimately displayed at that URL.

Links

Source code

Clone this wiki locally