๐ŸŒฑ Introduction: The Journey So Far

This project started with me setting up a Hugo blog using the PaperMod theme, developed on a Linux environment and deployed via Cloudflare Pages. I then moved to WSL (Windows Subsystem for Linux) for better flexibility but ran into high I/O issues with VS Code when working across the Windows (/mnt/c/) and WSL filesystems. To resolve this, I moved all project files fully into the WSL-native Linux filesystem.

Next, I switched deployment from Cloudflare Pages to GitHub Pages due to DNS conflictsโ€”Cloudflare didnโ€™t support A records (which my custom domain’s DNS required), and I already had an existing CNAME for email. This move simplified domain handling significantly.

Later, I also moved from the PaperMod theme to building my own: PaperModest โ€” a lightly customized fork tailored for my site. This required cleanly separating the content and theme code into their own repos. Eventually, I published PaperModest on GitHub to give back to the community.

Hereโ€™s how everything evolved โ€” step by step, with all the setup, decisions, commands, and learnings.


๐Ÿงฑ Initial Project Setup (on Linux)

Create a project directory:

mkdir -p ~/projects/faisaldarbar.com
cd ~/projects/faisaldarbar.com

Install Hugo Extended version (required for SCSS-based themes like PaperMod):

sudo apt update
wget https://github.com/gohugoio/hugo/releases/download/v0.147.9/hugo_extended_0.147.9_linux-amd64.deb
sudo apt install ./hugo_extended_0.147.9_linux-amd64.deb

Create the Hugo site:

hugo new site . 

Initialize Git and add the PaperMod theme as a submodule:

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

In hugo.toml, add:

theme = "PaperMod"

Create your first post:

hugo new posts/hello-world.md

Then edit the front matter (in TOML by default):

+++
title = 'Hello World'
date = 'YYYY-MM-DDTHH:MM:SSยฑTZ'
draft = true
+++

Preview the site locally:

hugo server --buildDrafts

View at: http://localhost:1313


๐Ÿ” Git & GitHub SSH Setup

Install Git:

sudo apt update
sudo apt install git

Configure Git:

git config --global user.name "Your Name"
git config --global user.email "your@example.com"

Generate SSH key and add it to GitHub:

ssh-keygen -t ed25519 -C "your@example.com"
ssh -T git@github.com

Push your project to GitHub:

git remote add origin git@github.com:<your-username>/faisaldarbar.git
git add .
git commit -m "Initial Hugo site with PaperMod theme"
git push -u origin main

โ˜๏ธ Deploying to Cloudflare Pages (Initial Attempt)

  1. Go to Cloudflare Pages
  2. Create a new project linked to your GitHub repo
  3. Build settings:
    • Framework preset: Hugo
    • Build command: hugo
    • Output directory: public
  4. Update hugo.toml:
    baseURL = "https://<your-site>.pages.dev/"
    
  5. Commit and push changes to fix baseURL

โš ๏ธ Later, I moved away from Cloudflare Pages due to limitations with A records for custom domains. GitHub Pages worked better for my needs.


๐Ÿ–ฅ๏ธ Multi-Platform Workflow: Linux vs WSL

I moved development to WSL for more seamless Hugo support while still using Windows and VS Code for convenience.

Pros of WSL:

  • Full Linux toolchain (bash, apt, git, ssh)
  • Better file system consistency with Hugoโ€™s build system
  • Native support for scripts, case-sensitive files, and Linux-style permissions

โš ๏ธ But I/O from /mnt/c/ (Windows side) was slow in VS Code

So I moved all project files into WSLโ€™s Linux filesystem to solve lag and file sync issues.


๐Ÿ“ Dev Setup on WSL (with YAML Preference)

Installed Hugo (latest, extended):

sudo snap install hugo --channel=extended

Created the site with YAML config:

hugo new site hugo-papermodest-demo --format yaml

This generated hugo.yaml instead of hugo.toml.


๐ŸŽจ Forking PaperMod โ†’ Building PaperModest Theme

I forked PaperMod and began customizing it as PaperModest.

Cloned the fork:

git clone https://github.com/faisaldarbar/hugo-papermodest.git

Added it to my demo site as a local Git submodule:

git submodule add ../hugo-papermodest themes/hugo-papermodest

๐Ÿ› Submodule Error Fix

Git blocks local file-based submodules by default. Fix:

git config --local protocol.file.allow always
GIT_ALLOW_PROTOCOL=file git submodule add ../hugo-papermodest themes/hugo-papermodest

Updated hugo.yaml:

theme: hugo-papermodest

๐Ÿ“‚ Migrating Site Content & Theme Changes

I wanted a clean separation between theme and site content.

๐Ÿ” Copy Content Only

From the old repo (faisaldarbar.github.io), copy:

  • content/
  • static/
  • assets/
  • config/

Donโ€™t copy theme files โ€” they now live in themes/hugo-papermodest.

โœจ Theme Customizations

Any layout or component change (e.g., modifying baseof.html, adding partials) must be made inside the theme repo, not the site repo.


๐Ÿš€ Relaunch & Clean Deployment

  • Renamed the demo site folder โž faisaldarbar.github.io
  • Pushed the updated theme and content to their respective GitHub repos
  • Site now uses my custom theme and is version-controlled with submodules

๐Ÿ“ฆ Open-Sourcing the PaperModest Theme

I published hugo-papermodest on GitHub.

Install command:

git submodule add https://github.com/faisaldarbar/hugo-papermodest themes/hugo-papermodest

In your config file:

theme: hugo-papermodest

This theme is lightly customized and not actively maintained. Use it freely, but at your own risk.


๐Ÿง  Useful Git & Hugo Commands (Cheat Sheet Style)

Sometimes it’s the simple commands we forget โ€” especially when switching machines or working across WSL and Linux setups. Here are a few I always come back to:

๐Ÿ” After Cloning a Repo

If your theme is a Git submodule (like PaperModest), remember to initialize it after cloning:

git submodule update --init --recursive

๐Ÿ’ก I move between machines often โ€” this command saves me from missing theme files when I switch environments.


๐Ÿงช Start Local Hugo Dev Server (with Drafts)

This ensures that local preview uses a clean localhost baseURL โ€” essential when your live site is already using a production domain:

hugo server -D --baseURL=http://localhost:1313/

๐Ÿ’ก Especially important when working with themes that include canonical URLs or social sharing metadata.


๐Ÿ“˜ How Iโ€™d Set Up a Hugo Site Today (with PaperModest)

1. Use WSL (Ubuntu) for local dev

Avoid /mnt/c/, work inside WSL-native paths

2. Install Hugo (Extended) via Snap

sudo snap install hugo --channel=extended

3. Create Site with YAML Config

hugo new site mysite --format yaml

4. Add PaperModest Theme via Submodule

git submodule add https://github.com/faisaldarbar/hugo-papermodest themes/hugo-papermodest

In hugo.yaml:

theme: hugo-papermodest

5. Add Content, Update Config, Run Local Preview

hugo new posts/my-first-post.md
hugo server --buildDrafts
git init
git remote add origin git@github.com:yourname/mysite.git
git add .
git commit -m "Initial site"
git push -u origin main

7. Deploy via GitHub Pages or Netlify

Prefer GitHub Pages for simplicity if you control the domain DNS (A records, CNAMEs, etc.)


๐Ÿ™Œ Final Thoughts

This project was a deep dive into static site generators, cross-platform workflows, and theme development. PaperModest is the outcome of that effort โ€” simple, minimal, and built to serve my writing. If it helps you too, Iโ€™m glad I shared it.