HeckIT.dev logo

Building a Modern Website on a Minimal Budget

When I decided to build my personal site and relaunch my older lighting project site, I wanted both to feel modern, lightweight, and easy to maintain without paying for bloated website builders or monthly subscriptions.

I brainstormed ideas with ChatGPT about how to do this efficiently using today’s best free tools, and together we arrived at a direction I’m genuinely happy with.

For anyone comfortable editing a bit of code, there’s really no need for expensive builders. You can deploy a fast, professional site for around $12 a year (just the domain cost) using modern frameworks and services that handle the heavy lifting.

Below I’ll walk through the stack, what each piece does, and how to get started so you can stand up your own portfolio, project site, or small business page quickly and sustainably.

The Tool Stack

  • Next.js – A modern React framework with server components, routing, and image optimization built in.
  • Tailwind CSS – Included during setup. Provides clean, consistent styling without writing long stylesheets.
  • shadcn/ui – An accessible React component library built for Tailwind, perfect for a clean, modern interface.
  • Vercel – Free hosting with SSL, previews, and automatic GitHub deploys.
  • GitHub – Version control and source of truth for your code; every push to main can auto-deploy to Vercel.
  • Cloudflare – Fast DNS and free security features like HTTPS, caching, and CDN.
  • GoDaddy – Domain registrar I’ve used for years; easy to manage and works smoothly with Cloudflare DNS.
  • Umami – Privacy-friendly analytics for tracking visits without ads, cookies, or data selling.

Quick Start Guide

1. Set up your local environment

Install Node.js and Git. Run npx create-next-app@latest my-site and follow the prompts. When asked if you want to use Tailwind CSS, select Yes.

cd my-site
npm run dev

Visit http://localhost:3000 to see your new site running.

2. Add UI components

Install and configure shadcn/ui to quickly add well-designed components and layouts that match Tailwind’s style.

3. Push to GitHub

Create a new repository on GitHub. In your project folder, run:

git init
git remote add origin https://github.com/yourusername/yourrepo.git
git add .
git commit -m "Initial commit"
git push -u origin main

4. Deploy to Vercel

Log in to Vercel, import your GitHub repository, and click Deploy. In under a minute, your site will be live with a free SSL certificate and global CDN.

5. Connect your custom domain

Point your GoDaddy domain’s nameservers to Cloudflare. Add your domain in Cloudflare and create a CNAME record pointing to your Vercel URL. Enable “Always Use HTTPS” and caching in Cloudflare’s dashboard for better performance and security.

6. Add analytics (optional)

Set up a free Umami instance or use their cloud service. Embed the tracking script in your Next.js layout file to start collecting privacy-friendly metrics.

Why This Stack Works

This setup combines the speed and flexibility of a modern JavaScript framework with the simplicity of serverless deployment. There are no servers to maintain, no recurring hosting fees, and no closed ecosystem lock-in, just clean, versioned code you fully control.

Whether you’re building a personal portfolio, a small business site, or documenting your projects, this stack gives you a fast, professional, and sustainable web presence for the price of a domain name.

The possibilities are endless with this stack. You can build anything you want with these powerful tools.