Tutorial on Code & Community

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

jitaret@gmail.com (เหน่ง) — Mon, 06 Apr 2026 19:00:00 +0700

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

อัพเดท: 2026-04-10
เวอร์ชัน: Hugo Stack v4
Hugo: 0.160.0+ extended (April 2026)

📋 สารบัญ

ข้อมูลเบื้องต้น
การติดตั้ง
การใช้ธีม Stack 🆕
การตั้งค่า (Configuration)
การเขียนบทความ
Widgets
Menu
ฟีเจอร์พิเศษ
การปรับแต่งขั้นสูง
Troubleshooting 🆕
Deployment 🆕
Performance Optimization 🆕
SEO & Analytics 🆕

📖 ข้อมูลเบื้องต้น

Hugo Stack คืออะไร?

Hugo Stack คือธีมสำหรับ Hugo แบบ card-style ที่ออกแบบมาสำหรับ blogger โดยเฉพาะ

ฟีเจอร์หลัก:

ฟีเจอร์	คำอธิบาย
🌙 Dark Mode	โหมดมืดอัตโนมัติตามระบบ
📱 Responsive	รองรับทุกอุปกรณ์
🌐 Multilingual	รองรับหลายภาษา
🔍 Local Search	ค้นหาในเว็บ
📑 Table of Contents	สารบัญบทความ
🖼️ Image Gallery	แกลเลอรี่รูปภาพ
⚡ Fast	เร็วและเบา (ไม่มี framework)

🎨 การใช้ธีม Stack

1. โครงสร้างโฟลเดอร์

 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 หลัก

2. การปรับแต่งสี (Color Customization)

วิธีที่ 1: ใช้ Custom CSS (แนะนำ)

สร้างไฟล์: assets/scss/custom.scss

 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}

วิธีที่ 2: แก้ใน Config

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

3. การเพิ่ม Font (Custom Fonts)

วิธีที่ 1: ใช้ Google Fonts

เพิ่มใน hugo.toml:

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">"""

ใช้ใน assets/scss/custom.scss:

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}

วิธีที่ 2: ใช้ Font ในเครื่อง

วางไฟล์ font ใน static/fonts/
เพิ่มใน assets/scss/custom.scss:

 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}

4. การปรับ Layout

Sidebar Compact Mode:

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

เปลี่ยนตำแหน่ง Widgets:

 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" # สารบัญ

ซ่อน Widgets:

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

5. การปรับ Avatar และ Emoji

เปลี่ยนรูปโปรไฟล์:

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

เปลี่ยน Emoji:

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

เพิ่ม Subtitle:

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

6. การปรับ Article Layout

เปิด/ปิดฟีเจอร์:

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"

Mermaid Diagrams:

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

7. การปรับ Image Processing

Lazy Loading (enabled by умолчанию):

 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.

8. ตัวอย่างการตั้งค่าแบบเต็ม

 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"

🚀 การติดตั้ง

วิธีที่ 1: ใช้ Starter Template (แนะนำ)

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

วิธีที่ 2: Hugo Module

 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

วิธีที่ 3: Git Submodule

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

⚙️ การตั้งค่า (Configuration)

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 ← วางรูปที่นี่

2. Article (บทความ)

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"

Mermaid Diagrams:

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

3. Widgets (วิดเจ็ตด้านขวา)

 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

Widgets ที่มี:

Widget	คำอธิบาย	Params
`search`	ช่องค้นหา	-
`archives`	รายการปี	`limit`
`categories`	หมวดหมู่	`limit`
`toc`	สารบัญ	-
`tag-cloud`	แท็ก	`limit`
`taxonomy`	taxonomy กำหนดเอง	`taxonomy`, `limit`, `icon`

วิธีที่ 1: เพิ่มใน Front Matter (แนะนำ)

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

วิธีที่ 2: เพิ่มใน Config

 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"

Social Menu:

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

✍️ การเขียนบทความ

โครงสร้างไฟล์ (Page Bundles)

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

Front Matter

 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)

Image Gallery:

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

จะแสดงเป็น 2 แถว (2 รูปบน, 1 รูปล่าง)

🎨 ฟีเจอร์พิเศษ

1. Dark Mode

เปิด/ปิดอัตโนมัติตามระบบ
หรือคลิกปุ่ม Dark Mode ใน sidebar

2. Local Search

ต้องสร้างหน้า Search ก่อน:

1hugo new search/_index.md

Front Matter:

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

3. Archives

1hugo new archives/_index.md

Front Matter:

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

4. Math Typesetting (KaTeX)

เปิดใน config:

1[params.article]
2 math = true

หรือเปิดในบทความ:

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

ใช้:

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

5. Mermaid Diagrams

เปิดใน config:

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

ใช้:

graph TD;
 A-->B;
 A-->C;
 B-->D;
 C-->D;

🔧 การปรับแต่งขั้นสูง

1. Custom CSS

สร้างไฟล์: assets/scss/custom.scss

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

2. Custom Icons

ดาวน์โหลด SVG จาก Tabler Icons

วางที่: assets/icons/your-icon.svg

ใช้:

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

3. Override Theme Files

คัดลอกไฟล์จาก theme มาที่โปรเจกต์:

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

แก้ไขไฟล์ใน layouts/ จะ override theme

4. Multilingual

 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

