Host a Website for Free
โฮสต์เว็บไซต์ฟรี

GitHub Pages + Cloudflare = Free Professional Hosting

ไม่ต้องใช้บัตรเครดิต ไม่มีค่าใช้จ่ายรายเดือน โฮสติ้งระดับโปรดักชัน

Video Introduction — วิดีโอแนะนำ

Thai intro: websites, payments, GitHub, and AI — วิดีโอแนะนำภาษาไทย

Why This Works — ทำไมถึงได้ผล

💻
GitHub Pages
Free static hosting
+
🛡️
Cloudflare
Free CDN + SSL + DNS

🇹🇭 ภาษาไทย

คุณสามารถ host เว็บไซต์จริงพร้อม custom domain, HTTPS และ CDN ระดับโลกโดยไม่ต้องจ่ายเงินเลย GitHub Pages เก็บไฟล์ของคุณ Cloudflare อยู่ด้านหน้าและให้ความเร็ว ความปลอดภัย และการจัดการ DNS เว็บไซต์หลายล้านแห่งใช้ระบบนี้

🇬🇧 English

You can host a real website with a custom domain, HTTPS, and a global CDN without paying anything. GitHub Pages hosts your files. Cloudflare sits in front and provides speed, security, and DNS management. Millions of websites use this exact setup.

GitHub + Cloudflare
ฟรีทั้งคู่

$0/mo
  • GitHub Pages (free) — ฟรี
  • Free SSL from Cloudflare — SSL ฟรีจาก Cloudflare
  • Unlimited bandwidth — แบนด์วิดท์ไม่จำกัด
  • Global CDN (300+ cities) — CDN ทั่วโลก (300+ เมือง)
  • Zero maintenance — ไม่ต้องดูแลเลย

What Can You Host? — โฮสต์อะไรได้บ้าง?

  • Personal portfolios and resumes — พอร์ตโฟลิโอและเรซูเม่ส่วนตัว
  • Business landing pages — หน้าแลนดิ้งเพจธุรกิจ
  • Documentation sites — เว็บไซต์เอกสาร
  • Blogs (with Jekyll or plain HTML) — บล็อก
  • Single-page applications (React, Vue, etc.) — แอปพลิเคชันหน้าเดียว
  • Any static website (HTML, CSS, JavaScript) — เว็บไซต์แบบ static ทุกประเภท

Limitation / ข้อจำกัด: ไม่รองรับ server-side code (PHP, Python, Node.js backends) สำหรับสิ่งเหล่านั้นต้องใช้บริการอื่น เช่น Cloudflare Workers, Vercel หรือเซิร์ฟเวอร์แบบดั้งเดิม

Useful Phrases — วลีที่มีประโยชน์

"I want to host my website for free."— "ฉันต้องการโฮสต์เว็บไซต์ฟรี"
"Where can I buy a domain name?"— "ซื้อโดเมนเนมได้ที่ไหน?"
"My website is live on the internet."— "เว็บไซต์ของฉันออนไลน์แล้ว"

Architecture Overview — ภาพรวมสถาปัตยกรรม

🇹🇭 ภาษาไทย

มีสองวิธีในการ set up เว็บไซต์ฟรี: แบบง่าย (แค่ GitHub Pages เท่านั้น) และแบบเต็ม (GitHub Pages + Cloudflare กับ custom domain) ทั้งสองแบบฟรี!

🇬🇧 English

There are two ways to set up your free website: the simple way (GitHub Pages only) and the full way (GitHub Pages + Cloudflare with a custom domain). Both are completely free!

Simple — แบบง่าย
No domain needed — ไม่ต้องมีโดเมน

👤 Visitor / ผู้เยี่ยมชม
types username.github.io
⬇
🔒 HTTPS (auto)
GitHub provides free SSL — GitHub ให้ SSL ฟรี
⬇
GitHub Pages
serves HTML/CSS/JS — ส่งไฟล์เว็บไซต์
⬇
✅ Website loads!
เว็บไซต์โหลดแล้ว!
Cost / ค่าใช้จ่าย: $0
URL: username.github.io/repo
Setup time / เวลาตั้งค่า: 5 minutes

Full — แบบเต็ม
Custom domain + Cloudflare

👤 Visitor / ผู้เยี่ยมชม
types mysite.com
⬇
☁️ Cloudflare DNS
resolves domain — แปลงชื่อโดเมน
⬇
🛡️ Cloudflare CDN
cache + DDoS protection — แคชและป้องกัน
⬇
🔒 SSL/TLS (Full)
encrypted end-to-end — เข้ารหัสทั้งหมด
⬇
GitHub Pages
serves HTML/CSS/JS — ส่งไฟล์เว็บไซต์
⬇
✅ Website loads fast!
เว็บไซต์โหลดเร็ว!
Cost / ค่าใช้จ่าย: $0 (domain ~$10/yr)
URL: mysite.com
Setup time / เวลาตั้งค่า: 30 minutes

What You Need — สิ่งที่ต้องมี

🇹🇭 ภาษาไทย

ก่อนเริ่มต้น คุณต้องมีสิ่งเหล่านี้:

🇬🇧 English

Before starting, you need these things:

1. GitHub Account
บัญชี GitHub
สมัครฟรีที่ github.com — ใช้เก็บไฟล์เว็บไซต์และเปิดใช้ hosting
Free to create. Go to github.com and sign up.
2. Cloudflare Account (Optional)
บัญชี Cloudflare (เฉพาะเมื่อใช้โดเมนเอง)
สมัครฟรีที่ cloudflare.com — ถ้าไม่ใช้โดเมนเอง ไม่จำเป็นต้องมี Cloudflare เลย GitHub Pages จัดการทุกอย่างให้
Only needed with a custom domain. GitHub Pages handles everything on its own.
3. Domain Name (Optional)
ชื่อโดเมน (ไม่จำเป็น)
ถ้าไม่มีโดเมน เว็บไซต์จะอยู่ที่ username.github.io ถ้าต้องการโดเมนเอง (เช่น mysite.com) ต้องซื้อ ($10-15/ปี)
Without a domain, your site will be at username.github.io.
4. Website Files
ไฟล์เว็บไซต์
อย่างน้อยต้องมีไฟล์ index.html หนึ่งไฟล์ สามารถเพิ่ม CSS, JavaScript และรูปภาพได้
At minimum, an index.html file.

Part 1: Set Up GitHub Pages — ตั้งค่า GitHub Pages

1 Create a New Repository — สร้าง Repository ใหม่

🇹🇭 ภาษาไทย

ไปที่ github.com แล้วกดปุ่ม + มุมขวาบน เลือก New repository

  • Repository name: ตั้งชื่ออะไรก็ได้ (เช่น my-website) สำหรับเว็บไซต์ผู้ใช้ ให้ตั้งชื่อว่า username.github.io
  • Public: Repo ต้องเป็น public สำหรับ GitHub Pages ฟรี
  • Add a README: ติ๊กช่องนี้เพื่อไม่ให้ repo ว่างเปล่า

กดปุ่ม Create repository

🇬🇧 English

Go to github.com and click the + button in the top-right corner, then New repository.

  • Repository name: Choose any name (e.g., my-website). For a user site, name it username.github.io.
  • Public: The repo must be public for free GitHub Pages (or you need GitHub Pro for private repos).
  • Add a README: Check this box so the repo isn't empty.

Click Create repository.

2 Add Your Website Files — เพิ่มไฟล์เว็บไซต์

🇹🇭 ภาษาไทย

คุณสามารถ upload ไฟล์ผ่านเว็บ GitHub ได้เลย:

  1. ใน repo ใหม่ กด Add file → Upload files
  2. ลากไฟล์ index.html, CSS, JS และรูปภาพเข้าไป
  3. กด Commit changes

