📚 คู่มือ Hugo Stack Theme ฉบับสมบูรณ์

 1my-blog/
 2├── assets/              # ไฟล์ต้นฉบับ (SCSS, JS)
 3│   ├── img/            # รูปภาพ
 4│   │   └── profile.jpg # รูปโปรไฟล์
 5│   └── scss/
 6│       └── custom.scss # CSS ส่วนตัว
 7├── content/            # เนื้อหาบทความ
 8│   ├── posts/         # บทความ
 9│   └── _index.md      # หน้าแรก
10├── layouts/           # Template ส่วนตัว (override theme)
11├── static/            # ไฟล์ static (ไม่ผ่าน Hugo processing)
12├── themes/            # Theme files
13│   └── hugo-theme-stack/
14└── hugo.toml         # Config หลัก

 1// เปลี่ยนสีหลัก (Accent Color)
 2:root {
 3  --accent-color: #007bff;        // สีลิงก์, ปุ่ม
 4  --accent-color-darker: #0056b3; // สีเมื่อ hover
 5}
 6
 7// เปลี่ยนสีพื้นหลัง Dark Mode
 8:root[data-scheme="dark"] {
 9  --body-background: #1a1a1a;
10  --card-background: #2d2d2d;
11}
12
13// เปลี่ยนสีพื้นหลัง Light Mode
14:root[data-scheme="light"] {
15  --body-background: #f5f5f5;
16  --card-background: #ffffff;
17}

1[params]
2  defaultTheme = "dark"  # light, dark, auto

1[[params.headCustomHTML]]
2  html = """<link rel="preconnect" href="https://fonts.googleapis.com">
3<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap" rel="stylesheet">"""

1body {
2  font-family: 'Noto Sans Thai', sans-serif;
3}
4
5h1, h2, h3, h4, h5, h6 {
6  font-family: 'Noto Sans Thai', sans-serif;
7}

 1@font-face {
 2  font-family: 'My Font';
 3  src: url('/fonts/my-font.woff2') format('woff2');
 4  font-weight: normal;
 5  font-style: normal;
 6}
 7
 8body {
 9  font-family: 'My Font', sans-serif;
10}

1[params.sidebar]
2  compact = true  # true = โหมดเล็ก, false = โหมดปกติ

 1# Widgets ในหน้าแรก
 2[[params.widgets.homepage]]
 3  type = "search"
 4
 5[[params.widgets.homepage]]
 6  type = "categories"
 7
 8# Widgets ในหน้าบทความ
 9[[params.widgets.page]]
10  type = "toc"  # สารบัญ

1# ลบ widgets ออกทั้งหมด
2[[params.widgets.homepage]]
3  type = "disabled"

1[params.sidebar]
2  avatar = "img/profile.jpg"  # วางรูปใน assets/img/

1[params.sidebar]
2  emoji = "👋"  # หรือ 🤖, 🎨, 📝, etc.

1[params.sidebar]
2  subtitle = "คำอธิบายสั้นๆ เกี่ยวกับบล็อก"

1[params.article]
2  toc = true              # เปิด/ปิดสารบัญ
3  readingTime = true      # เปิด/ปิดเวลาอ่าน
4  headingAnchor = true    # เปิด/ปิด # ข้างหัวข้อ
5  math = false            # เปิด/ปิด KaTeX
6  
7  [params.article.license]
8    enabled = true        # เปิด/ปิด License
9    default = "CC BY-NC 4.0"

1[params.article.mermaid]
2  look = "classic"        # classic หรือ handDrawn
3  lightTheme = "default"  # ธีม light mode
4  darkTheme = "dark"      # ธีม dark mode
5  securityLevel = "strict"

 1[params.imageProcessing]
 2  lazyLoading = true      # โหลดรูปเมื่อเลื่อนถึง
 3  enableWebP = true       # แปลงรูปเป็น WebP
 4  
 5  [params.imageProcessing.thumbnail]
 6    enabled = true        # สร้าง thumbnail
 7  
 8  [params.imageProcessing.content]
 9    enabled = true        # Responsive images
10    widths = [400, 800, 1200, 1600]  # ขนาดที่จะสร้าง

