tblf-web

TBLF Knowledge Hub — เว็บไซต์ฐานองค์ความรู้ (Custom Design)

เว็บไซต์ Static Site สำหรับโครงการการวิจัยและพัฒนากรอบแนวคิดภาวะผู้นำแบบไทยพอดี (TBLF) สร้างด้วย Hugo + Layout ที่ออกแบบเองทั้งหมด (ไม่ใช้ธีมสำเร็จรูป ไม่มี dependency ภายนอก)

รูปแบบ: เว็บไซต์ศูนย์ความรู้สมัยใหม่ — Landing Page เต็มรูปแบบ, เมนูด้านบน, การ์ด, ไทม์ไลน์, FAQ แบบ accordion, การ์ดดาวน์โหลด — ไม่ใช่รูปแบบหนังสือ/ตำราออนไลน์

1. การติดตั้งและรันบนเครื่อง

ติดตั้ง Hugo (Extended edition, v0.146 ขึ้นไป — ทดสอบแล้วกับ v0.158.0)

ตรวจสอบ: hugo version

รันเซิร์ฟเวอร์ทดสอบ (ไม่ต้องติดตั้งธีมใด ๆ)

cd tblf-site
hugo server -D

เปิดเบราว์เซอร์ที่ http://localhost:1313

Build เว็บไซต์จริง

hugo --minify

ไฟล์เว็บไซต์ทั้งหมดจะอยู่ในโฟลเดอร์ public/ พร้อมนำไปวางบนเซิร์ฟเวอร์ใดก็ได้

2. การ Deploy บนโดเมนจริง

ทางเลือก A — Cloudflare Pages (แนะนำ: ฟรี, เร็ว, CDN ทั่วโลก)

  1. Push โค้ดขึ้น GitHub
  2. Cloudflare Pages → Create Project → เชื่อม repo
  3. Build command: hugo --minify / Output: public
  4. Environment variable: HUGO_VERSION = 0.158.0
  5. Custom domains → เพิ่มโดเมนจริง เช่น tblf.ac.th แล้วตั้งค่า DNS ตามที่ระบบแนะนำ

ทางเลือก B — Netlify

Build command: hugo --minify / Publish directory: public → Add custom domain → ตั้งค่า DNS

ทางเลือก C — GitHub Pages

ใช้ GitHub Actions workflow มาตรฐานของ Hugo แล้วตั้ง custom domain ใน Settings → Pages

ก่อน deploy ทุกครั้ง

3. โครงสร้างโปรเจกต์

tblf-site/
├── hugo.toml                  # ค่าตั้งค่า + เมนูหลัก (แก้ baseURL ที่นี่)
├── assets/css/main.css        # ดีไซน์ทั้งหมด (สี ฟอนต์ layout — แก้ธีมสีที่ :root)
├── layouts/
│   ├── index.html             # หน้าแรก (Landing Page) — แก้ข้อความหน้าแรกที่นี่
│   ├── _default/baseof.html   # โครง HTML หลัก
│   ├── _default/single.html   # หน้าเนื้อหาทั่วไป (page hero + prose)
│   ├── _default/list.html     # หน้ารายการ (ข่าว/หมวดหมู่)
│   ├── news/single.html       # หน้าข่าวรายชิ้น
│   ├── partials/              # head / header (เมนูบน) / footer
│   └── shortcodes/            # hint, faq, downloads, dl
├── content/
│   ├── about.md               # เกี่ยวกับโครงการ
│   ├── framework.md           # กรอบแนวคิด TBLF/TBLT
│   ├── research.md            # การวิจัย 10 ระยะ
│   ├── outputs.md             # ผลผลิต + ศูนย์ดาวน์โหลด
│   ├── resources.md           # สื่อการเรียนรู้และเครื่องมือ (หน้ารวม)
│   ├── learn.md               # เข้าใจ TBLF ฉบับเข้าใจง่าย (/resources/learn/)
│   ├── decision-card.md       # TBLF Decision Card (/resources/decision-card/)
│   ├── casebook.md            # TBLF Casebook v0.1 (/resources/casebook/)
│   ├── faq.md / glossary.md / contact.md
│   └── news/                  # ข่าว ตั้งชื่อ YYYY-MM-slug.md
└── static/
    ├── downloads/             # วางไฟล์ PDF 4 ฉบับหลัก → URL: /downloads/ชื่อไฟล์.pdf
    │                          # (รวม tblf-brs01-v0-3.pdf — Master Manuscript v0.3)
    └── images/

4. วิธีแก้ไข/เพิ่มเนื้อหา

แก้ข้อความ

เพิ่มข่าว

สร้างไฟล์ใน content/news/ เช่น 2026-08-workshop.md:

---
title: "ชื่อข่าว"
date: 2026-08-01
categories: ["กิจกรรม"]
tags: ["อบรม"]
---
เนื้อหาข่าว...

ข่าว 3 รายการล่าสุดจะแสดงบนหน้าแรกอัตโนมัติ

Shortcodes ที่ใช้ได้ในทุกหน้า

 ข้อความกล่องสีฟ้า 
 ข้อความกล่องสีเหลือง 

 คำตอบ (markdown ได้)

เพิ่มเอกสารดาวน์โหลด

  1. วางไฟล์ PDF ใน static/downloads/
  2. เพิ่มบรรทัด `` ในส่วนดาวน์โหลดของ content/outputs.md

ปรับธีมสี/ฟอนต์

แก้ตัวแปรที่ :root ใน assets/css/main.css — สีหลัก (--indigo-*), สีเน้น (--gold), ฟอนต์ (--font-display, --font-body)

5. แนวทางดูแลระยะยาว