This post is not about why people need a personal website. Why matters a lot the most, but it’s not the focus here. This is a pure tech post to share how I set up this website.

✅ Prerequisites

  • Know Git
  • Know coding
  • Have a GitHub account (free plan)
  • Have a Cloudflare account (free plan)
  • Have a domain (paid but optional)
If not all ticked, U-turn

🚧 Development

1. Choose a Site Generator

I chose Hugo out of Jekyll, Ghost and custom setup. I need a free one. I don’t code Ruby so Jekyll is out. I code too much JS/TS/Python at my current work and I need a break after work, so Ghost is out. Hugo is fast, trendy and written in Go, so why not? 🥰

2. Choose a theme

I chose PaperMod coz I like simplicity. See Hugo Themes

3. Create your site

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

Download the theme and save it under themes folder. Update hugo.yaml

# You may need to convert toml to yaml. It is simple enough. Just Google it
baseURL: "https://justlearning.club"
title: Just Learning
theme: PaperMod

4. Create content

Run hugo new content posts/about.md to create a first post

Make an about.md file in the content folder

5. Set up menu

Set up the menu in hugo.yaml. See Hugo Menus

menu:
  main:
    - name: "Posts"
      url: "/posts"
      weight: 10 # Show light-weight items first
    - name: "About"
      url: "/about"
      weight: 100 # Show heavy-weight items later

6. Run locally

hugo server -D # to start server include content marked as a draft
hugo # generate the static site to the public folder

7. Push to GitHub

Push your local code to the origin, then move to the next step - deployment

🖥️ Depolyment

1. Buy a Domain

I got justlearning.club from Cloudflare Registrar. I’ve heard great feedback about Cloudflare and would like to explore their other products.

2. Deploy the site

Follow the steps in the deployment section of Deploy a Hugo site on CloudFlare

3. Setup custom domain

Follow the steps in Configure a custom domain on Cloudflare Pages

👀 Verification

Enter your domain in a browser and hit enter.

image 🎉 👏

🦋 Customise the CSS

Your website should have worked at this point. If you would like to slightly twist the theme that you are using, try below. 👇

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

🐛 Gotchas

Set Hugo baseUrl for preview environment in CloudFlare

  1. Change the baseUrl to / in hugo.config. It ensures localhost works ✔️
  2. Change CloudFlare build to hugo -b $CF_PAGES_URL. It ensures preview works ✔️
  3. Add an environment variable for the production environment CF_PAGES_URL to https://justlearning.club. It ensures production works ✔️

In 2023 with the latest hugo version, add the following HTML template file (or render hook) 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>

original post