Building a Developer Blog for $18/Year

Running a blog shouldn’t cost more than a domain. This post breaks down how I built blog.jfkeci.com with Hugo and GitHub Pages - a setup that’s fast, free to host, and requires zero admin dashboards.

The Architecture

The entire publishing pipeline looks like this:

graph LR
    MD[Markdown Files] --> Hugo[Hugo Build]
    Hugo --> GH[GitHub Pages]
    GH --> R53[Route53 DNS]
    R53 --> Reader[blog.jfkeci.com]

    style MD fill:#10b981,color:#fff
    style Hugo fill:#3b82f6,color:#fff
    style GH fill:#8b5cf6,color:#fff
    style R53 fill:#f59e0b,color:#fff
    style Reader fill:#ec4899,color:#fff

Write markdown, run a script, and it’s live. No databases, no CMS logins, no server maintenance.

Cost Breakdown

Item	Cost	Notes
Domain (Route53)	~$18/year	The only expense
GitHub Pages Hosting	$0	Free for public repos
SSL Certificate	$0	Provided by GitHub
Hugo Static Generator	$0	Open source
CDN	$0	GitHub’s global CDN
Total	~$18/year

Compare this to typical alternatives:

Platform	Annual Cost
This setup	$18
WordPress hosting	$100-300
Medium membership	$60
Ghost(Pro)	$108+
Substack Pro	10% of revenue

The Tech Stack

Hugo: The Static Generator

Hugo converts markdown files into static HTML. It’s written in Go, which means builds are fast - typically under 1 second for small sites.

project/
├── content/
│   └── blog/
│       ├── post-one.md
│       └── post-two.md
├── layouts/           # HTML templates
├── static/            # CSS, JS, images
├── data/              # YAML data files
└── config.toml        # Site configuration

Why Hugo over other static generators?

Feature	Hugo	Jekyll	Gatsby
Build speed	~50ms	~5s	~30s+
Dependencies	Single binary	Ruby gems	Node packages
Learning curve	Moderate	Low	High
Hot reload	Instant	Slow	Moderate

GitHub Pages: Free Hosting

GitHub Pages serves static files from a repository. The setup:

1. Build the site locally with hugo --minify
2. Push the /public directory to the gh-pages branch
3. GitHub serves it globally via their CDN

The deploy.sh script handles this:

#!/bin/bash
hugo --minify
cd public
git add .
git commit -m "Deploy: $(date)"
git push origin gh-pages --force

One command. Site is live in under a minute.

Route53: Custom Domain

AWS Route53 manages the DNS. The setup involves:

1. Register domain in Route53 (~$18/year for .com)
2. Add a CNAME record pointing to username.github.io
3. Configure the custom domain in GitHub repository settings
4. GitHub automatically provisions SSL

graph TB
    subgraph DNS["Route53 DNS"]
        CNAME[blog.jfkeci.com CNAME]
    end

    subgraph GitHub["GitHub Pages"]
        GH[username.github.io]
        SSL[Auto SSL]
    end

    CNAME --> GH
    GH --> SSL
    SSL --> Live[HTTPS Enabled]

The Workflow

No admin dashboard needed. The entire publishing flow:

graph TD
    Write[Write post in VS Code] --> Preview[hugo server]
    Preview --> Commit[git commit]
    Commit --> Deploy[./deploy.sh]
    Deploy --> Live[Live on blog.jfkeci.com]

    style Write fill:#10b981,color:#fff
    style Deploy fill:#3b82f6,color:#fff
    style Live fill:#8b5cf6,color:#fff

Creating a New Post

# Create new post file
touch content/blog/my-new-post.md

Add frontmatter:

---
title: "My New Post"
date: 2025-01-10
description: "A brief description for SEO and previews"
hero: "/assets/blog/my-post-hero.svg"
categories:
  - "Category"
tags:
  - "tag1"
  - "tag2"
---

Write content in markdown. Preview with hugo server. Deploy with ./deploy.sh.

Local Development

hugo server --bind=0.0.0.0 --port=3333

Hot reload is instant. Changes appear in the browser as you type.

Visuals Without a Design Budget

A blog needs visuals. Instead of stock photos or paid design tools, I use two approaches:

MermaidJS for Diagrams

Technical diagrams are written in markdown-like syntax and rendered client-side:

{{</* mermaid */>}}
graph LR
    A[Markdown] --> B[Hugo] --> C[GitHub Pages]
{{</* /mermaid */>}}

No image files to manage. Diagrams stay in sync with the content because they’re part of the content.

AI-Generated SVG Hero Images

Every post needs a hero image. Instead of stock photos or spending hours in Figma, I use Claude Code to generate custom SVGs.

The prompt is simple: describe the concept, and Claude generates an SVG that matches the site’s dark theme with gradient accents.

Benefit	Description
Consistent style	All images match the site aesthetic
Infinitely scalable	Vector graphics, no pixelation
Small file size	Typically 5-15KB
No licensing issues	Original creations
Fast iteration	Generate variations in seconds

The hero image for this post? Generated by Claude Code in under a minute.

Why This Setup Works

Performance

Static files served from a CDN are inherently fast. No database queries, no server-side rendering, no cold starts.

Security

No attack surface. Static files can’t be hacked the way dynamic applications can. No SQL injection, no XSS vulnerabilities in backend code, no admin panel to brute-force.

Maintenance

There is none. No updates to install, no plugins to patch, no PHP versions to upgrade. The site will keep working as long as GitHub exists.

Portability

Everything is markdown and git. If GitHub Pages disappears tomorrow, I can deploy the same files to Netlify, Vercel, Cloudflare Pages, or any static host in minutes.

Trade-offs

This setup isn’t for everyone:

Limitation	Workaround
No dynamic content	Use JavaScript + external APIs
No comments	Integrate Giscus or Disqus
No CMS UI	Write in any text editor
Technical setup	One-time investment
No scheduled posts	Use GitHub Actions for automation

If you need real-time comments, user authentication, or a WYSIWYG editor, a traditional CMS might be more appropriate.

Getting Started

Want to replicate this setup? Here’s the minimal path:

1. Install Hugo: brew install hugo (macOS) or download binary
2. Create site: hugo new site myblog
3. Add theme: Clone or create templates in /layouts
4. Write content: Add markdown files to /content
5. Deploy: Push to GitHub, enable Pages in repository settings
6. Custom domain: Configure DNS and add CNAME file

Total setup time: under an hour for someone comfortable with git and command line.

Conclusion

A developer blog doesn’t need a complex stack. Hugo + GitHub Pages + a custom domain delivers:

• Sub-second page loads
• Zero hosting costs
• No maintenance burden
• Complete ownership of content
• Version-controlled everything

The only recurring cost is the domain name. Everything else is free, fast, and sustainable.

For ~$1/month, you get a professional blog that will outlast most SaaS platforms.