Deploying Hugo on Vercel

2024-06-27

So, About That HUGO Hype

Remember when I was all starry-eyed about Hugo in my hello world post? Well, folks, I’m back with a sequel, and like any good tech story, it’s got its fair share of plot twists. Don’t worry, though - our hero (that’s me, in case you’re wondering) emerges victorious. Eventually.

Hosting Hop

Let’s rewind a bit. I started my hosting journey with Netlify, which brings back some good memories. After a while, I moved on to Firebase, where we had a good run. However, my relationship with Firebase hit a rough patch due to my habit of creating too many “test-xxx” projects and not tidying up my digital workspace. Instead of sorting out my Firebase console like a responsible adult, I decided to clone my Git repo, remove Firebase, and look for other hosting options.

1git clone my-repo
2rm -rf firebase-stuff
3# Look ma, no Firebase!

Since I was already immersed in Next.js, Vercel, being its cool cousin, It just made sense, you know?

The Domain Drama

Just when I thought I had it all figured out, Google threw me a curveball. They decided to play hot potato with my domain, tossing it over to Squarespace. Because apparently, that’s what Google does kills its projects - check out Killed By Google for a digital graveyard tour.

Long story short, I ended up playing DNS musical chairs and landed on Cloudflare (Why? Coz its great). But that’s a story for another post.

Vercel Deployment: Expectation vs. Reality

Picture this: There I am, coffee in hand, ready to deploy my Hugo masterpiece to Vercel. I connect my GitHub repo, spot the Hugo option in Vercel, and hit deploy. And then… XML. Just XML. No witty blog posts, no sleek design. Just cold, unforgiving XML staring back at me.

Whats the Deal with XML?

First stop on the debug express? Vercel Build Logs. So. Many. Warnings. But hey, I cut my teeth on C programming. Warnings are just friendly suggestions, right?

Wrong. Oh, so wrong.

Turns out, I’d forgotten to add the .gitmodules file. No biggie, I thought. Added it, pushed, and…

1git add .gitmodules
2git commit -m "Added .gitmodules because I'm a responsible adult now"
3git push
4# *crosses fingers*

…still XML. But now with a shiny new warning: could not fetch one or more git submodules or something to that effect.

The Private Submodule Predicament

After some frantic Googling (because that’s what we do), I stumbled upon a GitHub issue that’s from 4 years ago.

Support for private git submodules #44 on Vercel

But fear not! There’s a workaround, courtesy of a GitHub hero. It involves some .gitmodules wizardry and script magic. I won’t bore you with the details, but let’s just say it involves adding your GitHub Token to places you probably shouldn’t. GitGuardian wasn’t thrilled about it, but hey, private repo, right?

1[submodule "<repo-name>"]
2path = <folder-name>
3url = https://<github-token>@github.com/<owner-name>/<repo-name>.git

Hugo Version Hijinks

Just when I thought I was in the clear, Hugo threw me another curveball. Vercel was using an older Hugo version 0.58 something, stubbornly looking for config.toml instead of hugo.toml.

The fix? A quick environment variable in Vercel:

1HUGO_VERSION = 0.128.0

Because nothing says “modern web development” like manually specifying version numbers, am I right?

The Final Frontier: Domain Shenanigans

Last hurdle: Vercel kept redirecting to blog.jeeveshkrishna.com, which I hadn’t set up yet. At this point, I just didn’t want dive into another rabbit hole figuring out why this was happening. So I did what any sane person would do - I just configured and connected my domain and called it a day.

There’s supposedly a way to dynamically inject the URL at deployment time, but I couldn’t be bothered. I mean, I’ve got a blog to write, right?