Hugo Project – Complete Beginner Guide

✅ Same Folder e Hugo Start Korar Rule

Dhoro tumi already ekta folder e acho:


cd my-existing-folder

Ekhon simply run korba:


hugo new site . --force

👉 Important:

. mane current folder
--force lagbe jodi folder empty na hoy

🔥 Alternative (Recommended Clean Method)

Jodi folder e already file thake (like README, index.html etc), tahole better:


hugo new site temp

Tarpor temp folder er vitorer sob file cut kore main folder e paste kore diba.

✅ Final Structure (Resume + Blog + docs deploy)


resume/
├── content/
│   ├── _index.md
│   ├── about.md
│   ├── contact.md
│   └── blog/
│       └── first-post.md
│
├── layouts/
│   ├── _default/
│   │   ├── baseof.html
│   │   ├── single.html
│   │   └── list.html
│   ├── partials/
│   │   ├── head.html
│   │   ├── header.html
│   │   └── footer.html
│   └── index.html
│
├── static/
│   ├── css/
│   ├── images/
│   └── javascript/
│
├── docs/        (build output)
├── hugo.toml
└── README.md

✅ তুমি এখন কীভাবে কাজ করবে (Step-by-step)

1) Home page fix (404 বন্ধ করতে)

content/_index.md must থাকবে:

content/_index.md


---
title: "Home"
---

2) তোমার HTML template কে Hugo layout এ বসানো

✅ (A) তোমার template এ যদি full page HTML থাকে (head/body সহ)

তাহলে best practice:

Template থেকে <head> অংশ → layouts/partials/head.html
Navbar/Header → layouts/partials/header.html
Footer → layouts/partials/footer.html
Body content → layouts/index.html (home) / layouts/_default/single.html (pages)

3) baseof.html বানাও (সব page এর common wrapper)

layouts/_default/baseof.html


<!doctype html>
<html lang="en">
  <head>
    {{ partial "head.html" . }}
  </head>
  <body>
    {{ partial "header.html" . }}
    {{ block "main" . }}{{ end }}
    {{ partial "footer.html" . }}
  </body>
</html>

4) Home page layout

layouts/index.html


{{ define "main" }}
  <main>
    <h1>Hello Home</h1>
    <!-- তোমার home template content এখানে -->
  </main>
{{ end }}

5) Normal pages layout (about/contact)

layouts/_default/single.html


{{ define "main" }}
  <main>
    <h1>{{ .Title }}</h1>
    {{ .Content }}
  </main>
{{ end }}

6) Blog list page layout

layouts/_default/list.html


{{ define "main" }}
  <main>
    <h1>{{ .Title }}</h1>
    <ul>
      {{ range .Pages }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
      {{ end }}
    </ul>
  </main>
{{ end }}

✅ Static files কোথায় যাবে?

তোমার CSS/JS/Images সব যাবে static/ এ:

CSS → static/css/
JS → static/javascript/
Images → static/images/

HTML এ reference হবে:


<link rel="stylesheet" href="/css/style.css">
<script src="/javascript/app.js"></script>
<img src="/images/logo.png">

✅ hugo.toml (docs build + local server)

hugo.toml


baseURL = "/"
languageCode = "en-us"
title = "Resume"
publishDir = "docs"

publishDir="docs" দিলে hugo build করলে output docs/ এ যাবে (GitHub Pages friendly)

✅ Local live server


hugo server -D

✅ GitHub Pages build


hugo

তারপর GitHub repo settings → Pages → Source: /docs select করলেই done.

🚀 2️⃣ Live Server (Localhost-এ দেখতে)

এই command চালাও:


hugo server

বা fast reload avoid করতে চাইলে:


hugo server --disableFastRender

তারপর browser খুলে যাও:


http://localhost:1313

👉 এটাকেই Hugo-র live server বলা হয়

🧩 4️⃣ Basic Template Code

🔹 `layouts/_default/baseof.html`


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{{ .Title }}</title>
  <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>
<body>

  {{ block "main" . }}{{ end }}

</body>
</html>

🔹 `layouts/index.html` (Home)


{{ define "main" }}
<h1>Welcome to my Resume Site</h1>
<p>This is home page</p>
{{ end }}

🔹 `layouts/_default/single.html` (About, Contact, Blog post)


{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}

🔹 `layouts/_default/list.html` (Blog list)


{{ define "main" }}
<h1>Blog</h1>

<ul>
  {{ range .Pages }}
    <li>
      <a href="{{ .RelPermalink }}">{{ .Title }}</a>
    </li>
  {{ end }}
</ul>

{{ end }}

✍️ 5️⃣ Content Example

`content/about.md`


---
title: "About Me"
---

I am a web developer.

`content/blog/first-post.md`


---
title: "My First Blog"
date: 2025-01-01
---

This is my first blog post.

🌍 6️⃣ GitHub Pages-এ Live করার Complete Command List

✅ Step 1: `hugo.toml` (MUST)


baseURL = "https://ahmedsharifkhan.github.io/resume/"
languageCode = "en-us"
title = "Resume"

relativeURLs = true
canonifyURLs = true

✅ Step 2: Build site


hugo --minify

👉 এতে public/ folder তৈরি হবে

✅ Step 3: `public` → `docs`


Remove-Item -Recurse -Force docs
Rename-Item public docs

✅ Step 4: `.nojekyll` add করো


New-Item -ItemType File docs\.nojekyll

✅ Step 5: GitHub-এ push


git add .
git commit -m "deploy hugo site"
git push

✅ Step 6: GitHub Pages Settings

GitHub → Settings → Pages

Source: Deploy from a branch
Branch: developedbyask (বা যেটা আছে)
Folder: /docs
Save

⏳ 1–2 মিনিট wait

🔍 7️⃣ Live Check

এইগুলো browser-এ খুলে দেখো:


https://ahmedsharifkhan.github.io/resume/
https://ahmedsharifkhan.github.io/resume/css/style.css

CSS খুললে → site ঠিক ✅
না খুললে → baseURL mismatch ❌

🔄 বারবার করতে হবে (যখন update করবে)

✅ এই ৩টা command প্রতিবার update এর পর দিতে হবে

🔹 Step 1: Build site


hugo --minify

🔹 Step 2: public → docs

(আগে docs delete করে নতুনটা বানানো)


Remove-Item -Recurse -Force docs
Rename-Item public docs

🔹 Step 3: GitHub-এ push


git add .
git commit -m "update site"
git push

👉 এতেই update live হয়ে যাবে 🚀

----------------------------------------------------------------------------------

হ্যাঁ, folder path না দিলে just এটা চালাও:


hugo --minify

এতে Hugo default output directory public/ এ build দেবে, আর --minify minified output বানাবে।

একবারের জন্য terminal দিয়েও করতে পারো:


hugo --minify -d dist

এখানে -d মানে destination/output folder।

একবারের জন্য command দিয়েও করতে পারো:


hugo --minify -d .

এখানে -d . মানে current project root।

🎯 Summary (এক লাইনে)

Hugo project একই folder থেকে start হবে,
hugo server local preview দিবে,
hugo --minify → docs → GitHub Pages
এই flow follow করলেই site live হবে।

License Key

Hugo project Hugo Project – Complete Beginner Guide