I Had Stories, But No Website

After spending days building the story pack generator and image generator, I had everything needed for Jekyll & Hyde:

  • 18 story nodes in JSON
  • 18 scene illustrations
  • MBTI personality tracking logic

But I couldn’t actually see it working. The JSON files and images were just sitting in folders.

I needed a website.

Why Astro?

I asked Claude what the best tool would be for building a static website. I explained what I needed:

  • Static site generation (no server needed)
  • Fast page loads
  • Support for Korean and English
  • Easy to deploy

Claude recommended Astro. The key reason is that Astro builds everything to static HTML at build time. No JavaScript needed for the content. Just pure HTML files.

This means:

  • Super fast loading
  • Works on any hosting (GitHub Pages, Netlify, Cloudflare)
  • Almost zero hosting costs

Perfect for a side project.

Setting Up the Project

First, I needed Node.js installed. Then I ran:

npm create astro@latest

I chose the “minimal” template. Then added the few things I actually needed:

  • Content Collections (for managing stories and blog posts)
  • i18n support (for Korean/English)

The directory structure Claude helped me set up:

website/
├── src/
│   ├── pages/           # Routes (index, library, stories)
│   ├── content/         # Story data, blog posts
│   ├── layouts/         # Page templates
│   └── components/      # Reusable UI parts
└── public/              # Static files (images, story data)

Getting It Running

After installing dependencies:

cd website
npm install
npm run dev

The terminal showed: Local: http://localhost:4321

I opened it in my browser. A blank page appeared. That was expected—I hadn’t added any content yet.

Adding the Jekyll & Hyde Story

I copied the generated story JSON and images into the website:

  • website/public/stories/jekyll-and-hyde/jekyll-and-hyde.json
  • website/public/stories/jekyll-and-hyde/opening.png
  • All the other scene images

Then I created the story page template at: src/pages/stories/[slug]/[nodeId].astro

This template would:

  1. Load the story JSON
  2. Show the current node’s text and image
  3. Display choice buttons
  4. Track MBTI scores

First Test

I navigated to: http://localhost:4321/stories/jekyll-and-hyde/opening

The page loaded. I saw the opening scene illustration. The text appeared. The choice buttons were there.

I clicked a choice. The next page loaded.

It worked.

Some Issues I Fixed

The image paths didn’t work at first. Astro serves files from /public/ but the URLs needed to start with /. I had to change all the image references in the JSON from:

"./jekyll-and-hyde/opening.png"

To:

"/stories/jekyll-and-hyde/opening.png"

Also, the MBTI calculator JavaScript wasn’t loading. I forgot to add the script tag in the page template. Once I added that, the personality tracking started working.

Next: Making It Look Good

The functionality worked, but the design was basic. Black text on white background. No styling. The split-screen layout (text on one side, image on the other) wasn’t implemented yet.

I needed to work on the CSS to make it look like an actual product.

To be continued…