📊 สรุปการตั้งค่าที่สำคัญ

hugo.toml (ตัวอย่างเต็ม)

 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

🔗 ลิงก์ที่เป็นประโยชน์

แหล่ง	ลิงก์
Official Docs	https://stack.cai.im/
GitHub Repo	https://github.com/CaiJimmy/hugo-theme-stack
Demo	https://demo.stack.cai.im/
Starter Template	https://github.com/CaiJimmy/hugo-theme-stack-starter
Tabler Icons	https://tabler-icons.io

⚠️ Troubleshooting

ปัญหาที่พบบ่อยและวิธีแก้

1. รูปไม่แสดง

ปัญหา: รูปปกหรือรูปในบทความไม่แสดง

วิธีแก้:

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

2. Dark Mode ไม่ทำงาน

ปัญหา: ปุ่ม Dark Mode ไม่เปลี่ยนสี

วิธีแก้:

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

3. Search ไม่ทำงาน

ปัญหา: กดค้นหาแล้วไม่มีผลลัพธ์

วิธีแก้:

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

ปัญหา: เมนูไม่ highlight เมื่ออยู่ในหน้านั้น

วิธีแก้:

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

5. Build ล้มเหลว

ปัญหา: hugo server error

วิธีแก้:

 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

6. CSS ส่วนตัวไม่ทำงาน

ปัญหา: แก้ custom.scss แล้วไม่เปลี่ยน

วิธีแก้:

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

🚀 Deployment

1. GitHub Pages (แนะนำ)

วิธีที่ 1: ใช้ GitHub Actions (ง่ายสุด)

สร้างไฟล์ .github/workflows/hugo.yml:

 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

Push ขึ้น GitHub:

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

เปิด Settings → Pages → เลือก Source: GitHub Actions

วิธีที่ 2: ใช้ hugo-deploy

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

2. Netlify

วิธีที่ 1: เชื่อมต่อกับ GitHub

เข้า https://netlify.com
คลิก “Add new site” → “Import an existing project”
เลือก GitHub repo
ตั้งค่า:
- Build command: hugo --gc --minify
- Publish directory: public
- Hugo version: 0.160.0

วิธีที่ 2: ใช้ netlify.toml

สร้างไฟล์ netlify.toml:

 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

3. Vercel

เข้า https://vercel.com
คลิก “Add New” → “Project”
เลือก GitHub repo
ตั้งค่า:
- Framework Preset: Hugo
- Build Command: hugo --gc --minify
- Output Directory: public
- Hugo Version: 0.160.0

⚡ Performance Optimization

1. Image Optimization

เปิดใน config:

 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"

บีบอัดรูปก่อน upload:

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

2. Minify

Build แบบ minify:

1hugo --gc --minify

เปิดใน config:

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

3. Lazy Loading

เปิดใน config:

1[params.imageProcessing]
2 lazyLoading = true

ใช้ loading=“lazy” ในรูป:

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

Hugo จะเพิ่ม loading="lazy" อัตโนมัติ

4. Cache

เปิด Caching:

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

5. CDN

ใช้ CDN สำหรับ static files:

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

🔍 SEO & Analytics

1. Meta Tags

เปิดใน config:

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"

เพิ่มใน Front Matter:

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

2. Google Analytics

เพิ่มใน config:

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

หรือใช้ params:

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

ตรวจสอบการทำงาน:

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

3. Google Search Console

เพิ่ม verification code:

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

Submit sitemap:

Build เว็บ: hugo --gc --minify
Sitemap อยู่ที่: public/sitemap.xml
เข้า https://search.google.com/search-console
Submit sitemap: https://example.com/sitemap.xml

4. Schema.org

Hugo Stack เพิ่ม Schema.org อัตโนมัติ

ตรวจสอบ:

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

📊 สรุป

หัวข้อ	คำแนะนำ
Deployment	GitHub Pages (ง่ายสุด)
Image Optimization	เปิด WebP + Lazy Loading
Minify	`hugo --gc --minify`
Analytics	Google Analytics 4
SEO	Open Graph + Sitemap

💡 เคล็ดลับ

ใช้ Page Bundles — จัดการรูปและเนื้อหาในโฟลเดอร์เดียวกัน
ใช้ Starter Template — เริ่มต้นง่าย มี GitHub Actions ให้แล้ว
Custom CSS ใน assets/scss/ — ไม่ต้องแก้ theme
ใช้ Front Matter menu — เมนูจะ highlight อัตโนมัติ
รูปต้องอยู่ใน assets/ — สำหรับ avatar และรูปในธีม
Build แบบ minify — ลดขนาดไฟล์
ใช้ WebP — ลดขนาดรูป 30-50%
Submit sitemap — ให้ Google index เร็วขึ้น

🔗 ลิงก์ที่เป็นประโยชน์

แหล่ง	ลิงก์
Official Docs	https://stack.cai.im/
GitHub Repo	https://github.com/CaiJimmy/hugo-theme-stack
Demo	https://demo.stack.cai.im/
Starter Template	https://github.com/CaiJimmy/hugo-theme-stack-starter
Tabler Icons	https://tabler-icons.io
Hugo Docs	https://gohugo.io/documentation/
Google Analytics	https://analytics.google.com/
Search Console	https://search.google.com/search-console
GitHub Pages	https://pages.github.com/
Netlify	https://www.netlify.com/
Vercel	https://vercel.com/