1[imaging]
2  quality = 80            # 0-100 (แนะนำ 75-85)
3  resampleFilter = "lanczos"  # lanczos, catmullrom, linear
4  anchor = "smart"        # smart, center, topLeft, etc.

 1baseURL = "https://example.com/"
 2title = "บล็อกของฉัน"
 3theme = "hugo-theme-stack"
 4languageCode = "th-th"
 5
 6[params]
 7  description = "บล็อกส่วนตัว"
 8  defaultTheme = "auto"
 9  mainSections = ["posts"]
10  
11  [params.sidebar]
12    compact = false
13    emoji = "👋"
14    subtitle = "แบ่งปันความรู้และเทคโนโลยี"
15    avatar = "img/profile.jpg"
16  
17  [params.article]
18    toc = true
19    readingTime = true
20    headingAnchor = true
21    math = false
22    
23    [params.article.license]
24      enabled = true
25      default = "CC BY-NC 4.0"
26  
27  [params.imageProcessing]
28    lazyLoading = true
29    enableWebP = true
30
31[menu]
32  [[menu.main]]
33    name = "Home"
34    url = "/"
35    weight = 1
36    [menu.main.params]
37      icon = "home"
38  
39  [[menu.social]]
40    name = "GitHub"
41    url = "https://github.com/username"
42    weight = 1
43    [menu.social.params]
44      icon = "github"

1git clone https://github.com/CaiJimmy/hugo-theme-stack-starter my-blog
2cd my-blog
3hugo server

 1# Initialize module
 2hugo mod init github.com/me/my-blog
 3
 4# Add theme to config
 5# hugo.toml
 6[[module.imports]]
 7  path = "github.com/CaiJimmy/hugo-theme-stack/v4"
 8
 9# Update theme
10hugo mod get -u github.com/CaiJimmy/hugo-theme-stack/v4
11hugo mod tidy

1git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

1[params.sidebar]
2  compact = false          # โหมด compact
3  emoji = "👋"             # Emoji ด้านบน
4  subtitle = "คำอธิบายสั้นๆ"
5  avatar = "img/profile.jpg"  # รูปโปรไฟล์ (ต้องอยู่ใน assets/img/)

1assets/
2└── img/
3    └── profile.jpg  ← วางรูปที่นี่

1[params.article]
2  headingAnchor = false    # แสดง # ข้างหัวข้อ
3  math = false             # เปิดใช้ KaTeX (สมการคณิตศาสตร์)
4  toc = true               # แสดงสารบัญ
5  readingTime = true       # แสดงเวลาอ่าน
6  
7  [params.article.license]
8    enabled = true
9    default = "CC BY-NC 4.0"

1[params.article.mermaid]
2  look = "classic"         # classic หรือ handDrawn
3  lightTheme = "default"   # ธีมสำหรับ light mode
4  darkTheme = "dark"       # ธีมสำหรับ dark mode (สลับธีมอัตโนมัติ)
5  securityLevel = "strict"

 1[[params.widgets.homepage]]
 2  type = "search"
 3
 4[[params.widgets.homepage]]
 5  type = "archives"
 6  [params.widgets.homepage.params]
 7    limit = 10
 8
 9[[params.widgets.homepage]]
10  type = "categories"
11  [params.widgets.homepage.params]
12    limit = 10
13
14[[params.widgets.homepage]]
15  type = "tag-cloud"
16  [params.widgets.homepage.params]
17    limit = 10

1---
2title: "บทความ"
3menu:
4  main:
5    name: "บทความ"
6    weight: -90
7    params:
8      icon: "article"
9---

 1[[menu.main]]
 2  name = "Home"
 3  url = "/"
 4  weight = 1
 5  identifier = "home"
 6  [menu.main.params]
 7    icon = "home"
 8    newTab = false
 9
10[[menu.main]]
11  name = "Posts"
12  url = "/posts/"
13  weight = 2
14  identifier = "posts"
15  [menu.main.params]
16    icon = "archive"

1[[menu.social]]
2  name = "GitHub"
3  url = "https://github.com/yourusername"
4  weight = 1
5  [menu.social.params]
6    icon = "github"
7    newTab = true

