This post isn’t about why people need a personal website. The “why” matters a lot the most, but it’s not our focus here. This is a technical guide sharing the process I followed to set up this website.

✅ Prerequisites

  • Basic Git knowledge
  • Some coding skills
  • GitHub account (free plan)
  • Cloudflare account (free plan)
  • Domain name (paid but optional)
If not all requirements are met, feel free to skip the rest

🚧 Development

1. Choose a Site Generator

I selected Hugo after evaluating Jekyll, Ghost, and custom setups. My requirements included a free solution that wouldn’t require me to work with languages I use professionally. Since I work extensively with JS/TS/Python at my job and wanted a different experience for personal projects, Hugo (written in Go) was an excellent choice. 🥰

2. Select a Theme

I chose PaperMod for its simplicity and clean design. Browse other options at Hugo Themes.

3. Create Your Site

brew install hugo
hugo new site just-learning
cd just-learning
git init

Download your chosen theme and save it in the themes folder. Update your configuration in hugo.yaml:

# You may need to convert from TOML to YAML format.
baseURL: "https://justlearning.club"
title: Just Learning
theme: PaperMod

4. Create Content

Run the following command to create your first post:

hugo new content posts/about.md

Additionally, create an about.md file in the content folder.

5. Configure Menu Structure

Set up the navigation menu in hugo.yaml:

menu:
  main:
    - name: "Posts"
      url: "/posts"
      weight: 10 # Lower weight items appear first
    - name: "About"
      url: "/about"
      weight: 100 # Higher weight items appear later

6. Local Development

hugo server -D # Start server including draft content
hugo # Generate the static site files in the public folder

7. Push to GitHub

Commit your changes and push your code to GitHub before proceeding to deployment.

🖥️ Deployment

1. Buy a Domain

I purchased justlearning.club from Cloudflare Registrar based on positive feedback about their services and interest in exploring their broader product ecosystem.

2. Deploy the Site

Follow the detailed instructions in Deploy a Hugo site on Cloudflare.

3. Configure Custom Domain

Complete the domain setup by following the steps in Configure a custom domain on Cloudflare Pages.

👀 Verification

Enter your domain in a browser and verify that your site loads correctly.

image 🎉 👏

🦋 Customising the CSS

Once your website is operational, you may want to customise the theme’s appearance:

  1. Create a custom.css file in the static folder
  2. Modify themes/PaperMod/layouts/partials/head.html to include a link to your custom CSS file:
<link crossorigin="anonymous" href="/custom.css" rel="preload stylesheet" as="style">
  1. Add your custom styles to the custom.css file

🐛 Gotchas

Configuring Hugo baseURL for Cloudflare Preview Environment

  1. Set the baseUrl to / in hugo.config to ensure proper functioning with localhost
  2. Configure Cloudflare build command to hugo -b $CF_PAGES_URL for correct preview environment behaviour
  3. Add an environment variable for the production environment setting CF_PAGES_URL to https://justlearning.club

With recent Hugo versions (2023+), add the following HTML template file at layouts/_default/_markup/render-link.html:

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>

Source: Original post by Agrim Prasad