อัพเดทล่าสุด: 2026-04-10
เขียนโดย: เหน่ง

เอกสารนี้อ้างอิงจาก Hugo Stack Official Documentation

เปิดโลก AI Assistant: คู่มือติดตั้ง OpenClaw สำหรับมือใหม่ (ฉบับไม่มีพื้นฐานก็ทำได้)

jitaret@gmail.com (เหน่ง) — Mon, 06 Apr 2026 08:20:00 +0700

👋 บทนำ — OpenClaw คืออะไร?

เคยฝันไหมครับ? ว่าถ้ามี ผู้ช่วยส่วนตัว ที่:

ตอบคำถามได้ตลอด 24 ชม.
ช่วยเขียนบทความ ค้นหาข้อมูล จัดการไฟล์
สั่งงานผ่านแชทได้เลย
ฟรี! (หรือถูกมาก)

OpenClaw ทำให้ฝันนั้นเป็นจริงครับ!

OpenClaw คืออะไร?

OpenClaw คือแพลตฟอร์มสำหรับสร้าง AI Assistant ส่วนตัว ที่:

✅ ควบคุมด้วยข้อความธรรมชาติ — คุยเหมือนคน
✅ เข้าถึงไฟล์ในเครื่องได้ — อ่าน/เขียน/แก้ไขไฟล์
✅ ค้นหาเว็บได้ — ดึงข้อมูลจาก internet
✅ ทำงานอัตโนมัติ — ตั้งเวลา ส่งข้อความ
✅ จำสิ่งที่คุยกัน — มี Memory System
✅ ฟรี! — ใช้โมเดลฟรีได้หลายตัว

ทำไมต้องใช้ OpenClaw?

งาน	ทำเอง	มี OpenClaw
ค้นหาข้อมูล	เปิดเบราว์เซอร์เอง	สั่ง “มิก ค้นหาเรื่อง…”
เขียนบทความ	2-3 ชั่วโมง	30 นาที
จัดการไฟล์	เปิด File Explorer	สั่ง “มิก หาไฟล์…”
ตั้งเตือน	ตั้ง alarm เอง	สั่ง “เตือนฉันเรื่อง…”
สรุปเอกสาร	อ่านเองทั้งเล่ม	“มิก สรุปให้หน่อย”

ประหยัดเวลา: 70-80%! ⏱️

ต้องมีความรู้ก่อนไหม?

คำตอบ: ไม่! 🎉

ถ้าคุณ:

✅ พิมพ์แชทได้
✅ ดาวน์โหลดโปรแกรมได้
✅ ก็อปปี้-วางได้

คุณก็ใช้ OpenClaw ได้แล้ว!

บทความนี้จะพาทำทีละขั้นตอน ไม่มีทางตกแน่นอน!

📦 เตรียมตัวก่อนติดตั้ง

ข้อกำหนดระบบ

1✅ Node.js: Node 24 (แนะนำ) หรือ Node 22.14+
2✅ RAM: 4GB+ (แนะนำ 8GB)
3✅ CPU: 2 core+
4✅ พื้นที่: 1GB+
5✅ OS: macOS, Linux, Windows (Native/WSL2)
6✅ Internet: สำหรับดาวน์โหลด

ต้องมีอะไรบ้าง?

คอมพิวเตอร์ (เครื่องไหนก็ได้)
Internet (สำหรับดาวน์โหลด)
Telegram (สำหรับแชทกับ AI)
เวลา: 15-30 นาที

ใช้เวลาเท่าไหร่?

ขั้นตอน	เวลา
ติดตั้ง Node.js	5 นาที
ติดตั้ง OpenClaw	2 นาที
สร้าง Bot	3 นาที
ตั้งค่า	5 นาที
รวม	15 นาที

🚀 ติดตั้งทีละขั้นตอน

ขั้นตอนที่ 1: ติดตั้ง Node.js

OpenClaw ทำงานบน Node.js — ไม่ต้องกังวลครับ ติดตั้งง่ายมาก!

สำหรับ Windows:

เปิดเว็บ: https://nodejs.org/
คลิกปุ่มสีเขียว “LTS” (Recommended)
ดาวน์โหลดเสร็จ → ดับเบิลคลิกไฟล์
กด Next → Next → Next → Finish
เสร็จ!

สำหรับ macOS:

เปิด Terminal แล้วพิมพ์:

1brew install node

