วิธีสร้างเว็บไซต์สถิติโดยใช้ GitHub Pages ฟรี

ทำไมต้องเลือก GitHub Pages สำหรับเว็บไซต์สถิติ

การสร้างเว็บไซต์สถิติที่ เร็ว และ ฟรี ไม่จำเป็นต้องใช้โฮสติ้งราคาแพงหรือเครื่องเซิร์ฟเวอร์ส่วนตัว GitHub Pages ให้คุณโฮสต์ไฟล์ HTML, CSS, JavaScript เพียงแค่กด push โค้ดแล้วเว็บไซต์ก็พร้อมใช้งานทันที

ต่อไปนี้คือขั้นตอนครบชุด ตั้งแต่เตรียมไฟล์จนถึงเผยแพร่บนอินเทอร์เน็ต

สิ่งที่ต้องเตรียมก่อนเริ่ม

การเริ่มต้นไม่ซับซ้อน เพียงคุณมีเครื่องมือพื้นฐานต่อไปนี้

• บัญชี GitHub (สมัครฟรี)
• เครื่องมือ Git บนเครื่องของคุณ (Git Bash, Terminal หรือ Git GUI)
• ไฟล์สถิติ (CSV, JSON) และสคริปต์แสดงผล (HTML + JS หรือไลบรารีเช่น Chart.js, D3.js)
• Text editor เช่น VS Code หรือ Sublime Text

Tip: หากคุณยังไม่มี Git บนเครื่อง ให้ดาวน์โหลดจาก https://git-scm.com/ แล้วติดตั้งตามขั้นตอน

สร้าง Repository บน GitHub

ขั้นตอนนี้เป็นการจัดเก็บไฟล์ของเว็บไซต์สถิติไว้บน GitHub

• ขั้นที่ 1: ล็อกอินเข้าสู่ GitHub แล้วคลิก New repository
• ขั้นที่ 2: ตั้งชื่อ (เช่น `my-statistics-site`) และเลือก Public
• ขั้นที่ 3: อย่าเลือก “Initialize with a README” เพื่อให้คุณทำการ push จากเครื่องของคุณเอง
• ขั้นที่ 4: คลิก Create repository แล้วคัดลอก URL ของ repository (รูปแบบ `https://github.com/username/repo.git`)

เตรียมไฟล์เว็บไซต์สถิติ

สร้างโครงสร้างโฟลเดอร์บนเครื่องของคุณแล้ววางไฟล์ที่จำเป็น

• `index.html` – หน้าแรกที่เรียกใช้ไลบรารีแสดงกราฟ
• `assets/` – โฟลเดอร์เก็บ CSS, JS, รูปภาพ และไฟล์ข้อมูล (CSV/JSON)
• `README.md` – คำอธิบายสั้น ๆ ของโปรเจค (ไม่จำเป็นต่อการทำงาน)

ไฟล์ `index.html` ควรเชื่อมโยงไฟล์ JavaScript ที่ทำการดึงข้อมูลและสร้างกราฟ ตัวอย่างเช่น:

```html <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="assets/data.js"></script> ```

คำสั่ง Git พื้นฐานสำหรับอัปโหลดไฟล์

ใช้ Terminal หรือ Git Bash ทำตามขั้นตอนต่อไปนี้

• ขั้นที่ 1: เปิดโฟลเดอร์โปรเจค `cd path/to/project`
• ขั้นที่ 2: เริ่มต้น git repository `git init`
• ขั้นที่ 3: เชื่อมต่อ remote repository `git remote add origin <repo‑url>`
• ขั้นที่ 4: เพิ่มไฟล์ทั้งหมด `git add .`
• ขั้นที่ 5: คอมมิตการเปลี่ยนแปลง `git commit -m "Initial commit – สร้างเว็บไซต์สถิติ"`
• ขั้นที่ 6: ส่งไฟล์ไปยัง GitHub `git push -u origin master`

หลังจาก push สำเร็จ คุณจะเห็นไฟล์ทั้งหมดบนหน้า repository ของ GitHub

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

GitHub Pages ทำงานจาก branch ที่กำหนดไว้

• ขั้นที่ 1: ไปที่หน้า repository บน GitHub แล้วคลิกเมนู Settings
• ขั้นที่ 2: เลื่อนลงไปที่ Pages (ด้านซ้ายหรือด้านล่างของเมนู)
• ขั้นที่ 3: เลือก Source เป็น `master` หรือ `main` แล้วกด Save
• ขั้นที่ 4: ระบบจะสร้าง URL ให้ (เช่น `https://username.github.io/repo/`) เพียงไม่กี่วินาที

Tip: หากต้องการใช้โดเมนส่วนตัว ให้เพิ่มไฟล์ `CNAME` ใน repository แล้วใส่โดเมนของคุณลงไป

ปรับแต่งและอัปเดตข้อมูลสถิติ

การอัปเดตกราฟหรือข้อมูลใหม่ทำได้ง่ายโดยการแก้ไขไฟล์บนเครื่องแล้ว push อีกครั้ง

• แก้ไขไฟล์ CSV/JSON หรือสคริปต์ JavaScript
• ทำ `git add .`, `git commit -m "Update data"` และ `git push`
• เว็บไซต์จะรีเฟรชอัตโนมัติภายในไม่กี่วินาที

เปรียบเทียบกับบริการโฮสต์ฟรีอื่น ๆ

GitHub Pages เหมาะกับ เว็บไซต์สถิติแบบ static ที่ไม่ต้องการขั้นตอน build ซับซ้อน

ข้อควรระวังและเคล็ดลับเพิ่มเติม

• ไฟล์ขนาดใหญ่: GitHub จำกัดไฟล์ต่อไฟล์ที่ 100 MB หากข้อมูลสถิติใหญ่เกินควรแยกเป็นหลายไฟล์หรือใช้บริการ CDN
• CORS: หากดึงข้อมูลจาก API ภายนอก ต้องตรวจสอบให้เซิร์ฟเวอร์อนุญาต CORS
• การบีบอัด: เปิดใช้ gzip หรือ Brotli ในไฟล์ `.htaccess` (หรือไฟล์ `_config.yml` ของ Jekyll) เพื่อให้โหลดเร็วขึ้น
• เวอร์ชัน: ใช้ branch แยกสำหรับการพัฒนา (`dev`) แล้ว merge ไปยัง `main` ก่อน deploy เพื่อป้องกันการอัปเดตที่ยังไม่สมบูรณ์

สรุปสิ่งที่ควรจำ

• GitHub Pages ให้โฮสต์เว็บไซต์สถิติฟรีและทำงานผ่าน Git อย่างง่าย
• เตรียม repository, ไฟล์ HTML/JS, และ ข้อมูลสถิติ ให้พร้อมก่อน push
• เปิด GitHub Pages จาก Settings แล้วใช้ URL ที่ระบบให้
• อัปเดตข้อมูลโดยทำ commit แล้ว push อีกครั้ง
• ระวังขนาดไฟล์, CORS, และการบีบอัดเพื่อประสิทธิภาพสูงสุด

เมื่อทำตามขั้นตอนเหล่านี้ คุณก็จะมีเว็บไซต์สถิติที่ทำงานได้เร็ว, ปลอดค่าโฮสติ้ง, และอัปเดตข้อมูลได้ทันทีทุกครั้งที่คุณ push โค้ดใหม่บน GitHub.