From Zero to Hero: My Journey Building a Website on Hugo
Before diving into the Hugo adventure, let me set the scene. Previously, meshvoid.com ran on ArtStation’s Pro website feature. Seemed like a quick solution, right? Well, not exactly. While it looked decent enough, I quickly hit a wall with customization – just not enough fine-grained control for someone who likes to tinker. Plus, let’s be honest, the price for that ‘Pro’ badge felt a bit ambitious for the features offered. So, decision made: time to take back the reins. Step one involved firing up my trusty digital grappling hook, HTTrack, to scrape all the content off the old ArtStation-powered site. Felt a bit like a data rescue mission! Only after successfully pulling everything down could I start rebuilding it here, piece by piece, on Hugo.
Roughly 3 years ago, I started studying programming more seriously on my own by writing a custom rigging add-on for Blender. When I first decided to build my own personal portfolio website, I thought, “How hard can it be?” – figuring it would be a walk in the park given my prior experience programming in Python and wrangling different CMS-based websites (mostly Joomla and WordPress nightmares).
Despite my initial overconfidence, the process of writing a website from scratch using the Hugo framework proved to be quite the undertaking, which I’m attempting to chronicle in this post.
The Decision: Why Build It Yourself?
So, why choose the ‘hard mode’ of building the site from scratch instead of using one of those fancy drag-and-drop builders, slapping a theme on WordPress, or even adapting one of the many prebuilt Hugo themes? Simple: I wanted to learn. And boy, did I learn! Along the way, I got significantly more familiar with technologies like:
Hugo
This static site generator is widely considered one of the fastest out there. Its core is written in Go, optimized for speed, flexibility, and giving you precise control (sometimes too much control, haha). You’ve probably heard of it; if not, here’s a popular video from the Firebase YouTube channel explaining Hugo in 100 seconds.
CSS
Ah, CSS. The secret sauce behind making things look halfway decent without completely losing your mind. Having basically zero prior experience, I had to brute-force my way through learning it. I tackled various courses on CSS and responsive design – thankfully, there are tons of great educational resources these days. I personally leaned heavily on the free courses from w3schools.
In my opinion, w3schools is one of the best places to start learning front-end development. You don’t even have to finish all the lessons to start tinkering with your site’s style. In fact, I learned mostly by just jumping in and writing the styles.css file for this site directly, breaking things, and figuring out how to fix them. Plenty of templates online can also help structure and style your projects.
JavaScript
To sprinkle some interactivity onto the site – things like the mobile hamburger menu, an animated gallery, page loading animations, and other dynamic bits – I had to write some JavaScript. Nothing wildly complex, just simple scripts stored in the static/js folders of my Hugo project. A great thing about Hugo is how it handles the infrastructure and organization for you. Just read the official docs, practice often, and eventually, you start to get into the flow. Once you grasp Hugo’s logic, you gain an insane amount of control, turning a simple static site into something much more capable.
Responsive Design
It was fascinating to approach Responsive Web Design principles from a developer’s perspective, rather than purely as an artist. I used to see design layouts as just static image elements working together. But once you understand CSS fundamentals like Flexbox and Grid layouts, many design implementation issues become almost trivial. So much is standardized now; there’s less need for excessive images, icons are mostly SVGs these days, and everything boils down to tweaking CSS.
By the end, I went from “What the heck is a media query?” to passionately explaining why flex-wrap: wrap is the unsung hero of responsive layouts.
Lessons Learned: Wisdom Gained the Hard Way
Here are a few programming nuggets of wisdom I painfully extracted while reviving meshvoid.com:
-
Start Simple (Seriously): Focus on the basic structure first. Write a proper README for your project repo, outlining your tech stack and leaving reminders for your future, forgetful self.
- Don’t try to cram in every cool feature you see elsewhere right away. Get the core functionality working solidly first. Add fancy stuff later.
- Don’t get bogged down by a massive to-do list. You’ll get faster at tackling tasks as you gain experience. Progress, not perfection (at first).
- Always make personal notes or documentation when learning something new. Store it somewhere accessible (like a separate GitHub repo). Never rely solely on memory or just re-reading official docs months later.
-
Embrace the Debugger: It’s rarely fun, often frustrating, but absolutely essential. Browser console logs are your therapists.
- Don’t give up when things break (they will). Debug, rewrite, rethink. Sometimes solving a problem leads to a much better solution and deeper understanding than your original plan.
-
Test Early, Test Often, Test Everywhere: Check your site on different browsers and devices (phone, tablet) early in the development process, not just at the end. Trust me, it prevents major headaches and frantic last-minute fixes.
-
Take Breaks (Mandatory!): Coding marathons sound cool until you realize you’ve spent two hours staring blankly at the same semicolon. Get up, stretch, do some push-ups, grab some tea (I still hate coffee). Staring won’t solve it, perspective will.
Final Thoughts: Was It Worth It?
Absolutely. Were there moments I dramatically questioned my life choices while wrestling with CSS? Definitely. But building this site taught me an immense amount about web development and, frankly, about my own persistence. I can now confidently say I’ve earned my “Beginner Front-End Developer Who Sometimes Knows What He’s Doing” badge.
If you’re considering a similar journey, I say go for it! Just make sure to stock up on tea, patience, maybe a stress ball, boxing bag and definitely a willingness to frequently ask search engines very specific questions. You’ll need all of the above. Good luck!
Share this page on social media:
