The need
I've always wanted to create a simple portfolio website to showcase my work as a mobile developer, but despite my experience in mobile development, I haven't had much exposure to web development stacks.
You can follow the steps outlined below for a completely cost-free setup. The only expense I incurred to add a more professional touch was a custom domain, which cost just $10 for two years. But that is totally up to you.
My approaches
1. Hugo + GitHub Pages
Initially, I decided to create a portfolio website with a blog by using Hugo. I opted to select a template from their collection and customize it to fit my needs. It works wonders, let me tell you, for a simple static website, you won’t need anything more.
For hosting, you don't even need to spend a dime. You can simply use GitHub Pages and be done with it.
But ... I wanted some flexibility
2. Next.js + Vercel
While Hugo is great for quick static websites, Next.js has some advantages if you need more flexibility. Next.js supports server-side rendering and dynamic content, which means your site can be more interactive and responsive.
In my case, I wanted the flexibility to modify the UI exactly how I envisioned it, rather than being limited to a pre-designed theme. Tailwindcss was my best friend here.
While overriding Hugo themes can be straightforward at times, it can also be challenging to achieve the exact look and functionality you're aiming for.
When it comes to hosting, I can't praise Vercel enough. It was incredibly easy to integrate my custom domain, although you can also use the domain they provide.
The standout feature is their seamless integration and automated deployment. Whenever I push an update to the main branch—whether it's a new blog post or a UI fix—Vercel automatically generates and deploys the changes for me.
It's fantastic!
All in all
In my personal experience, I found value in using both tools. They were particularly educational for me as a mobile developer and enabled me to deploy quickly.
However, the second iteration of my website with Next.js really showed me where I could make improvements and refinements, resulting in a much sleeker and polished look.