คู่มือการใช้งาน (Documentation)

เริ่มต้นใช้งาน

GenWebBlog เป็นซอฟต์แวร์ที่ช่วยสร้างเว็บไซต์แบบ Static โดยอัตโนมัติ รองรับการสร้างเนื้อหาสไตล์ Blog, Profile และ Landing Page เน้น SEO และสามารถ Deploy ได้ง่ายบน Cloudflare Pages

การติดตั้ง

1. ดาวน์โหลดและติดตั้ง GenWebBlog

เลือกดาวน์โหลดไฟล์ติดตั้งตามระบบปฏิบัติการของคุณ ได้ใน Discord

หลังจากดาวน์โหลดแล้ว ให้แตกไฟล์และเปิดโฟลเดอร์ด้วย Visual Studio Code(เวอร์ชันล่าสุดมีให้ดาวน์โหลดใน Discord หลังชำระเงินเท่านั้น)

2. ติดตั้ง Visual Studio Code

ติดตั้ง Visual Studio Code
หากยังไม่มี VS Code สามารถติดตั้งได้จาก Visual Studio Code
ติดตั้งส่วนขยาย Md Editor
หลังติดตั้ง VS Code เรียบร้อยแล้ว ให้ติดตั้ง Extension สำหรับเขียน Markdown ที่ชื่อว่า Md Editor โดย seepine ซึ่งให้ประสบการณ์คล้ายกับ Typora
ติดตั้งได้ที่: Md Editor - VS Code Marketplace

3. ใส่ Token

คุณต้องชำระเงินก่อน แล้วเราจะส่ง Token ไปให้ในอีเมลของคุณ จากนั้นให้นำ Token ไปใส่ในไฟล์ app.toml

🔒 ชำระเงินตอนนี้

[app_info]
app_token = "ใส่โทเคนของคุณที่นี่"

4. ทดสอบการทำงาน

เปิด Terminal ภายใน VS Code และรันคำสั่งเพื่อเริ่มใช้งาน:

./genwebblog

ตรวจสอบโครงสร้าง HTML ให้เป็นไปตามหลัก SEO:

./genwebblog seo

เพิ่มโลโก้เว็บไซต์

ใช้คำสั่งด้านล่างเพื่อสร้างไฟล์ไอคอนมาตรฐานต่าง ๆ สำหรับเว็บไซต์โดยอัตโนมัติ:

./genwebblog logo logo.png

คำสั่งนี้จะสร้างไฟล์ต่อไปนี้ไว้ในโฟลเดอร์ public:

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico
favicon.svg
mask-icon.svg

ปรับขนาดรูปภาพเอง

ใช้คำสั่งด้านล่างเพื่อปรับขนาดรูปภาพที่มีอยู่ในโฟลเดอร์ public:

./genwebblog resize path/to/image.jpg

หมายเหตุ: ไม่ต้องใส่คำว่า public ใน path เมื่ออ้างอิงไฟล์ใน HTML

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

project/
├── build/   # ไฟล์ที่ถูก build และพร้อมใช้งาน
├── contents/# โฟลเดอร์เก็บโพสต์หรือบทความ
│   ├── .md  # ไฟล์บทความในรูปแบบ Markdown
│   ├── index.yml         # ข้อมูลเพิ่มเติมที่เกี่ยวข้องกับโพสต์
│   ├── about.yml
│   ├── contact.yml
│   ├── faq.yml
│   ├── policy.yml
│   └── terms.yml
│
├── public/  # ไฟล์ที่สามารถเข้าถึงได้จากภายนอก
│   ├── _system_/        # ระบบไฟล์ภายใน
│   │   ├── fonts/       # ไฟล์ฟอนต์
│   │   ├── scripts/     # สคริปต์สำหรับการทำงานของเว็บไซต์
│   │   └── styles/      # สไตล์ของเว็บไซต์
│   ├── images/          # ไฟล์รูปภาพ
│   ├── javascripts/     # ไฟล์สคริปต์ JavaScript
│   ├── robots.txt       # ไฟล์สำหรับกำหนดการเข้าถึงของบอท
│   └── site.webmanifest # ไฟล์ Web App Manifest
│
├── source/  # โฟลเดอร์สำหรับไฟล์ต้นฉบับของเว็บไซต์
│   ├── templates/       # ไฟล์เลย์เอาต์สำหรับการจัดหน้า
│   ├── styles/          # ไฟล์สไตล์ของเว็บไซต์
│   └── tailwind.config.toml # ตั้งค่า TailwindCSS
│
├── README.md# ไฟล์อธิบายโปรเจกต์
└── app.toml # ตั้งค่าข้อมูลของโปรเจกต์