(ถ้าไม่มี Homebrew → ติดตั้งจาก https://brew.sh/)

สำหรับ Linux:

1# Ubuntu/Debian
2curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
3sudo apt-get install -y nodejs

✅ ตรวจสอบว่าติดตั้งสำเร็จ

เปิด Command Prompt (หรือ Terminal) แล้วพิมพ์:

1node --version

ถ้าขึ้นแบบนี้ = สำเร็จ! ✅

1v20.x.x

ถ้าไม่ขึ้น → ลองติดตั้งใหม่ หรือ Google error ที่เจอ

ขั้นตอนที่ 2: ติดตั้ง OpenClaw

มีหลายวิธี เลือกวิธีที่สะดวกครับ:

วิธีที่ 1: Installer Script (แนะนำ ⭐)

macOS / Linux / WSL2:

1curl -fsSL https://openclaw.ai/install.sh | bash

Windows (PowerShell):

1iwr -useb https://openclaw.ai/install.ps1 | iex

วิธีที่ 2: npm

1npm install -g openclaw@latest

วิธีที่ 3: pnpm

1pnpm add -g openclaw@latest
2pnpm approve-builds -g # ← ต้องรันครั้งแรก

วิธีที่ 4: bun

1bun add -g openclaw@latest

รอ 1-2 นาที… เสร็จแล้ว!

✅ ตรวจสอบว่าติดตั้งสำเร็จ

1openclaw --version

ถ้าขึ้นแบบนี้ = สำเร็จ! ✅

1OpenClaw 2026.x.x

ขั้นตอนที่ 3: สร้าง Telegram Bot

ตอนนี้เรามี OpenClaw แล้ว — ต่อไปสร้าง “หน้าตา” สำหรับคุย!

1. เปิด Telegram

บนมือถือ: แอป Telegram
บนคอม: https://web.telegram.org/

2. ค้นหา BotFather

พิมพ์ในช่องค้นหา: @BotFather

3. เริ่มแชท

คลิก Start หรือพิมพ์ /start

4. สร้าง Bot ใหม่

พิมพ์: /newbot

BotFather จะถาม:

1. ชื่อ Bot: พิมพ์อะไรก็ได้ (เช่น Mick AI)
2. Username: ต้องลงท้ายด้วย bot (เช่น MickAssistantBot)

5. Copy Token

BotFather จะส่ง API Token มาให้ — สำคัญมาก!

1Here is your token:
21234567890:ABCdefGHIjklMNOpqrsTUVwxyz
3
4⚠️ คำเตือน:
5- เก็บไว้เป็นความลับ!
6- อย่าแชร์ให้ใคร!
7- อย่า upload ขึ้น GitHub!
8- อย่าโพสต์ในโซเชียล!

ก็อปปี้เก็บไว้ (วางใน Notepad ก่อนก็ได้)

🔒 ความปลอดภัยของ Token

Token คืออะไร?

คิดเหมือน รหัสผ่าน ของ Bot คุณ — ใครมี Token = ควบคุม Bot ได้!

สิ่งที่ต้องทำ:

✅ เก็บในที่ปลอดภัย (password manager)
✅ ใช้ environment variable
✅ จำกัดสิทธิ์การเข้าถึง

สิ่งที่ห้ามทำ:

❌ อย่า commit ขึ้น Git/GitHub
❌ อย่าแชร์ในแชทสาธารณะ
❌ อย่าแปะในโค้ดที่ share
❌ อย่าส่งให้คนอื่น

ถ้า Token รั่วไหล:

ไปที่ BotFather ทันที
พิมพ์ /revoke เพื่อยกเลิก Token เก่า
สร้าง Bot ใหม่
อัพเดต Token ใน config

ขั้นตอนที่ 4: ตั้งค่า OpenClaw

ตอนนี้มีทุกอย่างแล้ว — มาเชื่อมต่อกัน!

1. สร้างโฟลเดอร์ทำงาน

1mkdir ~/openclaw-workspace
2cd ~/openclaw-workspace

2. สร้างไฟล์ config

1openclaw init

คำสั่งนี้จะสร้างไฟล์ config ให้โดยอัตโนมัติ

3. ติดตั้ง Gateway Daemon

หลังติดตั้งเสร็จ ให้ติดตั้ง Gateway ให้รันอัตโนมัติ:

1openclaw onboard --install-daemon

คำสั่งนี้จะ:

สร้าง workspace ที่ ~/.openclaw/workspace
ติดตั้ง Gateway daemon (launchd/systemd)
เปิด onboarding wizard

4. แก้ไข config

เปิดไฟล์ ~/.openclaw/openclaw.json แล้วเพิ่ม:

1{
2 "telegram": {
3 "botToken": "YOUR_BOT_TOKEN_HERE"
4 }
5}

หรือใช้ Onboarding:

1openclaw onboard

Onboarding จะพาตั้งค่าทีละขั้นตอน!

⚠️ คำเตือน: อย่าแชร์ API Token ของคุณ!

5. เริ่มใช้งาน

1openclaw gateway status # เช็คสถานะ
2openclaw doctor # เช็คปัญหา

ถ้า Gateway ยังไม่รัน:

1openclaw gateway start

ถ้าขึ้นแบบนี้ = สำเร็จ! 🎉

1✅ Gateway running
2✅ Telegram connected
3✅ Ready to chat!

ขั้นตอนที่ 5: เริ่มแชท!

เปิด Telegram
ค้นหา Bot ที่เราสร้าง (เช่น MickAssistantBot)
กด Start
พิมพ์: “สวัสดี” หรือ “ช่วยแนะนำตัวหน่อย”

ถ้า Bot ตอบ = เสร็จสมบูรณ์! 🎉

🎯 แนะนำ 6 Providers + LLMs

Provider คืออะไร?

คิดง่ายๆ คือ “บริษัทที่ให้ใช้ AI” ครับ

OpenClaw เป็นแค่ตัวกลาง — ต้องเชื่อมต่อกับ AI จริงๆ จาก provider

เปรียบเทียบ:

OpenClaw = โทรศัพท์
Provider = เครือข่าย (AIS, True, DTAC)
LLM = คนคุยสาย另一端

ทำไมต้องมี Provider?

เพราะ OpenClaw ไม่สร้าง AI เอง — แต่เชื่อมต่อกับ AI ที่มีอยู่แล้ว

ข้อดี:

✅ เลือกได้ว่าจะใช้ AI ตัวไหน
✅ จ่ายเฉพาะที่ใช้
✅ เปลี่ยนได้ตลอด

1. Bailian (Alibaba Cloud) 🇨🇳 — คุ้มค่าสุด! 💰

LLM: Qwen 3, Qwen 2.5 (72B), Qwen-Max

ราคา: ✅ ฟรี 1,000,000 tokens/เดือน (Qwen 2.5) ¹
Qwen 3: 💰 $0.0005-0.002 / 1K tokens ¹
(ประมาณ 500-1,000 บทความ/เดือน)

จุดเด่น:

🇹🇭 ภาษาไทยดีเยี่ยม
📄 Context 256K tokens
💰 คุ้มค่าสุดสำหรับใช้งานหนัก

เหมาะสำหรับ: ใช้งานทั่วไป, บล็อก, แชท, ใช้งานหนัก

วิธีใช้:

สมัคร: https://bailian.console.aliyun.com/
สร้าง API Key
ใส่ใน config OpenClaw

ตัวอย่าง config (สมมติ):

1providers:
2 bailian:
3 apiKey: "sk-xxxxxxxxxxxxxxxxxxxxxxxx" # ← ใส่ Key ของคุณ
4 # ⚠️ อย่าใช้ Key ตัวอย่างนี้!

💰 ความคุ้มค่า:
ถ้าใช้ GPT-4o กับงานเดียวกัน → เสียเงิน ~$10-30/เดือน
แต่ Qwen 2.5 → ฟรี! (ประหยัด ~300-1,000 บาท/เดือน)

2. Groq 🇺🇸 — เร็วสุด! ⚡

LLM: Llama 3.1 (405B), Llama 3.3 (70B), Mixtral 8x22B

ราคา: ✅ ฟรี (~100 requests/day) ²
Paid: $0.05-$0.79 / 1M tokens ²

จุดเด่น:

⚡ เร็วที่สุด (500+ tokens/วินาที)
🆓 ฟรี tier เพียงพอสำหรับทดสอบ
🔓 Open-source models

เหมาะสำหรับ: ทดลอง, prototype, ใช้งานที่ต้องการความเร็ว

วิธีใช้:

สมัคร: https://console.groq.com/
สร้าง API Key
ใส่ใน config

⚠️ สำคัญ: อย่าแชร์ API Key ของคุณ!

ข้อจำกัด: ฟรีจำกัด/วัน (แต่พอใช้สำหรับทดสอบ)

3. Google 🇺🇸 — ใช้งานทั่วไป 🎯

LLM: Gemini 2.5 Pro, Gemini 2.0 Flash

ราคา: ✅ ฟรี 60 requests/นาที (Gemini 2.0 Flash) ³
Gemini 3 Pro: 💰 $1.25/$10 / 1M tokens ³

จุดเด่น:

📚 Context 1M+ tokens (Gemini 3 Pro)
🔗 ผสานกับ Google services
🇹🇭 รองรับภาษาไทยดี

เหมาะสำหรับ: ทดลอง, ใช้งานทั่วไป

วิธีใช้:

สมัคร: https://aistudio.google.com/
สร้าง API Key
ใส่ใน config

🔒 ความปลอดภัย: เก็บ Key เป็นความลับ!

4. OpenAI 🇺🇸 — คุณภาพสูงสุด 👑

LLM: GPT-4.1, GPT-4o, o3-mini

ราคา: ❌ $0.002-0.015 / 1K tokens ⁴
GPT-4.1: $2/$8 / 1M tokens ⁴
GPT-4o-mini: $0.15/$0.60 / 1M tokens (ถูกสุด!) ⁴

จุดเด่น:

🧠 ฉลาดที่สุด
🛠️ ทำงานหลากหลาย
📚 เอกสารครบ

เหมาะสำหรับ: งานที่ต้องการความแม่นยำสูง, งานสำคัญ

วิธีใช้:

สมัคร: https://platform.openai.com/
เติมเงิน ($5 ขั้นต่ำ)
สร้าง API Key
ใส่ใน config

⚠️ คำเตือน: API Key OpenAI มีมูลค่า — ระวังการรั่วไหล!

ราคาตัวอย่าง:

บทความ 1,000 คำ → ~$0.03-0.05 (~1-2 บาท)
คุ้มค่าสำหรับงานสำคัญ!

5. Anthropic 🇺🇸 — เขียนบทความ ✍️

LLM: Claude Sonnet 4.6, Claude Opus 4.6

ราคา:

Claude Sonnet 4.6: $3/$15 / 1M tokens (คุ้มค่าสุด!) ⁵
Claude Opus 4.6: $15/$75 / 1M tokens (คุณภาพสูงสุด) ⁵

จุดเด่น:

📝 เขียนบทความธรรมชาติ
🧩 Tool calling ดีที่สุด
🔒 ปลอดภัย

เหมาะสำหรับ: เขียนคอนเทนต์, สรุปเอกสารยาว

วิธีใช้:

สมัคร: https://console.anthropic.com/
สร้าง API Key
ใส่ใน config

🔒 สำคัญ: อย่า commit API Key ขึ้น Git!

ข้อดี: ถูกกว่า GPT-4 แต่เขียนบทความดีกว่า!

6. Ollama 🏠 — Local/ส่วนตัว 🔒

LLM: Llama 3.1 (70B), Mistral Large, Gemma 2

ราคา: ✅ ฟรี 100%

จุดเด่น:

💻 รันบนเครื่องตัวเอง
🔒 ไม่ต้องส่งข้อมูลออก
∞ ไม่จำกัด usage

เหมาะสำหรับ: ข้อมูลลับ, ใช้งานหนัก, ส่วนตัว

วิธีติดตั้ง:

 1# 1. ติดตั้ง Ollama
 2curl -fsSL https://ollama.com/install.sh | sh
 3
 4# 2. ดาวน์โหลดโมเดล
 5ollama run llama3
 6
 7# 3. เชื่อมต่อ OpenClaw
 8# เพิ่มใน config:
 9ollama:
10 enabled: true
11 model: llama3

ข้อจำกัด: ต้องมี RAM 8GB+ และ CPU แรงหน่อย

จุดเด่น:

💻 รันบนเครื่องตัวเอง
🔒 ไม่ต้องส่งข้อมูลออก
∞ ไม่จำกัด usage
💰 ฟรี 100%

📊 ตารางสรุป

#	Provider	LLM	ราคา (ต่อ 1M tokens)	เหมาะกับ
1	Bailian 🇨🇳	Qwen 2.5	✅ ฟรี 1M tokens/เดือน	คุ้มค่าสุด
2	Groq 🇺🇸	Llama 3.3	✅ ฟรี (~100/day)	เร็วสุด ⚡
3	Google 🇺🇸	Gemini 3 Flash	$0.075/$0.30	เร็ว/ประหยัด
4	Google 🇺🇸	Gemini 3 Pro	$1.25/$10	วิเคราะห์เอกสาร 📚
5	OpenAI 🇺🇸	GPT-4o-mini	$0.15/$0.60	ถูกสุด 💰
6	OpenAI 🇺🇸	GPT-4.1	$2/$8	งานคุณภาพ
7	Anthropic 🇺🇸	Claude Sonnet 4.6	$3/$15	แนะนำ! ⭐
8	Anthropic 🇺🇸	Claude Opus 4.6	$15/$75	คุณภาพสูงสุด 👑
9	Ollama 🏠	Llama 3.3 70B	✅ ฟรี 100%	ส่วนตัว/Local 🔒

💡 คำแนะนำการเลือก

🎯 สำหรับมือใหม่:

1🎯 เริ่มที่: Bailian Qwen 2.5 (ฟรี 1M tokens)
2💰 งบจำกัด: GPT-4o-mini ($0.15/1M)
3⚡ ต้องการความเร็ว: Groq (500+ tokens/วินาที)
4⭐ คุ้มค่าสุด: Claude Sonnet 4.6 ($3/1M)

💼 สำหรับใช้งานจริง:

1📝 เขียนบทความ: Claude Sonnet 4.6 ($3/$15)
2💻 เขียนโค้ด: Claude Opus 4.6 ($15/$75)
3📚 วิเคราะห์เอกสาร: Gemini 3 Pro ($1.25/$10)
4🔒 ข้อมูลลับ: Ollama (Local, ฟรี)
5⚡ งานเร็ว: Gemini 3 Flash ($0.075/$0.30)

💰 สำหรับประหยัด:

1✅ ฟรี 100%: Ollama (Local)
2✅ ฟรี quota: Bailian (1M tokens/เดือน)
3✅ ถูกสุด: GPT-4o-mini ($0.15/$0.60)
4✅ คุ้มค่า: Claude Sonnet 4.6 ($3/$15)
5✅ เร็ว/ถูก: Gemini 3 Flash ($0.075/$0.30)

💰 เปรียบเทียบราคา (2026)

ถูกสุด → แพงสุด:

อันดับ	Model	ราคา Input/Output	ต่อเดือน*
🥇	Ollama (Local)	ฟรี	ฟรี
🥈	Bailian Qwen 2.5	ฟรี 1M tokens	ฟรี
🥉	GPT-4o-mini	$0.15/$0.60	~$3-10
4	Gemini 3 Flash	$0.075/$0.30	~$5-15
5	Claude Sonnet 4.6	$3/$15	~$30-100
6	Gemini 3 Pro	$1.25/$10	~$50-150
7	Claude Opus 4.6	$15/$75	~$150-500

* ประมาณการสำหรับใช้งานทั่วไป (10-50 บทความ/เดือน)

สรุป:

 1💰 งบจำกัด:
 2 → Bailian Qwen 2.5 (ฟรี 1M tokens)
 3 → GPT-4o-mini ($0.15/1M)
 4
 5⭐ คุ้มค่าสุด:
 6 → Claude Sonnet 4.6 ($3/$15)
 7
 8👑 คุณภาพสูงสุด:
 9 → Claude Opus 4.6 ($15/$75)
10
11🔒 ส่วนตัว:
12 → Ollama (Local, ฟรี)

🧪 ทดสอบใช้งาน

เช็คการติดตั้ง:

1openclaw --version # เช็ค CLI
2openclaw doctor # เช็คปัญหา
3openclaw gateway status # เช็ค Gateway

คำสั่งแรกที่ควรลอง:

1"สวัสดี"
2"ช่วยแนะนำตัวหน่อย"
3"มีอะไรทำได้บ้าง"

คำสั่งที่ใช้บ่อย:

1"ค้นหาข้อมูลเรื่อง..."
2"เขียนบทความเกี่ยวกับ..."
3"ช่วยสรุปเอกสารนี้..."
4"เตือนฉันเรื่อง... เวลา..."
5"หาไฟล์ชื่อ..."

🔒 ความปลอดภัย — สิ่งที่ต้องรู้

API Keys และ Tokens

สิ่งที่ต้องจำ:

🚨 API Keys และ Tokens คือรหัสผ่าน!

อย่าแชร์ให้ใคร

อย่า upload ขึ้น GitHub

อย่าโพสต์ในโซเชียล

อย่าส่งในแชทสาธารณะ

วิธีเก็บที่ปลอดภัย:

ใช้ Environment Variables (แนะนำ):

1export OPENCLAW_TELEGRAM_TOKEN="your-token-here"
2export BAILIAN_API_KEY="your-key-here"

ใช้ Password Manager:

1Password
Bitwarden (ฟรี)
KeePass

ไฟล์แยกต่างหาก (ไม่ commit):

1# config-secret.yaml (อย่า commit!)
2telegram:
3 botToken: "your-token"

ถ้า Key รั่วไหล:

ยกเลิก Key ทันที (revoke)
สร้าง Key ใหม่
อัพเดต config
ตรวจสอบการใช้งานผิดปกติ

ตัวอย่างการใช้งานจริง:

 1คุณ: "มิก ช่วยค้นหาข้อมูลเรื่อง AI ล่าสุดให้หน่อย"
 2มิก: [web_search]
 3มิก: "เจอข่าวล่าสุดเมื่อวานนี้: OpenAI เปิดตัว GPT-5..."
 4
 5คุณ: "มิก เขียนบทความเรื่อง AI สำหรับมือใหม่"
 6มิก: [เขียนบทความ]
 7มิก: "เขียนเสร็จครับ! ความยาว 1,500 คำ อยากแก้ตรงไหนบอกได้เลย"
 8
 9คุณ: "มิก เตือนฉันประชุมพรุ่งนี้ 10 โมง"
10มิก: [สร้าง reminder]
11มิก: "ตั้งเตือนแล้วครับ! จะเตือนพรุ่งนี้ 09:30"

❓ Troubleshooting

ปัญหา: Bot ไม่ตอบ

วิธีแก้:

เช็ค Token ถูกต้องไหม
เช็ค Gateway รันอยู่ไหม: openclaw gateway status
Restart: openclaw gateway restart

ปัญหา: ติดตั้ง Node.js ไม่ได้

วิธีแก้:

ใช้ installer script (แนะนำ)
ดาวน์โหลดจาก https://nodejs.org/
ใช้ Node 24 (แนะนำ) หรือ 22.14+

ปัญหา: `openclaw` not found

วิธีแก้:

 1# เช็ค Node ติดตั้งไหม
 2node -v
 3
 4# เช็ค global packages
 5npm prefix -g
 6
 7# เช็ค PATH
 8echo "$PATH"
 9
10# ถ้า $(npm prefix -g)/bin ไม่มีใน PATH
11export PATH="$(npm prefix -g)/bin:$PATH"

เพิ่มใน ~/.zshrc หรือ ~/.bashrc:

1export PATH="$(npm prefix -g)/bin:$PATH"

ปัญหา: sharp build errors (npm)

วิธีแก้:

1SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm install -g openclaw@latest

🎉 สรุป

สิ่งที่ทำเสร็จวันนี้:

✅ รู้ว่า OpenClaw คืออะไร
✅ ติดตั้ง Node.js
✅ ติดตั้ง OpenClaw
✅ สร้าง Telegram Bot
✅ ตั้งค่า config
✅ รู้จัก 6 Providers + LLMs

ขั้นตอนต่อไป:

เลือก Provider → แนะนำ Bailian (ฟรี)
สมัคร + สร้าง API Key
ใส่ใน config
เริ่มใช้งาน!

🚀 พร้อมเริ่มต้นหรือยัง?

ลองติดตั้งดูครับ!

1. ติดตั้ง OpenClaw (วิธีแนะนำ):

macOS / Linux / WSL2:

1curl -fsSL https://openclaw.ai/install.sh | bash

Windows (PowerShell):

1iwr -useb https://openclaw.ai/install.ps1 | iex

2. ติดตั้ง Gateway Daemon:

1openclaw onboard --install-daemon

3. สร้าง Bot:

@BotFather บน Telegram

4. เลือก Provider:

แนะนำ Bailian (ฟรี 1M tokens) หรือ Claude Sonnet 4.6 (คุ้มค่า)

5. เริ่มคุย:

1"มิก ช่วยแนะนำตัวหน่อย"

📚 เรียนรู้เพิ่มเติม:

แหล่ง	ลิงก์
Documentation	https://docs.openclaw.ai
Installation Guide	https://docs.openclaw.ai/install
Discord Community	https://discord.gg/clawd
GitHub	https://github.com/openclaw/openclaw
Skill Hub	https://clawhub.ai
Bailian Console	https://bailian.console.aliyun.com/
Groq Console	https://console.groq.com/

💬 มีคำถาม?

ถ้าติดตรงไหน หรืออยากได้ความช่วยเหลือ:

ถาม Mick ได้เลย (ถ้าติดตั้งแล้ว)
เข้า Discord Community
อ่าน Documentation

สุดท้ายนี้…

เทคโนโลยีมีไว้เพื่อทำให้ชีวิตง่ายขึ้น ไม่ใช่ทำให้ซับซ้อนขึ้น

OpenClaw ไม่ใช่แค่ tool — แต่เป็น ผู้ช่วยส่วนตัว ที่ช่วยคุณทำงานซ้ำๆ เพื่อให้คุณมีเวลาไปทำสิ่งที่สำคัญจริงๆ

แล้วคุณล่ะ? พร้อมหรือยังที่จะมี AI Assistant ส่วนตัว? 🚀

บทความโดย เหน่ง (Nueng)
Community Development Officer (นักวิชาการพัฒนาชุมชน)
Community Development Department, Ministry of Interior (กรมการพัฒนาชุมชน กระทรวงมหาดไทย)

อัพเดทล่าสุด: 2026-04-06

📚 อ้างอิง

หมายเหตุ: ราคาอาจมีการเปลี่ยนแปลง — ตรวจสอบกับผู้ให้บริการก่อนใช้งานจริง

Bailian (Alibaba Cloud) — 阿里云百炼模型价格, Qwen API Pricing 2026 ↩︎ ↩︎
Groq — Groq Pricing, Groq API Pricing 2026, Groq Free Tier Limits ↩︎ ↩︎
Google — Google AI Studio Pricing, Gemini Models 2026 ↩︎ ↩︎
OpenAI — OpenAI API Pricing, GPT-4.1 Pricing 2026, Best Models for OpenClaw ↩︎ ↩︎ ↩︎
Anthropic — Anthropic Console, Best Models for OpenClaw 2026 ↩︎ ↩︎

Tutorial on Code & Community

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

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

📋 สารบัญ

📖 ข้อมูลเบื้องต้น

Hugo Stack คืออะไร?

ฟีเจอร์หลัก:

🎨 การใช้ธีม Stack

1. โครงสร้างโฟลเดอร์

2. การปรับแต่งสี (Color Customization)

3. การเพิ่ม Font (Custom Fonts)

4. การปรับ Layout

5. การปรับ Avatar และ Emoji

6. การปรับ Article Layout

7. การปรับ Image Processing

8. ตัวอย่างการตั้งค่าแบบเต็ม

🚀 การติดตั้ง

วิธีที่ 1: ใช้ Starter Template (แนะนำ)

วิธีที่ 2: Hugo Module

วิธีที่ 3: Git Submodule

⚙️ การตั้งค่า (Configuration)

1. Sidebar (แถบด้านข้าง)

2. Article (บทความ)

3. Widgets (วิดเจ็ตด้านขวา)

4. Menu (เมนู)

✍️ การเขียนบทความ

โครงสร้างไฟล์ (Page Bundles)

Front Matter

การใส่รูป

🎨 ฟีเจอร์พิเศษ

1. Dark Mode

2. Local Search

3. Archives

4. Math Typesetting (KaTeX)

5. Mermaid Diagrams

🔧 การปรับแต่งขั้นสูง

1. Custom CSS

2. Custom Icons

3. Override Theme Files

4. Multilingual

📊 สรุปการตั้งค่าที่สำคัญ

hugo.toml (ตัวอย่างเต็ม)

🔗 ลิงก์ที่เป็นประโยชน์

⚠️ Troubleshooting

ปัญหาที่พบบ่อยและวิธีแก้

1. รูปไม่แสดง

2. Dark Mode ไม่ทำงาน

3. Search ไม่ทำงาน

4. Menu ไม่ Highlight

5. Build ล้มเหลว

6. CSS ส่วนตัวไม่ทำงาน

🚀 Deployment

1. GitHub Pages (แนะนำ)

2. Netlify

3. Vercel

⚡ Performance Optimization

1. Image Optimization

2. Minify

3. Lazy Loading

4. Cache

5. CDN

🔍 SEO & Analytics

1. Meta Tags

2. Google Analytics

3. Google Search Console

4. Schema.org

📊 สรุป

💡 เคล็ดลับ

🔗 ลิงก์ที่เป็นประโยชน์

เปิดโลก AI Assistant: คู่มือติดตั้ง OpenClaw สำหรับมือใหม่ (ฉบับไม่มีพื้นฐานก็ทำได้)

👋 บทนำ — OpenClaw คืออะไร?

OpenClaw คืออะไร?

ทำไมต้องใช้ OpenClaw?

ต้องมีความรู้ก่อนไหม?

📦 เตรียมตัวก่อนติดตั้ง

ข้อกำหนดระบบ

ต้องมีอะไรบ้าง?

ใช้เวลาเท่าไหร่?

🚀 ติดตั้งทีละขั้นตอน

ขั้นตอนที่ 1: ติดตั้ง Node.js

ปัญหา: `openclaw` not found