🇬🇧 English

You can upload files directly through the GitHub web interface:

  1. In your new repo, click Add file → Upload files
  2. Drag your index.html, CSS, JS, and image files into the upload area
  3. Click Commit changes

Minimal index.html to Start — ไฟล์ index.html เริ่มต้น

ถ้ายังไม่มีเว็บไซต์ ให้สร้างไฟล์ชื่อ index.html ด้วยเนื้อหานี้: / If you don't have a website yet, create a file called index.html with this content:

<!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <h1>Hello, World!</h1> <p>My free website is live.</p> </body> </html>

🇹🇭 หรือใช้ Git จาก command line

# โคลน repo ของคุณ git clone https://github.com/YOUR-USERNAME/my-website.git cd my-website # เพิ่มไฟล์ของคุณ cp ~/my-site-files/* . # พุชไปยัง GitHub git add . git commit -m "Add website files" git push

🇬🇧 Or use Git from the command line

# Clone your repo git clone https://github.com/YOUR-USERNAME/my-website.git cd my-website # Add your files cp ~/my-site-files/* . # Push to GitHub git add . git commit -m "Add website files" git push

3 Enable GitHub Pages — เปิดใช้งาน GitHub Pages

🇹🇭 ภาษาไทย

  1. ไปที่ repo บน GitHub
  2. กด Settings (ไอคอนรูปเฟือง)
  3. ในเมนูด้านซ้าย กด Pages
  4. ตรง Source เลือก Deploy from a branch
  5. เลือก main branch และ / (root) folder
  6. กด Save

รอ 1-2 นาที เว็บไซต์จะใช้งานได้ที่:

🇬🇧 English

  1. Go to your repo on GitHub
  2. Click Settings (gear icon in the tab bar)
  3. In the left sidebar, click Pages
  4. Under Source, select Deploy from a branch
  5. Choose the main branch and / (root) folder
  6. Click Save

Wait 1-2 minutes. Your site will be live at:

https://YOUR-USERNAME.github.io/my-website/

ถ้าตั้งชื่อ repo ว่า username.github.io URL จะเป็น: / If you named your repo username.github.io, the URL is simply:

https://YOUR-USERNAME.github.io/

4 Verify It Works — ตรวจสอบว่าใช้งานได้

🇹🇭 ภาษาไทย

เปิด URL ในเบราว์เซอร์ คุณจะเห็นเว็บไซต์ของคุณ ถ้าเห็น 404 ให้รอสักครู่ — การ deploy ครั้งแรกอาจใช้เวลาสักพัก

🇬🇧 English

Visit the URL in your browser. You should see your website. If you see a 404, wait another minute — GitHub Pages can take a few minutes for the first deployment.

Troubleshooting — การแก้ปัญหา

  • ไฟล์ต้องชื่อ index.html (ไม่ใช่ Index.html หรือ home.html) — Make sure your file is named index.html
  • Repo ต้องเป็น public — Make sure the repo is public
  • ดูแท็บ Actions ใน repo เพื่อดูสถานะการ deploy — Check the Actions tab for deployment status

Your site is now live! — เว็บไซต์ออนไลน์แล้ว!

ทุกครั้งที่คุณ push การเปลี่ยนแปลงไป GitHub เว็บไซต์จะอัปเดตอัตโนมัติภายในไม่กี่นาที

Every time you push changes to GitHub, the site updates automatically within minutes.

ไม่มี custom domain? เสร็จแล้ว! GitHub Pages ให้ HTTPS ฟรีที่ username.github.io ส่วนที่ 2 และ 3 ต้องทำเฉพาะเมื่อต้องการโดเมนเอง

No custom domain? You're done! Parts 2 and 3 are only for custom domains.

Tech Phrases — วลีเทคโนโลยี

"I deployed my website to GitHub Pages."— "ฉันดีพลอยเว็บไซต์ไปยัง GitHub Pages แล้ว"
"Can you check if my site is live?"— "ช่วยดูว่าเว็บไซต์ของฉันออนไลน์แล้วหรือยัง?"
"I need to push my changes to the repository."— "ฉันต้องพุชการเปลี่ยนแปลงไปยัง repository"

Part 2: Add a Custom Domain (Optional) — เพิ่มโดเมนเอง

🇹🇭 ภาษาไทย

ข้ามส่วนนี้ถ้าไม่มี custom domain เว็บไซต์ที่ username.github.io มี HTTPS ฟรีอยู่แล้วและใช้งานได้ดี ทำต่อเฉพาะเมื่อต้องการใช้โดเมนเอง เช่น mysite.com

🇬🇧 English

Skip this section if you don't have a custom domain. Your site at username.github.io already has free HTTPS and works great. Continue here only if you want to use your own domain like mysite.com.

5 Buy a Domain — ซื้อโดเมน

🇹🇭 ภาษาไทย

ซื้อ domain จาก registrar ใดก็ได้:

🇬🇧 English

Purchase a domain from any registrar. Popular affordable options:

RegistrarTypical Cost / ราคาโดยประมาณNotes / หมายเหตุ
Cloudflare Registrar$8-10/year (.com)ราคาทุน ไม่บวกเพิ่ม — At-cost pricing, no markup
Namecheap$9-13/year (.com)ยอดนิยม UI ดี — Popular, good UI, free WhoisGuard
Porkbun$9-10/year (.com)ราคาถูก ใช้ง่าย — Low prices, clean interface

Avoid These Traps — หลีกเลี่ยงกับดัก

  • บาง registrar โฆษณา $1 ปีแรก แต่ต่ออายุ $15+/ปี ดูราคา renewal — Check the renewal price
  • ไม่ต้องจ่ายเพิ่มสำหรับ "SSL certificate" — Cloudflare ให้ฟรี
  • ไม่ต้องจ่ายสำหรับ "website hosting" เสริม — GitHub Pages ทำให้ฟรี

6 Tell GitHub About Your Domain — บอก GitHub เรื่องโดเมน

🇹🇭 ภาษาไทย

  1. ไปที่ repo → Settings → Pages
  2. ตรง Custom domain พิมพ์โดเมนของคุณ (เช่น www.mysite.com)
  3. กด Save
  4. ติ๊ก Enforce HTTPS

ระบบจะสร้างไฟล์ CNAME ใน repo ของคุณอัตโนมัติ

🇬🇧 English

  1. Go to your repo → Settings → Pages
  2. Under Custom domain, type your domain (e.g., www.mysite.com)
  3. Click Save
  4. Check Enforce HTTPS (you may need to wait for DNS to propagate first)

This creates a CNAME file in your repo automatically.

Part 3: Set Up Cloudflare (Optional) — ตั้งค่า Cloudflare

🇹🇭 ภาษาไทย

ไม่มี custom domain? ข้ามส่วนนี้ทั้งหมด GitHub Pages ให้ HTTPS ฟรีและ hosting อยู่แล้ว Cloudflare เพิ่มความเร็ว CDN, การป้องกัน DDoS และการจัดการ DNS — แต่ใช้ได้เฉพาะเมื่อมีโดเมนเอง

🇬🇧 English

No custom domain? Skip this entire section. GitHub Pages already provides free HTTPS and hosting. Cloudflare adds CDN speed, DDoS protection, and DNS management — but only makes sense if you have your own domain.

7 Add Your Site to Cloudflare — เพิ่มเว็บไซต์ใน Cloudflare

🇹🇭 ภาษาไทย

  1. เข้าสู่ระบบที่ cloudflare.com
  2. กด Add a site
  3. ใส่ชื่อ domain ของคุณ (เช่น mysite.com)
  4. เลือกแผน Free แล้วกด Continue
  5. Cloudflare จะสแกน DNS records ที่มีอยู่ ตรวจสอบแล้วกด Continue

