🧩 Step 1: Install Hugo (Extended Version)

Open your terminal and run and Make sure it says extended — required for themes using SCSS.

brew upgrade hugo                         # Update Hugo
git submodule update --remote --merge     # Update theme
brew install hugo                         # install
hugo version                              # verify version
hugo v0.133.1+extended darwin/arm64 ...   # Expected output:

hugo new site . --format yaml             # Create a New Hugo Site in root folder

hugo new _index.md                        # create new phome page
hugo new contact.md                       # create other pages


# ----------------------------------------
#     Add .gitignore first
# ----------------------------------------

touch .gitignore                          # Create a .gitignore file
nano .gitignore                           # Open it in the terminal editor (nano) to add entries


git add .
git commit -m "Initial Hugo site"
git remote add origin https://github.com/yourname/mycoursesite.git
git push origin main


                                         # install theme: Papermod/Zen
rm -rf themes/hugo-profile                # delete old theme
git submodule add https://github.com/gurusabarish/hugo-profile.git themes/hugo-profile


hugo server       # Run locally
hugo server -D    # Debug mode Run the local development server:
hug build         # Build the project




rm -rf themes/PaperMod    # Delete the old theme folder
git clone https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod     @ Clone the latest PaperMod from GitHub
grep version themes/PaperMod/theme.toml   # Check the version

Add Standalone HTML Page in Hugo

# Put your HTML file inside the static folder
static/your-folder/index.html   # Hugo copies this directly to the site

# Access the page in the browser
/your-folder/                   # URL automatically loads index.html

# Link to the page from your site
<a href="/your-folder/">Open Page</a>   # Simple link to the static page
[MarkDown Formattted](/foldername/)

Sample .gitignore file

.DS_Store
Thumbs.db
.hugo_build.lock
hugo_stats.json
public/
resources/
node_modules/
.vscode/
.firebase/

hugo.yaml file content

Sample content of the pages:

---
title: "Home"
draft: false
---

Deploy to Netlify

  • Go to https://app.netlify.com → Click “Add New Site → Import from GitHub” → Select your repository.
  • Then click Deploy.
  • At the root of your project, create netlify.toml and add:
[build]
  command = "hugo --gc --minify"
  publish = "public"

[build.environment]
  HUGO_VERSION = "0.152.2"
  HUGO_ENV = "production"
  HUGO_EXTENDED = "true"
  HUGO_ENABLEGITINFO = "true"

[context.production.environment]
  HUGO_ENV = "production"

[context.deploy-preview.environment]
  HUGO_ENV = "staging"

Firebase Hosting/Deploy:

hugo
npm install -g firebase-tools
firebase login
firebase init   #configure whatever needed
hugo
firebase deploy

Suggestion for modification


1) Edit the .gitignore file in the root of your project. It should look something like this:

.DS_Store
.hugo_build.lock
hugo_stats.json
node_modules/
public/
resources/


2) Remove the public directory (and other cruft) from source control and push changes:

git rm -rf public/
git rm .hugo_build.lock
git rm .DS_Store
git add -A && git commit -m "Cleanup repo" && git push

Add and Display Images in Hugo PaperMod

  • Place image inside static folder: static/images/myImage.png
    • means: we can reference it in markdown as: /images/myImage.png
  • Add Image as Page Cover front matter (top section)
    • This displays the image at the top of the post as a cover/banner.
cover:
  image: "/images/myImage.png"
  alt: "macOS 26 Course"
  caption: "Ultimate macOS 26 Tahoe Course"
  hidden: false
  • Add Image Inside Page Content use Hugo figure shortcode:
    • Don’t leave a space between {{ and <figure.

{{< figure src="/images/myImage.png" alt=“altText” caption=“captionText” width=“300px” >}}

Ref of PaperMod Theme:

✅ Solution: Update PaperMod to the latest version

rm -rf themes/PaperMod # Delete the old theme folder git clone https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod @ Clone the latest PaperMod from GitHub grep version themes/PaperMod/theme.toml # Check the version

  1. **** (optional but recommended):

You should see something like:

version = "9.2.0"   # example, latest as of now
  1. Ensure your hugo.yaml still has:
params:
  ShowCopyButton: true

markup:
  goldmark:
    renderer:
      unsafe: true
  highlight:
    noClasses: false
  1. Restart Hugo completely:
hugo server -D --disableFastRender
  1. Check your page — the copy button should now appear on all code blocks.

If you want, I can give you a ready-to-use minimal hugo.yaml for PaperMod v9+ with the copy button guaranteed to work. This avoids any conflicts with old settings.

Do you want me to do that?