1content/
2└── posts/
3    └── my-first-post/
4        ├── index.md       ← เนื้อหา
5        ├── image1.png     ← รูป
6        └── image2.png

 1---
 2title: "ชื่อบทความ"
 3date: 2026-04-06T19:00:00+07:00
 4draft: false
 5tags: ["tag1", "tag2"]
 6categories: ["Category"]
 7image: "image1.png"  # รูปปก
 8description: "คำอธิบายสั้นๆ"
 9slug: "my-first-post"
10toc: true            # เปิด/ปิดสารบัญ
11math: true           # เปิด/ปิด KaTeX
12license: "CC BY-NC"  # License (override)
13---

1![คำอธิบายรูป](image1.png)
2
3![รูปที่ 2](image2.png)

1![รูปที่ 1](image1.png) ![รูปที่ 2](image2.png)
2![รูปที่ 3](image3.png)

1hugo new search/_index.md

1---
2title: "Search"
3layout: "search"
4---

1hugo new archives/_index.md

1---
2title: "Archives"
3layout: "archives"
4---

1[params.article]
2  math = true

1---
2math: true
3---

1Inline: $E = mc^2$
2
3Block:
4$$
5E = mc^2
6$$

1[params.article.mermaid]
2  enabled = true

1// ตัวอย่าง: เปลี่ยนสี accent
2:root {
3  --accent-color: #your-color;
4}
5
6// เปลี่ยนฟอนต์
7body {
8  font-family: 'Your Font', sans-serif;
9}

1[menu.main.params]
2  icon = "your-icon"

1themes/hugo-theme-stack/layouts/_partials/header.html
2→
3layouts/_partials/header.html

 1[languages]
 2  [languages.en]
 3    languageName = "English"
 4    title = "My Blog"
 5    weight = 1
 6    
 7  [languages.th]
 8    languageName = "ไทย"
 9    title = "บล็อกของฉัน"
10    weight = 2

 1baseURL = "https://example.com/"
 2title = "บล็อกของฉัน"
 3theme = "hugo-theme-stack"
 4languageCode = "th-th"
 5
 6[params]
 7  description = "บล็อกส่วนตัว"
 8  defaultTheme = "auto"
 9  mainSections = ["posts"]
10  
11  [params.sidebar]
12    emoji = "👋"
13    subtitle = "คำอธิบาย"
14    avatar = "img/profile.jpg"
15  
16  [params.article]
17    toc = true
18    readingTime = true
19    
20    [params.article.license]
21      enabled = true
22      default = "CC BY-NC 4.0"
23  
24  [params.widgets.homepage]
25    - type = "search"
26    - type = "archives"
27    - type = "categories"
28    - type = "tag-cloud"
29
30[menu]
31  [[menu.main]]
32    name = "Home"
33    url = "/"
34    weight = 1
35    [menu.main.params]
36      icon = "home"
37  
38  [[menu.social]]
39    name = "GitHub"
40    url = "https://github.com/username"
41    weight = 1
42    [menu.social.params]
43      icon = "github"
44
45[languages]
46  [languages.th]
47    languageName = "ไทย"
48    weight = 1

1# ตรวจสอบว่ารูปอยู่ในโฟลเดอร์ที่ถูกต้อง
2content/posts/my-post/
3├── index.md
4└── cover.jpg  ← ต้องอยู่ในโฟลเดอร์เดียวกัน
5
6# ตรวจสอบ Front Matter
7title = "My Post"
8image = "cover.jpg"  ← ต้องตรงกับชื่อไฟล์

1# ตรวจสอบใน hugo.toml
2[params]
3  defaultTheme = "auto"  # หรือ "light", "dark"

1# สร้างหน้า Search ให้ถูกต้อง
2hugo new search/_index.md
3
4# ตรวจสอบ Front Matter
5---
6title: "Search"
7layout: "search"
8---

1# ใช้ Front Matter menu แทน config
2---
3menu:
4  main:
5    name: "Posts"
6    weight: -90
7---

 1# ตรวจสอบ Hugo version
 2hugo version
 3
 4# ต้องเป็น 0.160.0+ extended
 5# ถ้าไม่ใช่ ให้ติดตั้งใหม่
 6# https://gohugo.io/installation/
 7
 8# Clear cache
 9hugo mod clean
