Exploring Github, Vercel, and GitHub Pages: Building My Blog/Portfolio with a Starter Template
So, here’s the deal. I wanted to create a portfolio—a sleek, professional site that screams, “Hire me, I know what I’m doing!” But instead of paying for some over-the-top website builder or banging my head against confusing tutorials, I stumbled into the world of GitHub, Vercel, and GitHub Pages. Turns out, they’re like the holy trinity of “Hey, I made this.”
This is the story of how I fumbled my way into using these tools, played around with a starter template, and somehow ended up with a functional blog/portfolio. Spoiler alert: If I can do it, so can you.
GitHub: The Organized Chaos of Version Control
Let’s start with GitHub, the backbone of this whole operation. GitHub is essentially a place where developers store their code, collaborate, and occasionally argue about why their commits say things like “fixed stuff.” I created an account, feeling like I was entering a secret club. After navigating the interface (read: clicking random buttons until things happened), I learned a few essentials: 1. Repositories: • A repo (as the cool kids call it) is where your project lives. Think of it as a digital junk drawer, but for code. 2. Forking: • I forked a starter template I found on GitHub. Forking is just a fancy way of saying, “I’m stealing this, but legally.” 3. Cloning: • Once I had the template in my account, I cloned it to my local machine:
git clone https://github.com/username/template-repo.git
Translation: I downloaded the repo so I could poke around in its guts.
4. Breaking Things:
• I spent an unreasonable amount of time breaking things and then panicking as I learned how to use git to undo my mistakes.
Vercel: The Deployment Wizard
If GitHub is the slightly chaotic friend who saves everything, Vercel is the responsible one who makes sure things actually work. Vercel is a platform that takes your code and magically turns it into a live website. It’s like the baking show contestant who actually knows what “proofing” means.
Here’s how I used Vercel to bring my blog/portfolio to life: 1. Connect the Repo: • I signed up for Vercel and linked my GitHub account. With a few clicks, I had my project connected, and Vercel was ready to deploy it. 2. Automatic Deployments: • Vercel is smart. Every time I pushed changes to my repo, it automatically updated my live site. It’s like having a personal assistant who handles all the boring stuff for you. 3. Custom Domains: • I even added a custom domain because nothing screams “professional” like yourname.com instead of some random subdomain. 4. Preview Deployments: • Want to test a feature without breaking your live site? Vercel’s preview deployments make it easy to experiment without sending visitors into a digital black hole.
GitHub Pages: The Minimalist Option
Now, while Vercel was off doing its thing, I couldn’t resist playing with GitHub Pages. It’s GitHub’s built-in hosting service, perfect for static sites. Think of it as the simple-but-reliable option. No frills, no extras—just a quick way to get your portfolio online.
Here’s how it went: 1. Enable Pages: • I went into my repo settings, scrolled down to the Pages section, and selected the branch I wanted to publish. 2. Live in Minutes: • Within a few clicks, my site was live at https://.github.io/. 3. Limitations: • While great for static content, GitHub Pages doesn’t handle dynamic apps (like those React bells and whistles). Still, it’s free and gets the job done.
The Starter Template Adventure
Ah, the starter template—the unsung hero of lazy developers everywhere. I found mine by Googling “portfolio starter template GitHub,” and it was love at first clone. Here’s what I learned: • Customization: • Templates save time, but unless you want your site to look like everyone else’s, you’ll need to dig in and change things. I swapped out placeholder text and added my own projects, skills, and a snarky bio. • Trial and Error: • I spent a lot of time making mistakes, undoing them, and pretending I totally knew what I was doing all along.
Lessons Learned 1. GitHub is Your Best Frenemy: • It’s powerful but unforgiving. One typo in a git command, and you’ll be Googling “how to fix detached HEAD state” like your life depends on it. 2. Vercel is the MVP: • It’s idiot-proof (thankfully) and makes deploying projects ridiculously easy. 3. Starter Templates Are Life-Savers: • Sure, I could have built my portfolio from scratch, but why reinvent the wheel when there’s a perfectly good template waiting to be forked?
Final Thoughts
So, here’s where I landed: I now have a blog/portfolio that’s live, functional, and even kind of pretty. It showcases my work, my skills, and most importantly, my ability to fumble my way through tools like GitHub, Vercel, and GitHub Pages.
If you’re thinking about creating your own portfolio, take it from me: Start small, embrace the chaos, and don’t be afraid to Google your way out of problems. Because if I can do it, you can too.
Let me know what you’re building—or if you’ve also accidentally broken a repo or two. I promise, no judgment.