🇬🇧 English

  1. Log in to cloudflare.com
  2. Click Add a site
  3. Enter your domain name (e.g., mysite.com)
  4. Select the Free plan and click Continue
  5. Cloudflare will scan your existing DNS records. Review them and click Continue.

8 Change Your Nameservers — เปลี่ยน Nameservers

🇹🇭 ภาษาไทย

Cloudflare จะให้ nameservers สองตัว เช่น:

ada.ns.cloudflare.com bob.ns.cloudflare.com

ไปที่ registrar ที่คุณซื้อโดเมน แล้วเปลี่ยน nameservers เดิมเป็นของ Cloudflare นี่จะบอกอินเทอร์เน็ตว่า "Cloudflare จัดการ DNS สำหรับโดเมนนี้"

🇬🇧 English

Cloudflare will give you two nameservers like:

ada.ns.cloudflare.com bob.ns.cloudflare.com

Go to your domain registrar (where you bought the domain) and replace the existing nameservers with Cloudflare's. This tells the internet "Cloudflare manages DNS for this domain."

Nameserver Propagation — การแพร่กระจาย Nameserver

อาจใช้เวลา สูงสุด 24 ชั่วโมง แต่ปกติจะเสร็จใน 1-2 ชั่วโมง Cloudflare จะส่งอีเมลเมื่อเปิดใช้งานแล้ว
This can take up to 24 hours but usually works within 1-2 hours. Cloudflare will email you when it's active.

9 Configure DNS Records — ตั้งค่าระเบียน DNS

🇹🇭 ภาษาไทย

ในแดชบอร์ด Cloudflare ไปที่ DNS → Records เพิ่มหรือแก้ไข records เหล่านี้:

🇬🇧 English

In your Cloudflare dashboard, go to DNS → Records. Add or edit these records:

TypeNameContentProxy
CNAMEwwwYOUR-USERNAME.github.ioProxied (orange cloud)
CNAME@YOUR-USERNAME.github.ioProxied (orange cloud)

"Proxied" คืออะไร? — What Does "Proxied" Mean?

เมื่อเปิดคลาวด์สีส้ม ทราฟฟิกจะผ่านเครือข่าย Cloudflare ซึ่งให้ CDN caching, การป้องกัน DDoS และ SSL ถ้าปิด (DNS only) Cloudflare แค่ resolve โดเมนโดยไม่มีสิทธิประโยชน์
When the orange cloud is on, traffic goes through Cloudflare's network. This gives you CDN caching, DDoS protection, and SSL. Always keep it proxied for your website.

🇹🇭 ทางเลือก: ใช้ A records

บางการตั้งค่าใช้ A records ชี้ไปยัง IP ของ GitHub แทน:

# GitHub Pages IP addresses 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

🇬🇧 Alternative: A records

Some setups prefer A records pointing to GitHub's IPs:

# GitHub Pages IP addresses 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME flattening (both as CNAME) works well on Cloudflare. On other DNS providers, you'd need A records for the root domain.

10 Configure SSL/TLS — ตั้งค่า SSL/TLS

🇹🇭 ภาษาไทย

ในแดชบอร์ด Cloudflare:

  1. ไปที่ SSL/TLS → Overview
  2. ตั้ง encryption mode เป็น Full

🇬🇧 English

In your Cloudflare dashboard:

  1. Go to SSL/TLS → Overview
  2. Set the encryption mode to Full
Mode / โหมดWhat It Does / ทำอะไรUse When / ใช้เมื่อ
Offไม่มีการเข้ารหัส — No encryptionอย่าใช้ — Never
FlexibleHTTPS ถึง Cloudflare, HTTP ถึง GitHubหลีกเลี่ยง — เกิด redirect loop
FullHTTPS ทั้งหมด — HTTPS everywhereใช้อันนี้สำหรับ GitHub Pages
Full (Strict)HTTPS + ตรวจสอบ certificateดีที่สุดเมื่อ GitHub ออก cert แล้ว

Common Mistake: "Too Many Redirects" — ข้อผิดพลาดที่พบบ่อย

ถ้าเห็นข้อผิดพลาด redirect loop แสดงว่า SSL mode ตั้งเป็น Flexible อยู่ ให้เปลี่ยนเป็น Full
If you see a redirect loop error, your SSL mode is probably set to Flexible. Change it to Full.

11 Recommended Settings — ค่าแนะนำ

Setting / การตั้งค่าWhere / ที่ไหนValue / ค่าWhy / ทำไม
Always Use HTTPSSSL/TLS → Edge CertificatesOnเปลี่ยน HTTP เป็น HTTPS อัตโนมัติ
Auto MinifySpeed → OptimizationHTML, CSS, JSลดขนาดไฟล์ให้โหลดเร็วขึ้น
BrotliSpeed → OptimizationOnบีบอัดดีกว่า gzip
Browser Cache TTLCaching → Configuration1 monthผู้เยี่ยมชมที่กลับมาโหลดเร็วขึ้น
Security LevelSecurity → SettingsMediumบล็อกทราฟฟิกอันตราย
Bot Fight ModeSecurity → BotsOnบล็อกบอทอันตราย

เว็บไซต์อยู่หลังเครือข่าย Cloudflare แล้ว!

Your site is now behind Cloudflare's global network!

ผู้เยี่ยมชมจะได้รับบริการจาก Cloudflare data center ที่ใกล้ที่สุด (300+ เมืองทั่วโลก) พร้อมการป้องกัน DDoS และ SSL — ฟรีทั้งหมด

Cloudflare Phrases — วลี Cloudflare

"I configured my DNS records on Cloudflare."— "ฉันตั้งค่าระเบียน DNS บน Cloudflare แล้ว"
"The SSL certificate is issued automatically."— "ใบรับรอง SSL ออกให้อัตโนมัติ"
"I need to purge the cache."— "ฉันต้องล้างแคช"

Updating Your Website — อัปเดตเว็บไซต์

🇹🇭 ภาษาไทย

ทุกครั้งที่คุณ push การเปลี่ยนแปลงไปยัง GitHub repo เว็บไซต์จะอัปเดตอัตโนมัติ:

🇬🇧 English

Every time you push changes to your GitHub repo, your site updates automatically:

Option A: Through GitHub Website — ผ่านเว็บไซต์ GitHub

🇹🇭 ภาษาไทย

  1. ไปที่ repo บน GitHub
  2. กดไฟล์ที่ต้องการแก้ไข
  3. กดไอคอนดินสอ (Edit)
  4. ทำการเปลี่ยนแปลง
  5. กด Commit changes
  6. รอ 1-2 นาที — เว็บอัปเดตอัตโนมัติ

🇬🇧 English

  1. Go to your repo on GitHub
  2. Click on the file you want to edit
  3. Click the pencil icon (Edit)
  4. Make your changes
  5. Click Commit changes
  6. Wait 1-2 minutes — the site updates automatically

Option B: Using Git (Command Line) — ใช้ Git (Command Line)

# ทำการเปลี่ยนแปลงไฟล์ในเครื่อง / Make changes to your files locally git add . git commit -m "Update homepage" git push # GitHub Pages จะ rebuild อัตโนมัติ / GitHub Pages rebuilds automatically # เว็บอัปเดตใน 1-2 นาที / Site updates in 1-2 minutes

Cloudflare Cache — แคชของ Cloudflare

หลังจาก push การเปลี่ยนแปลง เว็บจะอัปเดตบน GitHub ภายในไม่กี่นาที แต่ Cloudflare อาจส่งเวอร์ชันที่ cached ไว้ ถ้าต้องการให้เปลี่ยนทันที:
After pushing changes, Cloudflare might serve a cached version. If you need changes to appear immediately:

  1. ไปที่ Cloudflare dashboard → Caching → Configuration
  2. กด Purge Everything

