If you have a custom domain and want a professional website without ongoing hosting costs, consider building a static website delivered through a Content Delivery Network (CDN). This approach offers excellent performance, high availability, and simple maintenance. My website uses this architecture, with the domain registration as my only recurring cost.

Prerequisites

Before getting started, you’ll need:

  • A domain name
  • A Git account (GitHub, GitLab, or similar)
  • Basic command line familiarity
  • About 1-2 hours for initial setup

Domain Registration

Your choice of domain registrar can significantly impact your annual costs. For supported top-level domains (TLDs), Cloudflare’s Domain Registration service (https://www.cloudflare.com/products/registrar/) stands out by charging only wholesale prices without markup or hidden fees.

For TLDs not available through Cloudflare, I recommend Porkbun for their competitive pricing and user-friendly interface. Both registrars offer automatic DNS configuration and straightforward domain management.

Static Website Generation

Static site generators create fast, secure websites by converting plain text files into optimized HTML. While options like Jekyll and Gatsby are popular, I chose Hugo for its speed, simplicity, and robust theme ecosystem. Hugo, written in Go, generates sites incredibly quickly and requires minimal resources.

A basic Hugo site consists of three main components:

  • A configuration file (config.toml or config.yaml)
  • A theme directory containing your chosen theme
  • A content directory holding your markdown files and images

To get started with Hugo:

  1. Install Hugo using your system’s package manager
  2. Create a new site using hugo new site mywebsite
  3. Add your chosen theme as a Git submodule
  4. Create content using markdown files
  5. Test locally using hugo server

Deployment Setup

Cloudflare Pages provides free hosting with automatic builds, SSL certificates, and CDN distribution. Here’s how to set it up:

  1. Create a private Git repository for your site
  2. Push your Hugo site code to this repository
  3. Log into your Cloudflare dashboard
  4. Navigate to Workers & Pages → Pages
  5. Click “Create a project” → “Connect to Git”
  6. Select your repository and configure the following build settings:
Build command: hugo
Build output directory: public
Environment variables:
  HUGO_VERSION: 0.120.0  # Use your Hugo version

Custom Domain Configuration

  • In your Cloudflare Pages project settings, go to “Custom domains”
  • Add your domain and follow the DNS configuration instructions
  • Cloudflare will automatically provision an SSL certificate

Maintaining Your Site

With everything configured, maintaining your site becomes remarkably simple:

  • Make changes to your content locally
  • Test using hugo server
  • Commit and push to your main branch
  • Cloudflare Pages automatically builds and deploys your updates

The entire process from push to deployment typically takes less than a minute. Cloudflare Pages also maintains preview deployments for pull requests, allowing you to verify changes before merging.

Performance and Analytics

Your static site will benefit from:

  • Global CDN distribution
  • Automatic asset optimization
  • Built-in DDoS protection
  • Free SSL/TLS encryption

Cloudflare provides basic analytics through their dashboard, including:

  • Visitor statistics
  • Performance metrics
  • Cache hit rates
  • Error monitoring

Troubleshooting Common Issues

If your site isn’t building correctly:

  • Verify your Hugo version matches the environment variable
  • Check the build logs in Cloudflare Pages
  • Ensure all theme submodules are properly initialized
  • Validate your Hugo configuration file syntax

Alternative Platforms

While this guide focuses on Cloudflare Pages, similar setups are possible with:

GitHub Pages (free, tight GitHub integration), Netlify (generous free tier, excellent UI), Vercel (great for JavaScript frameworks)

Each platform offers unique features, but Cloudflare Pages stands out for its combination of simplicity, performance, and integration with other Cloudflare services.