How I Built and Deployed My Portfolio Site From Scratch (With Failures, Fixes, and a Domain)

I recently launched my personal portfolio at econdev.studio, and while it’s live now, the road was anything but smooth. Between white screens, GitHub config issues, deployment quirks, and a few facepalms along the way — I learned a lot.

This post isn’t a perfect tutorial — it’s a real story, with real fixes. If you’re trying to build and deploy your own portfolio, maybe this saves you a few headaches.

🔧 Stack & Goals
Built with: React + Vite

Hosted on: GitHub Pages

Deployed via: gh-pages package

Domain: Custom .studio domain (econdev.studio)

Goals: One-page, fast-loading portfolio with sections for About, Projects, Contact

🧱 Building the Site
Started with a basic App.jsx structure

Created reusable components:

Used dark mode with a toggle

Kept layout simple but professional with proper spacing, typography, and scroll sections

🚧 First Big Challenge: GitHub Pages + Vite
I pushed my files and... the site was just white.
No errors in the terminal. No crashes. Just nothing.

Turns out:

I had the wrong base path set in vite.config.js

GitHub Pages serves from /repo-name/, unless you're using a custom domain

Once I set base: '/' and added a CNAME file → 💡 it worked

📁 Deploying with gh-pages

npm install --save-dev gh-pages

Then I added this to package.json:

"homepage": "https://bobaSloba.github.io/portfolio-site",
"scripts": {
"deploy": "gh-pages -d dist"
}


🤦 Funny Mistakes I Made
Added twice → double sections at the bottom

Broke JSON with an extra comma → EJSONPARSE errors from npm

Pushed changes and forgot to rebuild → “why is the site still old??”

Thought I needed a CSR for SSL — spoiler: you don’t with GitHub Pages

✅ Final Result
📍 Live: https://econdev.studio
💻 Code: GitHub repo

🚀 What’s Next?
Scroll reveal animations (Framer Motion or AOS)

Responsive polish

Mini game Easter egg 😏

Favicon and tab branding

Maybe a blog or writing section?

❤️ Lessons
Don’t fear the terminal — copy/paste is a weapon

Deploying to GitHub Pages with Vite takes a few extra steps, but it’s worth it

Failures are just checkpoints

If you ever see a white screen — check your vite.config.js

📣 Let’s Connect
If you’re working on your own portfolio and got stuck — feel free to drop a comment or DM. I’ll reply.
You can find me on GitHub: @bobaSloba