Troubleshooting — การแก้ปัญหา

Problem / ปัญหาCause / สาเหตุFix / วิธีแก้
Site shows 404ไม่มี index.html หรือไม่ได้เปิด Pagesตรวจสอบ Settings → Pages และไฟล์ index.html
"Too Many Redirects"Cloudflare SSL ตั้งเป็น Flexibleเปลี่ยน SSL mode เป็น Full
Custom domain ไม่ทำงานDNS ยังไม่ propagateรอสูงสุด 24 ชั่วโมง ตรวจสอบด้วย DNS checker
HTTPS ไม่ทำงานCertificate ยังไม่ออกรอ 15-30 นาทีหลัง DNS propagation แล้วเปิด Enforce HTTPS
เนื้อหาเก่าแสดงอยู่Cloudflare cacheล้างแคชในแดชบอร์ด Cloudflare หรือรอ TTL หมดอายุ
CSS/JS ไม่โหลดMixed content หรือ path ผิดใช้ relative paths (./style.css) และตรวจสอบว่าใช้ HTTPS ทั้งหมด

Troubleshooting Phrases — วลีการแก้ปัญหา

"My site is showing a 404 error."— "เว็บไซต์ของฉันแสดง error 404"
"I'm getting a redirect loop."— "ฉันเจอ redirect loop"
"The DNS hasn't propagated yet."— "DNS ยังไม่ propagate"
"I need to clear the cache."— "ฉันต้องล้างแคช"

Free Tier Limits — ขีดจำกัดแผนฟรี

Service / บริการFree Limit / ขีดจำกัดฟรีPlenty For / เพียงพอสำหรับ
GitHub Pages1 GB storage, 100 GB bandwidth/monthเว็บไซต์ส่วนตัวและธุรกิจขนาดเล็กส่วนใหญ่
GitHub Pages10 builds per hourการทำงานพัฒนาปกติ
Cloudflare CDNUnlimited bandwidthทราฟฟิกทุกระดับ
Cloudflare SSLFree universal certificateHTTPS เต็มรูปแบบสำหรับโดเมนของคุณ
Cloudflare DNSUnlimited queriesทราฟฟิกทุกระดับ
Cloudflare Workers100,000 requests/dayServerless functions เบาๆ

When Do You Need to Pay? — เมื่อไหร่ต้องจ่ายเงิน?

สำหรับเว็บไซต์ส่วนตัว พอร์ตโฟลิโอ และธุรกิจขนาดเล็กส่วนใหญ่ แผนฟรีเพียงพอมากๆ ต้องอัปเกรดก็ต่อเมื่อ:
For most personal sites, portfolios, and small businesses, the free tier is more than enough. You'd only need to upgrade if you:

  • ต้องการ private repositories กับ GitHub Pages (GitHub Pro: $4/month)
  • ต้องการฟีเจอร์ Cloudflare ขั้นสูง เช่น custom firewall rules
  • ต้องการ server-side rendering หรือ databases
  • ใช้เกิน 100 GB/month bandwidth บน GitHub Pages (ไม่ค่อยเกิดขึ้นกับเว็บ static)

Part 4: Accept Payments with Stripe — รับชำระเงินด้วย Stripe

🇹🇭 ภาษาไทย

เว็บไซต์แบบ static ไม่สามารถรันโค้ดฝั่งเซิร์ฟเวอร์ได้ แต่คุณยังสามารถรับ payments ได้โดยใช้ Stripe.js กับ Stripe Checkout — Stripe จัดการทุกอย่างฝั่งเซิร์ฟเวอร์ให้ เว็บไซต์ของคุณแค่เปลี่ยนเส้นทางลูกค้าไปยังหน้าชำระเงินที่ปลอดภัยของ Stripe

🇬🇧 English

Static websites can't run server-side code, but you can still accept payments using Stripe.js + Stripe Checkout. Stripe handles all the server-side processing — your website just redirects customers to Stripe's secure hosted checkout page. No backend needed.

Stripe Checkout Flow — ขั้นตอนการชำระเงิน

👤 Customer / ลูกค้า
clicks "Buy Now" — กดปุ่ม "ซื้อเลย"
⬇
Your Static Site
Stripe.js redirects to checkout — เปลี่ยนเส้นทางไปหน้าชำระเงิน
⬇
💳 Stripe Checkout
hosted payment page — หน้าชำระเงินที่ Stripe โฮสต์
⬇
🔒 Payment Processed
Stripe handles everything — Stripe จัดการทุกอย่าง
⬇
✅ Success Page
customer returns to your site — ลูกค้ากลับมาที่เว็บไซต์

1 Create a Stripe Account — สร้างบัญชี Stripe

🇹🇭 ภาษาไทย

  1. ไปที่ stripe.com แล้วสมัครบัญชี (ฟรี)
  2. Stripe เก็บค่าธรรมเนียมเฉพาะเมื่อคุณรับเงินได้ (2.9% + $0.30 ต่อรายการ)
  3. คุณจะได้ test API keys ทันทีเพื่อทดสอบก่อนเปิดใช้งานจริง

🇬🇧 English

  1. Go to stripe.com and sign up (free)
  2. Stripe only charges fees when you receive payments (2.9% + $0.30 per transaction)
  3. You'll get test API keys immediately to test before going live

2 Create a Product in Stripe Dashboard — สร้างสินค้าในแดชบอร์ด Stripe

🇹🇭 ภาษาไทย

  1. เข้าสู่ระบบ Stripe Dashboard
  2. ไปที่ Products → Add product
  3. ตั้งชื่อ ราคา และคำอธิบาย product
  4. เลือกแบบชำระครั้งเดียว (one-time) หรือ subscription
  5. คัดลอก Price ID (เริ่มต้นด้วย price_)

🇬🇧 English

  1. Log in to Stripe Dashboard
  2. Go to Products → Add product
  3. Set the name, price, and description for your product
  4. Choose one-time payment or subscription
  5. Copy the Price ID (starts with price_)

3 Add Stripe.js to Your Page — เพิ่ม Stripe.js ในหน้าเว็บ

🇹🇭 ภาษาไทย

เพิ่ม script ของ Stripe ในส่วน <head> ของหน้า HTML:

🇬🇧 English

Add the Stripe script tag to the <head> of your HTML page:

<head> <!-- Add Stripe.js --> <script src="https://js.stripe.com/v3/"></script> </head>

4 Create a Buy Button — สร้างปุ่มซื้อ

🇹🇭 ภาษาไทย

เพิ่มปุ่มในหน้าเว็บของคุณแล้วเชื่อมต่อกับ Stripe Checkout:

🇬🇧 English

Add a button to your page and connect it to Stripe Checkout:

<!-- HTML: Buy button --> <button id="checkout-btn">Buy Now — ซื้อเลย 💳</button> <script> // Initialize Stripe with your PUBLISHABLE key (safe for client-side) const stripe = Stripe('pk_test_YOUR_PUBLISHABLE_KEY'); document.getElementById('checkout-btn') .addEventListener('click', function() { stripe.redirectToCheckout({ lineItems: [{ price: 'price_YOUR_PRICE_ID', quantity: 1 }], mode: 'payment', // or 'subscription' successUrl: 'https://mysite.com/success.html', cancelUrl: 'https://mysite.com/', }); }); </script>

API Keys — คีย์ API

Publishable key (pk_) ปลอดภัยที่จะใช้ในโค้ด client-side — ใส่ในเว็บไซต์ได้เลย
Secret key (sk_) ห้ามใส่ในเว็บไซต์เด็ดขาด! — ใช้ฝั่งเซิร์ฟเวอร์เท่านั้น

