It Works Locally, But…

Day 9 ended with the website working perfectly on my laptop. I could browse stories, make choices, see the personality results. Everything looked good on my phone when connected to my local dev server.

But only I could see it. It was still just running on my computer.

I needed to deploy it to the actual domain: whatifclassics.com

Creating the GitHub Repository

First, I needed version control. I created a new GitHub repository:

cd whatif-classics
git init
git add .
git commit -m "Initial commit: Astro website with Jekyll & Hyde story"

I created a new repository on GitHub called whatif-classics and pushed the code:

git remote add origin https://github.com/[username]/whatif-classics.git
git push -u origin main

The code was now on GitHub. Anyone could see it (it’s a public repo for the “building in public” philosophy).

Choosing Vercel for Deployment

I had a few options for hosting:

  • GitHub Pages (free but limited)
  • Netlify (good for static sites)
  • Vercel (optimized for modern frameworks)

I chose Vercel because:

  • Free tier is generous
  • Automatic deployments from GitHub
  • Built-in support for Astro
  • Easy custom domain setup

I signed up for Vercel using my GitHub account.

Connecting the Repository

In Vercel dashboard, I clicked “New Project” and selected the whatif-classics repository.

Vercel automatically detected it was an Astro project. The build settings were pre-filled:

  • Build Command: npm run build
  • Output Directory: dist
  • Install Command: npm install

I didn’t need to change anything. Just clicked “Deploy.”

First Deployment Attempt

Vercel started building the project. I watched the build logs scroll by:

Installing dependencies...
Building Astro site...

Then it failed.

The error message: Error: Failed to load story data

The issue was file paths again. On my local machine, the story JSON files were in public/stories/. But Vercel’s build process expected them in a different location.

I had to adjust how the story data was loaded in the Astro pages. Changed from relative paths to absolute paths that work both locally and in production.

// Before (only worked locally)
const storyData = await fetch('./jekyll-and-hyde.json')

// After (works everywhere)
const storyData = await fetch('/stories/jekyll-and-hyde/jekyll-and-hyde.json')

Pushed the fix to GitHub. Vercel automatically detected the push and started a new build.

Second Deployment: Success

This time the build completed successfully.

Vercel gave me a temporary URL: whatif-classics.vercel.app

I opened it. The homepage loaded. I clicked on Jekyll & Hyde. The story started. I made some choices. Reached the ending.

It worked. The website was live on the internet.

Connecting the Custom Domain

But I didn’t want people to go to vercel.app. I had already bought whatifclassics.com on Day 5.

In Vercel’s project settings, I added the custom domain:

Vercel gave me DNS records to add in Cloudflare (where I bought the domain):

A record: @ → 76.76.21.21
CNAME: www → cname.vercel-dns.com

I added these records in Cloudflare’s DNS management.

First Real Test

I opened my phone, disconnected from WiFi, used mobile data, and typed: whatifclassics.com

The site loaded. Fast. The images appeared. I tapped through the Jekyll & Hyde story on my phone using mobile data.

Everything worked.

This was the first time someone other than me could access What If Classics. Anyone with the URL could now play the interactive story.

The Moment It Felt Real

Up until now, everything was theoretical. JSON files, Python scripts, local development servers.

But seeing whatifclassics.com load on my phone, over the internet, on a real domain—that’s when it clicked.

This is a real website now. Not a prototype. Not a dev environment. An actual product that exists on the internet.

What’s Next

The website works, but there’s still a lot to do:

  • The design is still basic (no styling yet)
  • Only one story pack (Jekyll & Hyde)
  • No Korean version deployed yet
  • No social sharing features

But the infrastructure is there. GitHub for code. Vercel for hosting. Custom domain connected. Every push to GitHub automatically deploys.

Now I can focus on making it look good and adding more stories.

To be continued…