การจัดการบทความ

ไปที่โฟลเดอร์ contents/ และสร้างไฟล์ .md เช่น 2025-02-11-ชื่อโพสต์.md
ใช้ Markdown ในการเขียนบทความ เรียนรู้ Markdown
รันเพื่อทดสอบ:
```
./genwebblog
```

📌 หมายเหตุ: คุณสามารถตั้งค่าหน้าต่างๆ ให้แสดงหรือซ่อนได้ตามต้องการ

ตัวอย่างการตั้งค่าในไฟล์ .md

---
layout: "post" # ค่าเริ่มต้นเป็น "post" สามารถเปลี่ยนได้
title: "My Blog" # ชื่อโพสต์
description: "This is my blog" # คำอธิบายโพสต์
author: "John Doe" # ชื่อผู้เขียน
image: "images/default.jpg" # ไฟล์รูปที่เก็บในโฟลเดอร์ public
draft: false  # false = ไม่แสดงหน้า, true = แสดงหน้า (ค่าเริ่มต้นคือ true)
keywords: 
  - "tech"
  - "web"
  - "coding"
link: "..." # Option
link_name: "..." #Option
---

ตัวอย่างการตั้งค่าในไฟล์ .yml

lang: "th" # ภาษาของโพสต์ (เช่น "th" สำหรับภาษาไทย)
layout: "default" # Template layout เช่น "articles"
title: "My Blog" # ชื่อบล็อก ใช้เป็นหมวดหมู่ของโพสต์
description: "This is my blog" # คำอธิบายโพสต์
author: "John Doe" # ชื่อผู้เขียน
image: "images/default.jpg" # ไฟล์รูปที่เก็บในโฟลเดอร์ public
link_text: "Read More" # ข้อความลิงก์
draft: false  # false = แสดงโพสต์, true = ไม่แสดงโพสต์
keywords:
  - "tech"
  - "web"
  - "coding"
date_published: 2025-01-29T00:40:04-07:00 # วันที่เผยแพร่โพสต์
date_modified: 2025-01-29T00:40:04-07:00 # วันที่แก้ไขล่าสุด

📌 การกำหนด layout: สามารถเพิ่ม layout ใหม่ได้โดยไปที่โฟลเดอร์ templates/ และสร้างไฟล์ layout.html แล้วใช้ชื่อ layout ใส่ในไฟล์ที่ต้องการ.

การปรับแต่งการออกแบบ