The publishable key (pk_) is safe for client-side code. The secret key (sk_) must NEVER be in your website code — it's server-side only.

5 Create Success and Cancel Pages — สร้างหน้าสำเร็จและยกเลิก

🇹🇭 ภาษาไทย

สร้างไฟล์ success.html ที่แสดงข้อความขอบคุณหลังชำระเงินสำเร็จ:

🇬🇧 English

Create a success.html file that shows a thank-you message after successful payment:

<!DOCTYPE html> <html> <body> <h1>Thank you! — ขอบคุณครับ/ค่ะ! 🎉</h1> <p>Your payment was successful.</p> <p>การชำระเงินสำเร็จแล้ว</p> <a href="index.html">Back to Home — กลับหน้าหลัก</a> </body> </html>

6 Test with Stripe Test Mode — ทดสอบด้วยโหมดทดสอบ

🇹🇭 ภาษาไทย

ก่อนเปิดใช้งานจริง ให้ทดสอบด้วย test mode:

  1. ใช้ test keys (pk_test_) ใน JavaScript
  2. ใช้หมายเลขบัตรทดสอบ: 4242 4242 4242 4242
  3. วันหมดอายุ: อนาคตใดก็ได้ CVC: ตัวเลข 3 ตัวใดก็ได้
  4. ตรวจสอบ payments ในแดชบอร์ด Stripe

🇬🇧 English

Before going live, test with test mode:

  1. Use test keys (pk_test_) in your JavaScript
  2. Use test card number: 4242 4242 4242 4242
  3. Expiry: any future date. CVC: any 3 digits
  4. Check payments in Stripe Dashboard

Going Live — เปิดใช้งานจริง

เมื่อพร้อมรับเงินจริง เปลี่ยน pk_test_ เป็น pk_live_ ใน JavaScript และเปลี่ยน price_ ID เป็นสินค้าจริง
When ready to accept real money, swap pk_test_ for pk_live_ in your JavaScript and use your live product's price_ ID.

What Stripe Handles for You — สิ่งที่ Stripe จัดการให้

  • PCI compliance — คุณไม่ต้องจัดการข้อมูลบัตรเครดิตเลย — You never touch credit card data
  • Receipts — ส่งอีเมลใบเสร็จอัตโนมัติ — Automatic email receipts
  • Fraud prevention — ตรวจจับรายการที่น่าสงสัย — Built-in fraud detection
  • Multi-currency — รองรับ 135+ สกุลเงิน — Supports 135+ currencies
  • Mobile optimization — หน้าชำระเงินรองรับมือถือ — Checkout works on all devices

Payment Phrases — วลีเกี่ยวกับการชำระเงิน

"I want to add a payment button to my website."— "ฉันต้องการเพิ่มปุ่มชำระเงินในเว็บไซต์"
"The checkout page is hosted by Stripe."— "หน้าชำระเงินโฮสต์โดย Stripe"
"Never put your secret key in client-side code."— "อย่าใส่ secret key ในโค้ดฝั่งไคลเอนต์เด็ดขาด"
"I tested the payment with a test card."— "ฉันทดสอบการชำระเงินด้วยบัตรทดสอบ"

Your static site can now accept payments!

เว็บไซต์ static ของคุณรับชำระเงินได้แล้ว!

No server, no backend, no monthly hosting fees — just Stripe's 2.9% + $0.30 per transaction.

Part 5: Advanced — Stripe + Cloudflare Workers

🇹🇭 ภาษาไทย

Stripe Checkout (Part 4) ทำงานได้ดีสำหรับปุ่มซื้อแบบง่าย แต่ถ้าคุณต้องการ custom logic เช่น การตรวจสอบ coupon codes, คำนวณราคาแบบไดนามิก หรือส่ง webhooks — คุณต้องมี server-side โค้ด Cloudflare Workers ให้ serverless functions ฟรี 100,000 requests/day ทำงานร่วมกับ Cloudflare ที่คุณตั้งค่าไว้แล้ว!

🇬🇧 English

Stripe Checkout (Part 4) works great for simple buy buttons. But if you need custom logic — like coupon codes, dynamic pricing, or processing webhooks — you need server-side code. Cloudflare Workers gives you free serverless functions (100,000 requests/day) that work with the Cloudflare setup you already have!

Workers + Stripe Flow — ขั้นตอน Workers + Stripe

👤 Customer / ลูกค้า
clicks "Buy Now" — กดปุ่ม "ซื้อเลย"
⬇
Your Static Site
calls Worker API — เรียก API ของ Worker
⬇
☁️ Cloudflare Worker
creates Stripe session (server-side) — สร้าง session ฝั่งเซิร์ฟเวอร์
⬇
💳 Stripe API
checkout.sessions.create — สร้างเซสชันชำระเงิน
⬇
✅ Returns checkout URL
customer redirected — ลูกค้าถูกเปลี่ยนเส้นทาง

1 Install Wrangler CLI — ติดตั้ง Wrangler CLI

🇹🇭 ภาษาไทย

Wrangler คือเครื่องมือ command-line ของ Cloudflare สำหรับสร้างและ deploy Workers:

🇬🇧 English

Wrangler is Cloudflare's CLI tool for building and deploying Workers:

# Install Wrangler npm install -g wrangler # Log in to your Cloudflare account wrangler login # Create a new Worker project wrangler init stripe-checkout-worker cd stripe-checkout-worker

2 Write the Worker — เขียน Worker

🇹🇭 ภาษาไทย

แก้ไขไฟล์ src/index.js — Worker นี้สร้าง Stripe Checkout Session ฝั่งเซิร์ฟเวอร์อย่างปลอดภัย (ใช้ secret key ได้เพราะอยู่ฝั่งเซิร์ฟเวอร์):

🇬🇧 English

Edit src/index.js — this Worker creates a Stripe Checkout Session server-side (safe to use the secret key here):

