โ† ๐Ÿ  Return Home

โ˜๏ธโšก Full Cloudflare Pages Deployment Walkthrough ๐Ÿš€

This article documents the complete real-world process used to launch this website publicly for free using GitHub ๐Ÿ™, Astro โšก, and Cloudflare Pages โ˜๏ธ โ€” including mistakes ๐Ÿงฏ, troubleshooting ๐Ÿ”, deployment failures ๐Ÿ’ฅ, and the exact settings that were ultimately required.

๐ŸŒ FINAL RESULT

Live production site:

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

๐ŸŽฏ Goal

The objective was to create a fully free personal technical website with:

๐Ÿง  Why Astro + Cloudflare Pages?

Astro was selected because it produces static HTML output by default, which dramatically reduces attack surface ๐Ÿ” compared to dynamic CMS platforms.

Cloudflare Pages was selected because:

๐Ÿ™ Step 1 โ€” Create GitHub Repository

Human actions required ๐Ÿ‘ค
  • Log into GitHub
  • Create a new repository
  • Name selected: PersonalWebsite
  • Repository owner: ryanthemanr0x
  • Visibility selected: Public ๐ŸŒ
  • Initialize README: Yes

Final repository:

https://github.com/ryanthemanr0x/PersonalWebsite

โšก Step 2 โ€” Build Astro Website Structure

The repository initially did not contain enough files for Cloudflare Pages to recognize it as a deployable Astro project.

The following files had to be created:

Critical package scripts:

{
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

โ˜๏ธ Step 3 โ€” Create Cloudflare Pages Project

Human actions required ๐Ÿ‘ค
  • Log into Cloudflare dashboard
  • Navigate to: Workers & Pages โ†’ Pages
  • Select: Connect to Git
  • Authorize GitHub integration
  • Select repository: PersonalWebsite

This was extremely important because an earlier deployment attempt accidentally used a Wrangler/Workers flow instead of a true Pages deployment flow.

โš ๏ธ Major Mistake #1 โ€” Wrong Cloudflare Deployment Type

One of the largest troubleshooting problems occurred because the deployment initially ended up configured similarly to a Worker deployment instead of a true Pages deployment.

This caused:

Error example:

Authentication error [code: 10000]

The fix was:

๐Ÿงฏ Major Mistake #2 โ€” Incorrect Build Command

Another major issue happened because the Cloudflare build command field accidentally contained descriptive text instead of only the command itself.

Incorrect value entered:

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

Cloudflare attempted to execute these literal lines as shell commands, producing errors like:

/bin/sh: 1: Framework: not found

Correct fix:

Build command:
npm run build

โ˜๏ธ Final Working Cloudflare Pages Settings

These were the final settings required for a successful deployment:

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

Important detail โš ๏ธ:

The Build Output Directory specifically had to be set to:

dist

NOT:

/

๐Ÿ”จ Local Development Commands

Commands used during development:

npm install
npm run dev
npm run build
npm run preview

Git commands used:

git status
git add .
git commit -m "Update website"
git push origin main

๐Ÿš€ Step 4 โ€” First Successful Deployment

Once the Pages project was configured correctly:

Cloudflare deployment logs finally showed:

โœจ Success! Uploaded files
โœจ Upload complete!
Success: Your site was deployed!

๐ŸŒŒ Step 5 โ€” Hacker Theme Upgrade

After deployment stability was confirmed, the minimal starter site was replaced with a cyberpunk/hacker aesthetic featuring:

๐Ÿ” Security Advantages of This Architecture

This deployment architecture intentionally minimizes risk:

๐Ÿ’ธ Free Tier Components Used

๐Ÿ“š Lessons Learned

๐Ÿš€ Final Result

The final outcome was a globally deployed ๐ŸŒ hacker-themed โšก low-cost ๐Ÿ’ธ security-focused ๐Ÿ” technical website powered by:

๐Ÿ™ GitHub
โšก Astro
โ˜๏ธ Cloudflare Pages
๐Ÿค– AI-assisted workflows
๐Ÿง Linux tooling
๐Ÿงต Maker + 3D printing content