10rm -rf public/
11hugo server --gc

1# ตรวจสอบตำแหน่งไฟล์
2assets/scss/custom.scss  ← ต้องอยู่ที่นี้
3
4# Clear cache และ rebuild
5rm -rf public/
6hugo server --gc --minify

 1name: Deploy to GitHub Pages
 2
 3on:
 4  push:
 5    branches: [main]
 6  workflow_dispatch:
 7permissions:
 8  contents: read
 9  pages: write
10  id-token: write
11
12jobs:
13  build:
14    runs-on: ubuntu-latest
15    steps:
16      - uses: actions/checkout@v4
17        with:
18          submodules: recursive
19          
20      - name: Setup Hugo
21        uses: peaceiris/actions-hugo@v3
22        with:
23          hugo-version: '0.160.0'
24          extended: true
25          
26      - name: Build
27        run: hugo --gc --minify
28        
29      - name: Upload artifact
30        uses: actions/upload-pages-artifact@v3
31        with:
32          path: ./public
33          
34  deploy:
35    environment:
36      name: github-pages
37      url: ${{ steps.deployment.outputs.page_url }}
38    runs-on: ubuntu-latest
39    needs: build
40    steps:
41      - name: Deploy to GitHub Pages
42        id: deployment
43        uses: actions/deploy-pages@v4

1git add .
2git commit -m "Add GitHub Actions"
3git push

1# ติดตั้ง hugo-deploy
2go install github.com/gohugoio/hugo-deploy@latest
3
4# Deploy
5hugo-deploy --repo https://github.com/username/username.github.io

 1[build]
 2  command = "hugo --gc --minify"
 3  publish = "public"
 4
 5[build.environment]
 6  HUGO_VERSION = "0.160.0"
 7  HUGO_ENV = "production"
 8  HUGO_ENABLEGITINFO = "true"
 9
10[[redirects]]
11  from = "/index.xml"
12  to = "/rss.xml"
13  status = 301

 1[params.imageProcessing]
 2  lazyLoading = true      # โหลดรูปเมื่อเลื่อนถึง
 3  enableWebP = true       # แปลงรูปเป็น WebP (ลดขนาด 30-50%)
 4  
 5  [params.imageProcessing.thumbnail]
 6    enabled = true
 7  
 8  [params.imageProcessing.content]
 9    enabled = true
10    widths = [400, 800, 1200, 1600]

1[imaging]
2  quality = 80            # แนะนำ 75-85
3  resampleFilter = "lanczos"

1# ใช้ imagemagick
2convert input.jpg -quality 80 output.jpg
3
4# ใช้ tinypng (ออนไลน์)
5# https://tinypng.com/

1hugo --gc --minify

1[minify]
2  disableCSS = false
3  disableHTML = false
4  disableJS = false
5  disableJSON = false

1[params.imageProcessing]
2  lazyLoading = true

1![รูป](image.jpg "คำอธิบาย")

1[caches]
2  [caches.getjson]
3    dir = ":cacheDir/:project"
4    maxAge = -1
5    
6  [caches.getcsv]
7    dir = ":cacheDir/:project"
8    maxAge = -1

1[params]
2  assetUrl = "https://cdn.example.com/"

1[params.opengraph]
2  enabled = true
3  image = "images/default-cover.jpg"
4  locale = "th_TH"
5  
6  [params.opengraph.twitter]
7    site = "@yourusername"
8    card = "summary_large_image"

1---
2title: "ชื่อบทความ"
3description: "คำอธิบายสั้นๆ (150-160 ตัวอักษร)"
4tags: ["tag1", "tag2"]
5image: "cover.jpg"
6---

1[services]
2  [services.googleAnalytics]
3    ID = "G-XXXXXXXXXX"

1[params]
2  googleAnalytics = "G-XXXXXXXXXX"

1hugo server
2# เปิด browser → Inspect → Network
3# ค้นหา "analytics" หรือ "gtag"

1[[params.headCustomHTML]]
2  html = """<meta name="google-site-verification" content="your-verification-code"/>"""

1# เข้า https://search.google.com/test/rich-results
2# ใส่ URL เว็บคุณ