คุณสามารถปรับแต่งสไตล์ของเว็บไซต์ได้โดยการแก้ไขไฟล์ใน source/styles/* และตั้งค่าธีมและองค์ประกอบต่างๆ ผ่านไฟล์ tailwind.config.toml เพื่อปรับแต่งเว็บไซต์ให้ตรงกับความต้องการของคุณ

ไฟล์ที่ใช้ในการปรับแต่ง

app.scss : ปรับแต่งสไตล์ของหน้าเว็บทั้งหมด
fonts.scss : ปรับแต่งฟอนต์และขนาดของตัวอักษร
noscript.scss : ใช้เมื่อ Browser ไม่รองรับ JavaScript

ข้อมูลที่สามารถเรียกใช้ได้ทุกหน้า HTML

templates/*.html : ปรับแต่งไฟล์ html ด้วย Class Tailwind CSS is

ในระบบของเรา คุณสามารถใช้ข้อมูลจากโครงสร้างด้านล่างนี้ เพื่อดึงข้อมูลต่างๆ ไปแสดงบนทุกหน้าเว็บไซต์ได้ เช่น ชื่อแอป, คำอธิบาย, ลิงก์โซเชียลมีเดีย, และอื่นๆ ที่ถูกกำหนดไว้ใน

app_name: "My Awesome App", // ชื่อแอป
app_version: "1.0.0",  // คำอธิบายเวอร์ชั่น
app_description: "A great app for awesome people",  // คำอธิบายแอป
app_phone: "123-456-7890",                // หมายเลขโทรศัพท์
app_email: "[email protected]",      // อีเมล
app_domain: "www.genwebblog.com",         // โดเมนของแอป
app_author: "John Doe",                   // ผู้พัฒนาแอป
app_facebook_link: "https://facebook.com/genwebblog",  // ลิงก์ไปยัง Facebook
app_instagram_link: "https://instagram.com/genwebblog", // ลิงก์ไปยัง Instagram
app_line_link: "https://line.me/genwebblog", // ลิงก์ไปยัง Line
app_youtube_link: "https://youtube.com/genwebblog", // ลิงก์ไปยัง YouTube
app_github_link: "https://github.com/genwebblog", // ลิงก์ไปยัง GitHub
facebook_id: "genwebblog123",               // Facebook ID สำหรับการเชื่อมต่อ API
facebook_app_id: "1234567890",           // Facebook App ID สำหรับการเชื่อมต่อ API
twitter_site: "@genwebblog",                // Twitter site handle
twitter_creator: "@genwebblogcreator",      // Twitter creator handle
lang: "en",                              // ภาษา (เช่น 'en', 'th')
title: "Home - Awesome App",              // ชื่อเรื่องของหน้าเว็บหรือแอป
description: "Welcome to Awesome App",    // คำอธิบายของแอป/หน้าเว็บสำหรับ SEO
path: "/home",                           // พาธหรือ URL ของแอป/หน้าเว็บ
url: ""https://example.com/home",       // พาธหรือ URL เต็มของแอป/หน้าเว็บ
image: "https://example.com/logo.png",    // รูปภาพ (URL หรือ path ของไฟล์)
keywords: "awesome, app, technology, programming", // คีย์เวิร์ดสำหรับ SEO
site_root: "/..",       // URL หรือหน้าแรกของเว็บไซต์
article: {
  layout: "single-column",                // รูปแบบของ article
  title: "Tech Blog",                     // ชื่อเรื่องของ article
  description: "Tech and programming article", // คำอธิบายของ article
  image: "https://example.com/article-image.png", // รูปภาพของ article
  author: "John Doe",                     // ผู้เขียน article
  prefix: "tech",                         // Prefix ของ article (Path ที่จะถูกเพิ่ม '/' ในตอน serialize)
  app_domain: "www.genwebblog.com",       // โดเมนของแอปที่ใช้สำหรับ article
  posts: [],                              // อาร์เรย์ของ Posts ที่เกี่ยวข้องกับ article
  link_text: "Read More",                 // ข้อความลิงก์
  keywords: ["tech", "programming", "coding"],  // คีย์เวิร์ดของ article
  author_url: "https://github.com/boychawin", // URL ของผู้เขียน article
  lang: "en"                              // ภาษา article
},
articles: [
  {
    link_text: "Tech Posts",              // ข้อความลิงก์ของบล็อก
    path: "tech",                         // พาธที่เชื่อมโยงไปยังไฟล์
    post_count: 10                        // จำนวนโพสต์ในบล็อก
  }
],
post: {
  filename: "2025-02-11-awesome-post.md", // ชื่อไฟล์ของ Post
  layout: "post",                         // รูปแบบของ Post
  title: "Awesome Post",                  // ชื่อเรื่องของ Post
  author: "John Doe",                     // ผู้เขียน Post
  year: 2025,                             // ปีที่เผยแพร่ Post
  show_year: true,                        // แสดงปีที่เผยแพร่หรือไม่
  month: 2,                               // เดือนที่เผยแพร่ Post
  day: 11,                                // วันที่เผยแพร่ Post
  contents: "This is an awesome post!",    // เนื้อหาของ Post
  app_domain: "www.genwebblog.com",       // โดเมนของ Post
  url: "/2025/02/11/awesome-post",        // URL ของ Post
  published: "2025-02-11",                // วันที่เผยแพร่ Post
  updated: "2025-02-12",                  // วันที่อัปเดต Post
  draft: true,                          // สถานะการเผยแพร่ Post
  description: "An awesome post on tech", // คำอธิบายของ Post
  keywords: "tech, programming, awesome", // คีย์เวิร์ดของ Post
  root: "https://www.genwebblog.com",     // URL หรือหน้าแรกของ Post
  image: "https://example.com/post-image.png", // รูปภาพของ Post
  image_resize: "https://example.com/resized-image.png" // การปรับขนาดรูปภาพของ Post
  link: "..." # Option
  link_name: "..." #Option
}

คำแนะนำการใช้งาน

คุณสามารถนำข้อมูลจากโครงสร้าง ไปใช้งานใน HTML ได้ง่ายๆ เช่น การแสดงชื่อแอป โดยการใช้ app_name ในการดึงข้อมูลจาก app_name หรือใช้ข้อมูลอื่นๆ ในการปรับแต่งหน้าเว็บไซต์ตามความต้องการของคุณ

การปรับแต่งคลาสด้วย Tailwind CSS

คุณสามารถปรับแต่งคลาสต่างๆ ใน HTML ด้วยการใช้ Tailwind CSS ซึ่งเป็นเฟรมเวิร์ก CSS ที่ช่วยให้การปรับแต่งสไตล์ในเว็บไซต์ทำได้ง่ายและเร็วมากขึ้นโดยไม่ต้องเขียน CSS แบบดั้งเดิม

การเผยแพร่เว็บไซต์ (Deploy)

1. เชื่อมต่อกับ GitHub

ในขั้นตอนแรก คุณต้องสมัครใช้งาน GitHub ซึ่งเป็นแพลตฟอร์มที่ใช้เก็บโค้ดของโปรเจกต์ หลังจากนั้นคุณต้องสร้าง Personal Access Token ซึ่งเป็นรหัสที่ใช้ในการยืนยันตัวตนเมื่อเชื่อมต่อกับ GitHub จากนั้นให้เพิ่ม Token ที่ได้ลงในไฟล์ app.toml

[deploy_github]
token = "ใส่โทเคนของคุณที่นี่"
user = "ชื่อผู้ใช้ GitHub ของคุณ"
repo_name = "ชื่อ Repository ของคุณ"
branch = "main"

วิธีสร้าง Personal Access Token บน GitHub:

ไปที่ GitHub Personal Access Tokens
คลิก "Generate new token" และเลือกสิทธิ์ที่ต้องการ
คัดลอก Token ที่ได้และเก็บไว้ในที่ปลอดภัย

2. เชื่อมต่อกับ Cloudflare

Cloudflare เป็นบริการที่ช่วยเพิ่มความปลอดภัยและการจัดการโดเมนให้กับเว็บไซต์ของคุณ ในขั้นตอนนี้ คุณต้องสมัครบัญชี Cloudflare และสร้าง API Token เพื่อเชื่อมต่อกับโปรเจกต์ของคุณ หลังจากนั้นให้เพิ่ม Token ที่ได้ลงในไฟล์ app.toml

[deploy_cloudflare]
api_token = "ใส่โทเคน API ของคุณที่นี่"
account_id = "หมายเลขบัญชีของคุณ"
project_name = "ชื่อโปรเจกต์ของคุณ"

วิธีสร้าง API Token บน Cloudflare:

ไปที่ Cloudflare API Tokens
เลือก "Create Token" และเลือกสิทธิ์ที่ต้องการ
คัดลอก Token ที่ได้และเก็บไว้ในที่ปลอดภัย

3. เชื่อมต่อ Domain (ถ้ามี)

หากคุณมีโดเมนที่ต้องการใช้งาน คุณสามารถเชื่อมต่อโดเมนนี้กับเว็บไซต์ได้ โดยการตั้งค่า DNS ให้ถูกต้อง และเพิ่มชื่อโดเมนในไฟล์ app.toml

ขั้นตอนการตั้งค่า DNS

ก่อนที่คุณจะเพิ่มโดเมนในไฟล์ app.toml คุณต้องตั้งค่า DNS ของโดเมนให้ชี้ไปยังเซิร์ฟเวอร์ของเว็บไซต์ก่อน โดยการเพิ่ม A Record หรือ CNAME ที่ชี้ไปยัง IP หรือ URL ที่เว็บไซต์ของคุณใช้งาน

ตัวอย่างการเพิ่มโดเมนในไฟล์ `app.toml`

[deploy_domains]
list = ["ชื่อโดเมนของคุณ.com"]

หากคุณยังไม่มีโดเมน คุณสามารถซื้อโดเมนจากบริการต่างๆ เช่น GoDaddy, Namecheap หรือ Google Domains

หลังจากการตั้งค่า DNS เสร็จสมบูรณ์และเพิ่มโดเมนในไฟล์ app.toml แล้ว คุณสามารถทดสอบการเชื่อมต่อได้โดยการเปิดโดเมนในเว็บเบราว์เซอร์ของคุณ

4. Deploy เว็บไซต์

หลังจากที่คุณได้เชื่อมต่อ GitHub, Cloudflare และ Domain (ถ้ามี) เสร็จเรียบร้อยแล้ว คุณสามารถเริ่มต้นกระบวนการเผยแพร่เว็บไซต์ได้โดยการใช้คำสั่งในเครื่องของคุณ คำสั่งนี้จะทำการ build และเผยแพร่เว็บไซต์ของคุณไปยัง server

./genwebblog deploy

คำสั่งนี้จะทำการดึงข้อมูลจาก GitHub และเผยแพร่เว็บไซต์ของคุณให้พร้อมใช้งานออนไลน์

ข้อมูลเพิ่มเติมเกี่ยวกับการพัฒนาเว็บไซต์

หากคุณต้องการปรับปรุงเว็บไซต์ของคุณให้มีประสิทธิภาพสูงสุด, เข้าถึงได้ง่ายสำหรับทุกคน, และปฏิบัติตามแนวทางที่ดีที่สุดในการพัฒนาเว็บไซต์ รวมถึงการปรับแต่ง SEO เพื่อให้เว็บไซต์ของคุณได้คะแนนเต็ม 100 ในการประเมินคุณภาพจาก Google และเครื่องมือวิเคราะห์อื่นๆ, คุณสามารถเริ่มต้นได้จากคำแนะนำต่อไปนี้:

ปรับปรุงประสิทธิภาพ (Performance): ทำให้เว็บไซต์ของคุณโหลดเร็วและมีประสิทธิภาพสูงสุด เรียนรู้เพิ่มเติม หรือ ตรวจสอบคะแนน PageSpeed
เพิ่มการเข้าถึง (Accessibility): ทำให้เว็บไซต์ของคุณสามารถใช้งานได้กับทุกกลุ่มผู้ใช้ รวมถึงผู้พิการ เรียนรู้เพิ่มเติม
ปฏิบัติตาม Best Practices: ทำให้เว็บไซต์ของคุณมีความเสถียร ปลอดภัย และมั่นคง เรียนรู้เพิ่มเติม
ปรับแต่ง SEO: เพื่อให้เว็บไซต์ของคุณมีการจัดอันดับที่ดีในผลการค้นหาของ Google เรียนรู้เพิ่มเติม
Highlight.js รองรับภาษาหลายภาษา คุณสามารถดูรายการภาษาทั้งหมดที่รองรับได้ที่ SUPPORTED_LANGUAGES.md

การทำตามแนวทางเหล่านี้จะช่วยให้เว็บไซต์ของคุณมีประสิทธิภาพสูงสุด และตอบสนองต่อความต้องการของผู้ใช้ได้ดีขึ้น คุณสามารถเยี่ยมชม Web.dev เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บไซต์

หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับการจัดการเนื้อหาด้วย Markdown คุณสามารถอ่านได้ที่ Markdown Content Management

แนะนำเครื่องมือ

🔍 Keyword Surfer คือเครื่องมือฟรีที่ช่วยให้คุณค้นหาและวิเคราะห์คีย์เวิร์ดสำหรับการทำ SEO ได้อย่างง่ายดาย เหมาะสำหรับผู้ที่ต้องการปรับปรุงอันดับเว็บไซต์ใน Google โดยไม่จำเป็นต้องใช้เครื่องมือราคาแพง เพียงติดตั้งเป็นส่วนขยายของเบราว์เซอร์ Chrome คุณก็สามารถดูปริมาณการค้นหา, คำแนะนำคีย์เวิร์ด, และข้อมูล SEO อื่นๆ ได้ทันทีขณะค้นหาบน Google
- ดูจำนวนการค้นหาต่อเดือนของแต่ละคำค้น
- แนะนำคีย์เวิร์ดที่เกี่ยวข้องพร้อมข้อมูลความยากในการทำ SEO
- วิเคราะห์เนื้อหาคู่แข่งในหน้าผลลัพธ์การค้นหา
เริ่มใช้งานได้เลยที่ Chrome Web Store
🔍 Facebook Sharing Debugger คือเครื่องมือที่ช่วยให้คุณตรวจสอบว่าเว็บไซต์ของคุณจะแสดงผลอย่างไรเมื่อถูกแชร์บน Facebook โดยสามารถดูและอัปเดตข้อมูล Title, Description, รูปภาพ และข้อมูลจาก Open Graph tags ได้แบบเรียลไทม์ เป็นเครื่องมือที่นักพัฒนาและเจ้าของเว็บไซต์ควรใช้เพื่อตรวจสอบประสบการณ์การแชร์ลิงก์
- ดูว่า Facebook แสดงผลข้อมูลลิงก์ของคุณอย่างไร
- ตรวจสอบและอัปเดต Open Graph tags เช่น og:title, og:image
- เช็กว่า Facebook เคยเก็บข้อมูลจากลิงก์ของคุณเมื่อไหร่
- บังคับให้ Facebook ดึงข้อมูลใหม่โดยคลิก “Scrape Again”
เริ่มใช้งานได้เลยที่ Facebook Sharing Debugger