Hugo: All Hugo Tips And Tricks
🧩 Step 1: Install Hugo (Extended Version) Open your terminal and run and Make sure it says extended — required for themes using SCSS. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 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 1 2 3 4 5 6 7 8 9 # 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 PaperMod Ref: https://github.com/adityatelange/hugo-PaperMod/wiki/Installation Zen Ref: Sample content of the pages: 1 2 3 4 --- 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: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 [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: 1 2 3 4 5 6 hugo npm install -g firebase-tools firebase login firebase init #configure whatever needed hugo firebase deploy Suggestion for modification Hugo Commnity 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. 1 2 3 4 5 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” >}} ...