💻 root@personalwebsite:~$ cat launch-walkthrough.md

🚀 How We Created This Website From Nothing 🌍🔐

This is the step-by-step build log for launching my personal website: from creating the GitHub repo 🐙, to building the Astro site ⚡, to configuring Cloudflare Pages ☁️, fixing deployment issues 🧯, and publishing a public hacker-themed site 🌌.

Final live result:

https://personalwebsite-cx5.pages.dev/

🧠 Architecture we chose

🐙 GitHub Repository
        ↓
⚡ Astro Static Website
        ↓
☁️ Cloudflare Pages
        ↓
🌍 Public global website

📋 Step-by-step launch process

1️⃣ Plan the stackChose a static-first architecture: GitHub for source control, Astro for the site, and Cloudflare Pages for global hosting.

2️⃣ Create the GitHub repoCreated the PersonalWebsite repository to store the site code, documentation, and future blog posts.

3️⃣ Add Astro project filesAdded package.json, astro.config.mjs, and src/pages/index.astro so Cloudflare had a real static site to build.

4️⃣ Configure Cloudflare PagesCreated a real Pages project, connected it to GitHub, selected Astro, used npm run build, and set the output directory to dist.

5️⃣ Fix deployment mistakesCorrected build command copy/paste issues, avoided Workers/Wrangler deploy flows, and used the normal Pages static publishing pipeline.

6️⃣ Publish the first versionCloudflare built the Astro site, generated dist/index.html, uploaded assets, and published the public Pages URL.

7️⃣ Upgrade the designReplaced the minimal homepage with a hacker-style neon terminal theme, matrix background, security cards, and maker sections.

8️⃣ Add content systemsAdded a blog index, shared post metadata, an AI agents cheatsheet page, and a 3D printing section for the Bambu P2S print lab.

🔨 Commands and settings used

Install dependenciesnpm install

Run local dev servernpm run dev

Build production sitenpm run build

Preview production buildnpm run preview

Cloudflare build commandnpm run build

Cloudflare output directorydist

Cloudflare root directory/

☁️ Final Cloudflare Pages settings

Framework preset: Astro
Build command: npm run build
Build output directory: dist
Root directory: /

🧯 Problems we had to fix

❌ Wrong Cloudflare flow

We initially ended up in a Workers-style deployment flow. That introduced Wrangler deploy commands and API token confusion. The fix was to create a real Pages project through Pages → Connect to Git.

❌ Bad build command

The build command field accidentally contained the full instruction block instead of only npm run build. Cloudflare tried to execute text like “Framework preset: Astro” as a shell command. The fix was to make the build command exactly npm run build.

❌ Missing app files

The repo initially did not have enough Astro files to build a website. We added package.json, astro.config.mjs, and src/pages/index.astro.

🎨 What we added after launch

After the first successful deploy, we upgraded the site into a cyberpunk hacker-style platform with a neon terminal UI 💻, matrix background 🌧️, security branding 🔐, a 3D printing section for the Bambu P2S 🧵, and an AI Agents command cheatsheet 🤖.

🔐 Lessons learned

Keep the first deployment simple 🧼. Static-first sites are easier to debug, easier to secure, and perfect for a personal technical platform. Once deployment works, then layer on design, blog routing, maker sections, and AI workflow documentation.

📚 Back to blog