export default { async fetch(request, env) { // Only allow POST requests if (request.method !== 'POST') { return new Response('Method not allowed', { status: 405 }); } // Create Stripe Checkout Session const response = await fetch('https://api.stripe.com/v1/checkout/sessions', { method: 'POST', headers: { 'Authorization': `Bearer ${env.STRIPE_SECRET_KEY}`, 'Content-Type': 'application/x-www-form-urlencoded', }, body: new URLSearchParams({ 'line_items[0][price]': 'price_YOUR_PRICE_ID', 'line_items[0][quantity]': '1', 'mode': 'payment', 'success_url': 'https://mysite.com/success.html', 'cancel_url': 'https://mysite.com/', }), }); const session = await response.json(); // Return the checkout URL with CORS headers return new Response(JSON.stringify({ url: session.url }), { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'https://mysite.com', }, }); }, };

3 Add Your Secret Key — เพิ่ม Secret Key

🇹🇭 ภาษาไทย

ใช้ Wrangler เพื่อเก็บ Stripe secret key อย่างปลอดภัยเป็น environment variable:

🇬🇧 English

Use Wrangler to securely store your Stripe secret key as an environment variable:

# Store the secret key (it will NOT be in your code) wrangler secret put STRIPE_SECRET_KEY # Paste your sk_live_ or sk_test_ key when prompted

Why This Is Secure — ทำไมถึงปลอดภัย

Secret keys เก็บเป็น encrypted secrets ใน Cloudflare ไม่อยู่ในโค้ดหรือ Git repo ของคุณ เข้าถึงได้เฉพาะผ่าน env.STRIPE_SECRET_KEY ใน Worker เท่านั้น
Secret keys are stored as encrypted secrets in Cloudflare — not in your code or Git repo. Only accessible via env.STRIPE_SECRET_KEY inside the Worker.

4 Deploy and Connect — ดีพลอยและเชื่อมต่อ

🇹🇭 ภาษาไทย

  1. Deploy Worker ของคุณ:

🇬🇧 English

  1. Deploy your Worker:
wrangler deploy # Output: Published to https://stripe-checkout-worker.YOUR-SUBDOMAIN.workers.dev

จากนั้นอัปเดตปุ่มซื้อในเว็บไซต์ให้เรียก Worker แทน: / Then update your site's buy button to call the Worker instead:

<button id="checkout-btn">Buy Now — ซื้อเลย 💳</button> <script> document.getElementById('checkout-btn') .addEventListener('click', async function() { const res = await fetch( 'https://stripe-checkout-worker.YOUR-SUBDOMAIN.workers.dev', { method: 'POST' } ); const { url } = await res.json(); window.location.href = url; }); </script>

Why Workers over Stripe.js Checkout? — ทำไมต้อง Workers?

Feature / ฟีเจอร์Stripe.js (Part 4)Workers (Part 5)
Difficulty / ความยากEasy — ง่ายMedium — ปานกลาง
Server needed / ต้องมีเซิร์ฟเวอร์NoCloudflare Workers (free)
Coupon codesLimitedFull control — ควบคุมได้เต็มที่
Dynamic pricingNoYes
WebhooksNoYes — Workers can receive them
Secret key exposureNot neededStored securely in Workers
Cost / ค่าใช้จ่ายFree + Stripe feesFree (100k req/day) + Stripe fees

Use Part 4 for simple buy buttons. Use Part 5 when you need server-side control.
ใช้ Part 4 สำหรับปุ่มซื้อแบบง่าย ใช้ Part 5 เมื่อต้องการควบคุมฝั่งเซิร์ฟเวอร์

Workers Phrases — วลี Workers

"I deployed a serverless function to handle payments."— "ฉันดีพลอยฟังก์ชัน serverless เพื่อจัดการการชำระเงิน"
"The secret key is stored as an environment variable."— "คีย์ลับเก็บเป็นตัวแปรสภาพแวดล้อม"
"The Worker creates a checkout session on the server."— "Worker สร้างเซสชันชำระเงินบนเซิร์ฟเวอร์"

Part 6: QR Code Payments — การชำระเงินด้วย QR Code

🇹🇭 ภาษาไทย

QR codes ทำให้การรับเงินง่ายมาก — ลูกค้าแค่ scan ด้วยโทรศัพท์แล้วจ่ายเงินได้ทันที มีสองวิธีหลัก: Stripe Payment Links (สำหรับบัตรเครดิตทั่วโลก) และ PromptPay QR (สำหรับการโอนเงินในประเทศไทย)

🇬🇧 English

QR codes make accepting payments incredibly easy — customers just scan with their phone and pay instantly. There are two main approaches: Stripe Payment Links (for worldwide credit card payments) and PromptPay QR (for domestic Thai bank transfers).

How QR Scan Payments Work — QR ชำระเงินทำงานอย่างไร

Stripe Payment Link QR:

🏪Your Websitedisplays QR code
เว็บแสดง QR code
→
📱Customer Scanswith phone camera
สแกนด้วยกล้องโทรศัพท์
→
💳Stripe Checkoutenters card & pays
กรอกบัตรแล้วจ่าย

PromptPay QR (Thailand):

🏪Your Websitedisplays PromptPay QR
เว็บแสดง QR พร้อมเพย์
→
📱Customer Scanswith banking app
สแกนด้วยแอปธนาคาร
→
🏦Bank Transferinstant & free!
โอนทันที ฟรี!

QR Code = URL in a Picture — QR Code = URL ในรูปภาพ

QR code คือ URL ที่เข้ารหัสเป็นรูปภาพ เมื่อลูกค้า scan ด้วยโทรศัพท์ มันจะเปิด URL นั้น — ถ้าเป็น Stripe Payment Link จะเปิดหน้าชำระเงิน ถ้าเป็น PromptPay จะเปิดแอปธนาคารพร้อมข้อมูลการโอนเงิน
A QR code is a URL encoded as an image. When customers scan it with their phone, it opens that URL — for Stripe it opens a checkout page, for PromptPay it opens the banking app with transfer details pre-filled.

Method A: Stripe Payment Link QR — QR จาก Stripe Payment Link

🇹🇭 ภาษาไทย

Stripe Payment Links สร้าง URL สำหรับชำระเงินที่ไม่ต้องเขียนโค้ดเลย แปลง URL นั้นเป็น QR code แล้วลูกค้าสแกนเพื่อจ่ายเงินด้วยบัตรเครดิตได้ทันที

🇬🇧 English

Stripe Payment Links create a payment URL with zero code. Convert that URL into a QR code and customers can scan to pay with credit card instantly.

1 Create a Payment Link — สร้าง Payment Link

🇹🇭 ภาษาไทย

  1. ไปที่ Stripe Dashboard → Payment Links
  2. กด Create payment link
  3. เลือก product และตั้งราคา
  4. กด Create link
  5. คัดลอก URL เช่น https://buy.stripe.com/abc123

🇬🇧 English

  1. Go to Stripe Dashboard → Payment Links
  2. Click Create payment link
  3. Select your product and set the price
  4. Click Create link
  5. Copy the URL, e.g., https://buy.stripe.com/abc123

2 Generate a QR Code — สร้าง QR Code

🇹🇭 ภาษาไทย

ใช้ library ชื่อ QRCode.js เพื่อสร้าง QR code ในหน้าเว็บของคุณ ไม่ต้องมี server — ทำงานในเบราว์เซอร์ทั้งหมด:

🇬🇧 English

Use the QRCode.js library to generate QR codes directly in your webpage. No server needed — it runs entirely in the browser:

<!-- Add QRCode.js library --> <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script> <!-- Container for the QR code --> <div id="stripe-qr" style="text-align:center;padding:20px;"></div> <p style="text-align:center;">Scan to pay — สแกนเพื่อชำระเงิน</p> <script> // Generate QR code from your Stripe Payment Link new QRCode(document.getElementById('stripe-qr'), { text: 'https://buy.stripe.com/YOUR_PAYMENT_LINK', width: 200, height: 200, colorDark: '#1e3a5f', colorLight: '#ffffff', }); </script>

No Code Alternative — ทางเลือกไม่ต้องเขียนโค้ด

ถ้าไม่อยากเขียนโค้ด Stripe Dashboard มีปุ่มดาวน์โหลด QR code ให้เลยตรง Payment Link — ดาวน์โหลดเป็นรูปภาพแล้วใส่ในเว็บไซต์ด้วย <img> tag
If you don't want to code, the Stripe Dashboard has a QR code download button right on the Payment Link page — download the image and add it to your site with an <img> tag.

Method B: PromptPay QR — QR พร้อมเพย์ (ประเทศไทย)

🇹🇭 ภาษาไทย

PromptPay คือระบบโอนเงินของประเทศไทย ทุกคนที่มีแอปธนาคารไทยสามารถ scan QR code ของ PromptPay เพื่อโอนเงินได้ทันที — ฟรีไม่มีค่าธรรมเนียม! เหมาะสำหรับขายของในประเทศไทย

🇬🇧 English

PromptPay is Thailand's national money transfer system. Anyone with a Thai banking app can scan a PromptPay QR code to transfer money instantly — with zero fees! Perfect for selling within Thailand.

1 Generate PromptPay QR in JavaScript — สร้าง QR พร้อมเพย์ด้วย JavaScript

🇹🇭 ภาษาไทย

ใช้ library ชื่อ promptpay-qr เพื่อสร้าง QR code พร้อมเพย์ที่ถูกต้องตามมาตรฐาน EMVCo ของธนาคารแห่งประเทศไทย:

🇬🇧 English

Use the promptpay-qr library to generate a valid PromptPay QR code following the Bank of Thailand's EMVCo standard:

<!-- Libraries: PromptPay QR generator + QRCode renderer --> <script src="https://cdn.jsdelivr.net/npm/promptpay-qr@0.5.0/dist/promptpay-qr.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script> <!-- QR code container --> <div id="promptpay-qr" style="text-align:center;padding:20px;"></div> <p style="text-align:center;font-size:1.1em;font-weight:600;"> สแกนเพื่อจ่ายผ่านพร้อมเพย์ — Scan to pay via PromptPay </p> <script> // Generate PromptPay QR payload // Use your phone number (0812345678) or National ID const payload = promptPayQR('0812345678', { amount: 299 // Amount in THB (optional — omit for any amount) }); // Render as QR code new QRCode(document.getElementById('promptpay-qr'), { text: payload, width: 220, height: 220, colorDark: '#1a1a2e', colorLight: '#ffffff', }); </script>

PromptPay ID Options — ตัวเลือก PromptPay ID

ID Type / ประเภทFormat / รูปแบบExample / ตัวอย่าง
Phone number10 digits0812345678
National ID13 digits1234567890123
Tax ID (business)13 digits0123456789012
E-Wallet ID15 digits012345678901234

2 Dynamic Amount Input — ใส่จำนวนเงินแบบไดนามิก

🇹🇭 ภาษาไทย

ให้ลูกค้ากรอกจำนวนเงินเอง แล้วสร้าง QR code ใหม่ทันที:

🇬🇧 English

Let customers enter their own amount and generate a fresh QR code instantly:

<label>Amount (THB) / จำนวนเงิน (บาท):</label> <input type="number" id="amount" value="100" min="1"> <button onclick="generateQR()">Generate QR — สร้าง QR</button> <div id="dynamic-qr"></div> <script> function generateQR() { const amount = parseFloat(document.getElementById('amount').value); const container = document.getElementById('dynamic-qr'); container.innerHTML = ''; // Clear previous QR const payload = promptPayQR('0812345678', { amount: amount }); new QRCode(container, { text: payload, width: 200, height: 200, }); } </script>

Stripe QR vs PromptPay QR — เปรียบเทียบ

Feature / ฟีเจอร์Stripe Payment Link QRPromptPay QR
Payment method / วิธีชำระCredit/debit cards worldwideThai bank transfer — โอนผ่านธนาคารไทย
Fees / ค่าธรรมเนียม2.9% + $0.30Free — ฟรี
Coverage / ครอบคลุมGlobal — ทั่วโลกThailand only — ประเทศไทยเท่านั้น
ConfirmationAutomatic via Stripe — อัตโนมัติManual check — ต้องตรวจสอบเอง
Server needed / ต้องมีเซิร์ฟเวอร์NoNo
Best for / เหมาะสำหรับInternational customersThai customers — ลูกค้าคนไทย

Use both! Show PromptPay for Thai customers and Stripe for international ones.
ใช้ทั้งสองอย่าง! แสดง PromptPay สำหรับลูกค้าคนไทย และ Stripe สำหรับลูกค้าต่างชาติ

Print Your QR Code — พิมพ์ QR Code ของคุณ

QR codes ไม่ได้ใช้แค่ในเว็บไซต์เท่านั้น — พิมพ์ลงบนนามบัตร ใบปลิว เมนูอาหาร หรือป้ายร้าน ลูกค้าสแกนแล้วจ่ายเงินได้ทันที!
QR codes aren't just for websites — print them on business cards, flyers, restaurant menus, or shop signs. Customers scan and pay instantly!

QR Payment Phrases — วลี QR ชำระเงิน

"Please scan the QR code to make a payment."— "กรุณาสแกน QR code เพื่อชำระเงิน"
"You can pay via PromptPay or credit card."— "คุณสามารถจ่ายผ่านพร้อมเพย์หรือบัตรเครดิตได้"
"The QR code is generated dynamically on the page."— "QR code สร้างแบบไดนามิกบนหน้าเว็บ"
"I printed the payment QR code on our menu."— "ฉันพิมพ์ QR code ชำระเงินลงบนเมนูของเรา"

Glossary — อภิธานศัพท์

🇹🇭 ภาษาไทย

คำศัพท์สำคัญทั้งหมดในบทเรียนนี้ กดคำภาษาอังกฤษเพื่อฟังการออกเสียง

🇬🇧 English

All key terms from this tutorial. Click the English terms to hear pronunciation.

Repository
รีโพซิทอรี / ที่เก็บโค้ด
A place on GitHub where your project files are stored. Like a folder in the cloud for your code.
ที่เก็บไฟล์โปรเจกต์บน GitHub เหมือนโฟลเดอร์ในคลาวด์สำหรับโค้ดของคุณ
Deploy
ดีพลอย / นำขึ้นใช้งาน
To make your website available on the internet. When you deploy, your code goes live.
การทำให้เว็บไซต์ใช้งานได้บนอินเทอร์เน็ต เมื่อดีพลอย โค้ดของคุณจะออนไลน์
Hosting
โฮสติ้ง / การให้บริการเว็บ
A service that stores your website files and serves them to visitors. GitHub Pages is a free hosting service.
บริการที่เก็บไฟล์เว็บไซต์และส่งให้ผู้เยี่ยมชม GitHub Pages เป็นโฮสติ้งฟรี
Domain Name
โดเมนเนม / ชื่อโดเมน
The address people type to visit your site (e.g., mysite.com). You can buy one or use the free github.io address.
ที่อยู่ที่คนพิมพ์เพื่อเข้าเว็บไซต์ (เช่น mysite.com) ซื้อได้หรือใช้ที่อยู่ github.io ฟรี
DNS (Domain Name System)
ดีเอ็นเอส / ระบบชื่อโดเมน
Translates domain names (mysite.com) into IP addresses that computers understand. Like a phone book for the internet.
แปลงชื่อโดเมน (mysite.com) เป็นที่อยู่ IP ที่คอมพิวเตอร์เข้าใจ เหมือนสมุดโทรศัพท์ของอินเทอร์เน็ต
CDN (Content Delivery Network)
ซีดีเอ็น / เครือข่ายกระจายเนื้อหา
A network of servers around the world that cache your website, so visitors get served from the nearest location.
เครือข่ายเซิร์ฟเวอร์ทั่วโลกที่แคชเว็บไซต์ของคุณ ผู้เยี่ยมชมจะได้รับบริการจากตำแหน่งที่ใกล้ที่สุด
SSL / TLS
เอสเอสแอล / การเข้ารหัส
Encryption that makes your site use HTTPS (the padlock icon). Protects data between the visitor and your site.
การเข้ารหัสที่ทำให้เว็บไซต์ใช้ HTTPS (ไอคอนแม่กุญแจ) ป้องกันข้อมูลระหว่างผู้เยี่ยมชมกับเว็บไซต์
HTTPS
เอชทีทีพีเอส / โปรโตคอลปลอดภัย
The secure version of HTTP. Websites with HTTPS show a padlock in the browser. Required by modern browsers.
เวอร์ชันปลอดภัยของ HTTP เว็บที่มี HTTPS แสดงแม่กุญแจในเบราว์เซอร์ จำเป็นสำหรับเบราว์เซอร์สมัยใหม่
Static Website
เว็บไซต์แบบ static / เว็บไซต์คงที่
A website made of fixed HTML, CSS, and JavaScript files. No server-side processing. Fast and easy to host for free.
เว็บไซต์ที่ทำจากไฟล์ HTML, CSS และ JavaScript คงที่ ไม่มีการประมวลผลฝั่งเซิร์ฟเวอร์ เร็วและโฮสต์ฟรีได้ง่าย
Commit
คอมมิต / บันทึกการเปลี่ยนแปลง
To save a set of changes to your repository. Like pressing "save" but with a description of what you changed.
การบันทึกชุดการเปลี่ยนแปลงไปยัง repository เหมือนกด "บันทึก" แต่มีคำอธิบายว่าเปลี่ยนอะไร
Push
พุช / ส่งขึ้น
To upload your local commits to GitHub. After you push, your changes are on GitHub and your site updates.
การอัปโหลดคอมมิตในเครื่องไปยัง GitHub หลังจากพุช การเปลี่ยนแปลงจะอยู่บน GitHub และเว็บไซต์อัปเดต
Branch
แบรนช์ / สาขา
A separate copy of your code for making changes without affecting the main version. The default is called "main".
สำเนาแยกของโค้ดสำหรับทำการเปลี่ยนแปลงโดยไม่กระทบเวอร์ชันหลัก ค่าเริ่มต้นเรียกว่า "main"
Nameserver
เนมเซิร์ฟเวอร์
A server that tells the internet where to find your domain. Changing nameservers to Cloudflare gives them control of your DNS.
เซิร์ฟเวอร์ที่บอกอินเทอร์เน็ตว่าจะหาโดเมนของคุณได้ที่ไหน การเปลี่ยนเป็นของ Cloudflare ให้พวกเขาจัดการ DNS
Cache
แคช / หน่วยความจำชั่วคราว
A stored copy of your website files. CDN caches serve content faster because the data is already nearby.
สำเนาที่เก็บไว้ของไฟล์เว็บไซต์ แคช CDN ส่งเนื้อหาเร็วกว่าเพราะข้อมูลอยู่ใกล้แล้ว
DDoS (Distributed Denial of Service)
ดีดอส / การโจมตีแบบปฏิเสธบริการ
An attack that floods a website with fake traffic to take it offline. Cloudflare's free plan includes DDoS protection.
การโจมตีที่ท่วมเว็บไซต์ด้วยทราฟฟิกปลอมเพื่อทำให้ออฟไลน์ แผนฟรีของ Cloudflare รวมการป้องกัน DDoS
Bandwidth
แบนด์วิดท์ / ปริมาณข้อมูล
The amount of data transferred between your site and visitors. More visitors = more bandwidth used.
ปริมาณข้อมูลที่ส่งระหว่างเว็บไซต์กับผู้เยี่ยมชม ผู้เยี่ยมชมยิ่งมาก = ใช้แบนด์วิดท์ยิ่งมาก
Propagation
โพรพาเกชัน / การแพร่กระจาย
The time it takes for DNS changes to spread across the internet. Usually 1-24 hours after changing nameservers.
เวลาที่การเปลี่ยนแปลง DNS ใช้ในการแพร่กระจายทั่วอินเทอร์เน็ต ปกติ 1-24 ชั่วโมงหลังเปลี่ยน nameservers
Registrar
รีจิสทราร์ / ผู้จดทะเบียนโดเมน
A company where you buy domain names. Examples: Cloudflare Registrar, Namecheap, Porkbun.
บริษัทที่คุณซื้อชื่อโดเมน ตัวอย่าง: Cloudflare Registrar, Namecheap, Porkbun
Stripe
สไตรป์ / ระบบชำระเงินออนไลน์
A payment processing platform that lets you accept credit card payments on your website. Works with static sites via Stripe Checkout.
แพลตฟอร์มประมวลผลการชำระเงินที่ให้คุณรับบัตรเครดิตบนเว็บไซต์ ใช้งานกับเว็บ static ได้ผ่าน Stripe Checkout
Checkout
เช็คเอาต์ / หน้าชำระเงิน
A pre-built, Stripe-hosted payment page. Your site redirects customers there — no server needed.
หน้าชำระเงินสำเร็จรูปที่ Stripe โฮสต์ให้ เว็บไซต์ของคุณเปลี่ยนเส้นทางลูกค้าไปที่นั่น — ไม่ต้องมีเซิร์ฟเวอร์
API Key
เอพีไอคีย์ / กุญแจ API
A secret code that authenticates your app with a service. Stripe has publishable keys (safe for browsers) and secret keys (server-only).
รหัสลับที่ยืนยันตัวตนแอปของคุณกับบริการ Stripe มีคีย์เผยแพร่ได้ (ปลอดภัยในเบราว์เซอร์) และคีย์ลับ (ฝั่งเซิร์ฟเวอร์เท่านั้น)
Serverless Function
ฟังก์ชัน Serverless / ฟังก์ชันไร้เซิร์ฟเวอร์
Code that runs on the cloud without managing a server. Cloudflare Workers gives you 100,000 free requests per day.
โค้ดที่รันบนคลาวด์โดยไม่ต้องจัดการเซิร์ฟเวอร์ Cloudflare Workers ให้ 100,000 requests ฟรีต่อวัน
Webhook
เว็บฮุค
An automatic notification sent from one service to another when something happens. Stripe sends webhooks when payments succeed or fail.
การแจ้งเตือนอัตโนมัติที่ส่งจากบริการหนึ่งไปอีกบริการเมื่อเกิดเหตุการณ์ Stripe ส่ง webhooks เมื่อชำระเงินสำเร็จหรือล้มเหลว
PCI Compliance
การปฏิบัติตาม PCI / มาตรฐานความปลอดภัยบัตรเครดิต
Security standards for handling credit card data. Stripe Checkout handles PCI compliance for you — you never touch card numbers.
มาตรฐานความปลอดภัยสำหรับจัดการข้อมูลบัตรเครดิต Stripe Checkout จัดการ PCI compliance ให้ — คุณไม่ต้องสัมผัสหมายเลขบัตร
Environment Variable
ตัวแปรสภาพแวดล้อม
A configuration value stored outside your code. Used to keep secrets like API keys safe. Set via Wrangler for Cloudflare Workers.
ค่าการตั้งค่าที่เก็บนอกโค้ด ใช้เพื่อเก็บความลับเช่น API keys อย่างปลอดภัย ตั้งค่าผ่าน Wrangler สำหรับ Cloudflare Workers
QR Code
คิวอาร์โค้ด / รหัสตอบสนองอย่างรวดเร็ว
A square barcode that stores data like URLs or payment info. Phones can scan QR codes with their camera to open links or make payments.
บาร์โค้ดสี่เหลี่ยมที่เก็บข้อมูลเช่น URL หรือข้อมูลการชำระเงิน โทรศัพท์สแกน QR code ด้วยกล้องเพื่อเปิดลิงก์หรือชำระเงิน
PromptPay
พร้อมเพย์ / ระบบโอนเงินแห่งชาติ
Thailand's national instant payment system. Linked to phone numbers or national IDs. Free to use, supported by all Thai banks.
ระบบโอนเงินทันทีของประเทศไทย เชื่อมกับหมายเลขโทรศัพท์หรือบัตรประชาชน ใช้ฟรี รองรับทุกธนาคารไทย
Payment Link
ลิงก์ชำระเงิน
A URL created by Stripe that opens a hosted checkout page. No code needed — just share the link or convert it to a QR code.
URL ที่สร้างโดย Stripe เปิดหน้าชำระเงินที่โฮสต์ไว้ ไม่ต้องเขียนโค้ด — แค่แชร์ลิงก์หรือแปลงเป็น QR code
EMVCo
อีเอ็มวีโค / มาตรฐาน QR ชำระเงิน
The global standard for QR code payments. PromptPay QR codes follow EMVCo format, which is why any Thai banking app can read them.
มาตรฐานสากลสำหรับการชำระเงินด้วย QR code พร้อมเพย์ใช้รูปแบบ EMVCo ทำให้แอปธนาคารไทยทุกแอปอ่านได้

Quick Reference Checklist — รายการตรวจสอบ

Setup Checklist — รายการตั้งค่า

Home