🧠 Why I Built This Site

As a security architect with a growing portfolio, I wanted a personal site that would:

  • Be fast, static, and secure
  • Showcase my resume, projects, and blog posts
  • Be easy to maintain using Markdown and version control
  • Cost $0 to host and scale globally

🔧 Choosing the Tech Stack

I considered a few frameworks but landed on this stack:

  • Hugo: Blazing-fast static site generator written in Go
  • GitHub: Source control and CI/CD integration with Cloudflare
  • Cloudflare Pages: Free, secure static hosting with CDN and SSL

🚀 Step-by-Step Setup Guide

Here’s a quick illustration demonstrating the workflow for developing and deploying your own static site:

macOSDevelopmentHugobuildDeplGCoilytoeHHuduudgbfSoltgRCaaSieIrtitp/eitoCcepsDPuiaWstTgehorebrissygigteer

Legend

macOS Development - Your local machine where you create content using Hugo.

GitHub Repository - Stores your site code and content. Changes here trigger deployments.

Cloudflare Pages - Pulls from GitHub and builds/deploys your Hugo site.

Deployed Static Website - The final website available at your custom domain.

1️⃣ Create a New Hugo Site

Install Hugo (macOS example):

brew install hugo

Create your site:

hugo new site personal-site
cd personal-site

2️⃣ Install a Theme

I chose PaperMod because it’s minimal, fast, and blog-ready.

Add it as a Git submodule:

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

Then update config.yml:

theme = "PaperMod"

3️⃣ Add Content

Add some starter pages:

hugo new blog/how-i-built-my-site.md
hugo new about.md
hugo new projects/_index.md

Edit them in Markdown! Frontmatter supports title, description, tags, and date.

Example content folder:

content/
├── about.md
├── blog/
│   └── how-i-built-my-site.md
└── projects/
    └── my-cool-project.md

4️⃣ Push to GitHub

Create a repo and push your Hugo site:

git add .
git commit -m "Initial commit"
git remote add origin https://github.com/YOUR_USERNAME/personal-site.git
git push -u origin main

5️⃣ Deploy to Cloudflare Pages

Go to: Cloudflare Pages

  1. Create a new project
  2. Connect your GitHub repo
  3. Set the following:

  • Framework preset: Hugo

  • Build command: hugo

  • Output directory: public

  • Environment variable (optional):

    HUGO_VERSION = 0.125.0 # or your installed version

Cloudflare will auto-build and deploy on every push!

🧩 Extra Features

  • Custom Domain: Set via Cloudflare DNS
  • Free SSL: Automatic via Cloudflare
  • Pretty URLs: Enabled with uglyURLs = false
  • SEO Meta Tags: Configurable in config.yml
  • Google Analytics: Just add the tracking ID

💡 Lessons Learned

  • Hugo builds are nearly instant
  • Cloudflare Pages + GitHub is a great zero-cost CI/CD
  • Managing everything in Markdown with Git is powerful
  • Static sites are extremely fast, and no backend = fewer security risks

⏭️ What’s Next

  • Add RSS Feed for blog
  • Create a dark mode toggle
  • Publish more articles (like this one!)
  • Integrate commenting via GitHub Issues or Giscus
  • Optional: Add Netlify CMS or TinaCMS for visual editing

✍️ Thanks for reading! If this was helpful or you’d like to see more content like this, feel free to reach out or follow along on GitHub.