GitHub Pages: โฮสติ้งเว็บไซต์ฟรี และวิธีเผยแพร่เว็บแรกของคุณทีละขั้นตอน

GitHub Pages คืออะไร

GitHub Pages คือบริการโฮสต์เว็บไซต์แบบสแตติกฟรีที่ติดมากับ GitHub คุณเก็บไฟล์เว็บไซต์ไว้ในรีโพ Git ธรรมดา แล้ว GitHub จะส่งไฟล์เหล่านั้นให้ผ่าน HTTPS ทุกครั้งที่ git push ไปยังสาขาที่กำหนด เว็บจะอัปเดตตาม จึงไม่ต้องใช้ FTP แยก แผงควบคุมโฮสติ้ง หรือการอัปโหลดไฟล์ด้วยมือ

ในภาษาไทยมีคนค้นหาในหลายรูปแบบ เช่น «github pages คืออะไร» «โฮสต์เว็บฟรี github» หรือ «git pages คืออะไร» แต่ชื่อที่ถูกต้องคือ GitHub Pages เพราะมันเป็นฟีเจอร์ของแพลตฟอร์ม GitHub ไม่ใช่ตัว Git เอง Git ไม่ได้เผยแพร่อะไรเลย มันเพียงเก็บประวัติการเปลี่ยนแปลง

GitHub Pages มักใช้สำหรับเอกสารประกอบโปรเจกต์ หน้าเว็บส่วนตัวและพอร์ตโฟลิโอ บล็อก หน้าแลนดิ้ง โปรเจกต์การเรียนรู้ และเดโมแอปฝั่งหน้าบ้านที่สร้างด้วย React, Vue หรือ Svelte แล้ว

Git pages คือโฮสติ้งสำหรับเนื้อหาแบบสแตติก

คำสำคัญคือ «สแตติก» GitHub Pages ส่งไฟล์ที่สร้างเสร็จแล้วให้เบราว์เซอร์ ได้แก่ HTML, CSS, JavaScript, รูปภาพ ฟอนต์ และ JSON มันไม่รันโค้ดบนเซิร์ฟเวอร์ PHP, Python, Node.js ฝั่งเซิร์ฟเวอร์ และฐานข้อมูลใช้ที่นี่ไม่ได้ หากเว็บต้องการการสมัครสมาชิก ตะกร้าสินค้า หรือหลังบ้านที่มีฐานข้อมูล คุณจะต้องใช้โฮสติ้งทั่วไปหรือแพลตฟอร์มคลาวด์

อย่างไรก็ตาม JavaScript ในเบราว์เซอร์ทำงานตามปกติ แอปแบบหน้าเดียว (SPA) สามารถเรียก API ภายนอกได้ ฟอร์มสามารถส่งผ่านบริการของบุคคลที่สาม และการค้นหาในเว็บสามารถทำในฝั่งไคลเอนต์ได้

เว็บไซต์บน GitHub Pages มีกี่ประเภท

GitHub Pages มีเว็บไซต์สามประเภท และที่อยู่เว็บขึ้นอยู่กับประเภท

บัญชีหนึ่งมีเว็บของผู้ใช้หรือขององค์กรได้เพียงหนึ่งเว็บ แต่เว็บของโปรเจกต์มีได้หลายเว็บ โดยหนึ่งรีโพต่อหนึ่งเว็บ ชื่อรีโพสำหรับเว็บส่วนตัวต้องตรงกับชื่อผู้ใช้ GitHub ของคุณทุกตัวอักษร หากชื่อผู้ใช้คือ ivan-petrov รีโพต้องชื่อ ivan-petrov.github.io

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

วิธีเผยแพร่เว็บบน GitHub Pages ทีละขั้นตอน

เราจะเริ่มจากวิธีที่ง่ายที่สุด คือไฟล์ HTML สำเร็จรูปที่เผยแพร่จากสาขา คุณต้องมีบัญชี GitHub และติดตั้ง Git แล้ว

ขั้นตอนที่ 1: สร้างรีโพ

บน GitHub สร้างรีโพสาธารณะใหม่ สำหรับเว็บส่วนตัวให้ตั้งชื่อว่า username.github.io ส่วนเว็บของโปรเจกต์ตั้งชื่ออะไรก็ได้ จากนั้นโคลนรีโพและเพิ่มหน้าแรก:

git clone https://github.com/username/username.github.io.git
cd username.github.io
echo "<h1>สวัสดี GitHub Pages</h1>" > index.html

หน้าแรกต้องชื่อ index.html (หรือ index.md, README.md ซึ่ง GitHub ก็จะเปลี่ยนให้เป็นหน้าแรกเช่นกัน) ตัวพิมพ์เล็กใหญ่มีความสำคัญ Index.html ใช้ไม่ได้

ขั้นตอนที่ 2: ส่งไฟล์ขึ้น GitHub

git add index.html
git commit -m "หน้าแรกของเว็บไซต์"
git push origin main

หาก Git ขอชื่อผู้ใช้และรหัสผ่านตอนส่งครั้งแรก ให้ใช้ personal access token หรือล็อกอินผ่านเบราว์เซอร์ รหัสผ่านบัญชี GitHub ทั่วไปใช้กับ git push ผ่าน HTTPS ไม่ได้

ขั้นตอนที่ 3: เปิดใช้ Pages ในการตั้งค่า

เปิดรีโพบน GitHub ไปที่ Settings แล้วเลือก Pages จากเมนูด้านข้าง ในส่วน Build and deployment ที่ช่อง Source ให้เลือก Deploy from a branch จากนั้นระบุสาขา (มักเป็น main) และโฟลเดอร์ คือ root / (root) หรือ /docs แล้วกด Save

โฟลเดอร์ /docs สะดวกเมื่อรีโพมีโค้ดของโปรเจกต์อยู่แล้ว และเว็บเอกสารแยกอยู่ในไดเรกทอรีต่างหาก

ขั้นตอนที่ 4: รอให้การเผยแพร่เสร็จ

การเผยแพร่ใช้เวลาตั้งแต่ไม่กี่วินาทีถึงไม่กี่นาที GitHub แจ้งว่าการเผยแพร่ครั้งแรกอาจใช้เวลาถึง 10 นาที ความคืบหน้าของการสร้างดูได้ในแท็บ Actions จะมีงาน pages build and deployment ปรากฏขึ้น เมื่อเสร็จและมีเครื่องหมายถูกสีเขียว ที่อยู่ของเว็บจะปรากฏในหน้า Settings → Pages

หลังจากนี้ขั้นตอนก็ง่ายมาก แก้ไขไฟล์ ทำ commit แล้ว git push เว็บจะอัปเดตเองโดยอัตโนมัติ

เผยแพร่ด้วย GitHub Actions

การเผยแพร่จากสาขาเหมาะเมื่อรีโพมีไฟล์สำเร็จรูปอยู่แล้ว แต่ถ้าเว็บต้องถูก build ก่อน เช่นแอปที่ใช้ Vite หรือ React หรือเครื่องมือสร้างอย่าง Hugo การใช้ GitHub Actions เป็นแหล่งที่มาจะสะดวกกว่า ใน Settings → Pages ที่ช่อง Source ให้เลือก GitHub Actions แล้ว GitHub จะเสนอเทมเพลต workflow ให้พร้อมใช้

สำหรับไฟล์สแตติกที่อยู่ในโฟลเดอร์ dist หลังการ build workflow ที่ง่ายที่สุดหน้าตาแบบนี้:

name: Deploy to Pages
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - id: deployment
        uses: actions/deploy-pages@v4

ไฟล์นี้วางไว้ที่ .github/workflows/pages.yml เมื่อ git push แล้ว Actions จะติดตั้ง dependencies, build โปรเจกต์ และเผยแพร่เนื้อหาของ dist ข้อดีของวิธีนี้คือรีโพเก็บเฉพาะซอร์สโค้ด ไฟล์ที่ build แล้วจึงไม่ทำให้ประวัติ commit รกไปด้วย

จุดพลาดที่พบบ่อยของเว็บโปรเจกต์คือเรื่องพาธ เว็บจะอยู่ที่ /ชื่อรีโพ/ แต่เครื่องมือ build มักอ้างอิงไฟล์จากรากที่ / ผลคือหน้าโหลดมาแล้วไม่มีสไตล์และสคริปต์ วิธีแก้คือกำหนด base path ใน Vite ใช้ base: '/ชื่อรีโพ/' และเครื่องมืออื่นก็มีตัวเลือกคล้ายกัน

Jekyll และเครื่องมือสร้างเว็บแบบสแตติก

เมื่อเผยแพร่จากสาขา GitHub จะส่งไฟล์ผ่าน Jekyll เป็นค่าเริ่มต้น Jekyll เป็นเครื่องมือสร้างเว็บแบบสแตติกที่เขียนด้วย Ruby คุณจึงเขียนหน้าด้วย Markdown ใช้ธีมและเทมเพลตได้ และ GitHub จะแปลงให้เป็น HTML เอง สำหรับบล็อกหรือเอกสาร วิธีนี้สะดวก คุณเขียนไฟล์ .md ส่วนการจัดหน้าตาเป็นหน้าที่ของธีม

ผลข้างเคียงคือ Jekyll จะข้ามไฟล์และโฟลเดอร์ที่ชื่อขึ้นต้นด้วยขีดล่าง เช่น _next หรือ _assets หากเว็บของคุณถูกสร้างด้วยเครื่องมืออื่นและต้องการโฟลเดอร์เหล่านี้ ให้วางไฟล์ .nojekyll ว่างเปล่าไว้ที่รากของรีโพ:

touch .nojekyll
git add .nojekyll
git commit -m "ปิด Jekyll"
git push

เครื่องมืออื่น เช่น Hugo, Astro, Eleventy, MkDocs และ Docusaurus มักทำงานผ่าน GitHub Actions คือ build ใน workflow แล้วเผยแพร่โฟลเดอร์ผลลัพธ์ GitHub Pages เองไม่รู้จักเครื่องมือเหล่านี้ เพียงต้องการไฟล์ผลลัพธ์สุดท้ายเท่านั้น

วิธีผูกโดเมนของตัวเองกับ GitHub Pages

username.github.io เหมาะกับโปรเจกต์การเรียนรู้ แต่สำหรับพอร์ตโฟลิโอหรือโปรเจกต์จริงควรใช้โดเมนของตัวเอง การผูกต้องทำใน 2 ที่ ได้แก่ ผู้ให้บริการโดเมน และการตั้งค่าของรีโพ

ตั้งค่า DNS

สำหรับซับโดเมนอย่าง www.example.com หรือ blog.example.com ให้สร้างเรคอร์ด CNAME ที่ชี้ไปยัง username.github.io สำหรับโดเมนหลัก example.com ให้สร้างเรคอร์ด A ที่ชี้ไปยัง IP ของ GitHub Pages:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

รายการที่อัปเดตล่าสุด รวมถึง IPv6 สำหรับเรคอร์ด AAAA ดูได้ในเอกสารของ GitHub ควรตรวจสอบกับเอกสารก่อนตั้งค่า แนะนำให้ตั้งทั้งโดเมนหลักและ www เพื่อให้ GitHub ส่งต่อจากที่อยู่หนึ่งไปอีกที่หนึ่ง

ตั้งค่าในรีโพ

ใน Settings → Pages ที่ช่อง Custom domain ให้กรอกโดเมนแล้วบันทึก เมื่อเผยแพร่จากสาขา GitHub จะสร้างไฟล์ชื่อ CNAME ในรีโพ ซึ่งมีชื่อโดเมนอยู่ภายใน หากเผยแพร่ด้วย Actions จะไม่ต้องมีไฟล์ CNAME เพราะโดเมนถูกเก็บไว้ในการตั้งค่า

GitHub แนะนำให้ยืนยันโดเมนในการตั้งค่าบัญชี (ส่วน Pages ในการตั้งค่าโปรไฟล์) เพื่อป้องกันไม่ให้ผู้อื่นผูกโดเมนของคุณกับรีโพของเขา ในขณะที่ DNS ของคุณยังชี้มาที่ GitHub การเปลี่ยนแปลง DNS อาจใช้เวลาถึงหนึ่งวันจึงจะมีผล หากโดเมนยังไม่ทำงานทันที ให้รอสักพัก

HTTPS บน GitHub Pages

สำหรับที่อยู่ *.github.io HTTPS เปิดตลอดเวลา สำหรับโดเมนของคุณเอง GitHub จะออกใบรับรอง Let's Encrypt ให้อัตโนมัติเมื่อ DNS ตั้งค่าถูกต้อง หลังจากนั้นจะมีช่องทำเครื่องหมาย Enforce HTTPS ปรากฏใน Settings → Pages ให้ติ๊กเพื่อให้ทุกคำขอ HTTP ถูกเปลี่ยนเส้นทางไปยัง HTTPS

หากช่องทำเครื่องหมายไม่สามารถกดได้ แปลว่ายังไม่ได้ออกใบรับรอง ให้ตรวจสอบเรคอร์ด DNS แล้วรอ บางครั้งการลบโดเมนออกจาก Custom domain แล้วเพิ่มกลับเข้าไปใหม่จะช่วยให้มีการออกใบรับรองอีกครั้ง นอกจากนี้ตรวจให้แน่ใจว่าเว็บไม่ได้โหลดรูปภาพและสคริปต์ผ่าน http:// เพราะเบราว์เซอร์จะบล็อกเนื้อหาแบบผสม (mixed content)

ข้อจำกัดของ GitHub Pages

การโฮสต์ฟรีมีขอบเขตกำกับไว้ ซึ่งเขียนอยู่ในเอกสารของ GitHub สำหรับเว็บส่วนตัวและเว็บการเรียนรู้ส่วนใหญ่ ขอบเขตเหล่านี้เพียงพอเกินพอ

นอกเหนือจากขีดจำกัดทางเทคนิค ยังมีกฎการใช้งาน GitHub Pages ไม่ได้ออกแบบมาสำหรับบริการเชิงพาณิชย์ เช่น ร้านค้าออนไลน์หรือ SaaS และไม่เหมาะกับการแจกไฟล์ขนาดใหญ่ สำหรับพอร์ตโฟลิโอ เอกสาร บล็อก และแลนดิ้งของโปรเจกต์ใช้ได้เต็มที่

ข้อจำกัดอีกข้อคือไม่มีการตั้งค่าฝั่งเซิร์ฟเวอร์ คุณไม่สามารถตั้งการเปลี่ยนเส้นทางเอง กำหนดส่วนหัวของการตอบกลับ หรือใช้กฎแบบ .htaccess ได้ สิ่งเดียวที่ทำได้คือวางไฟล์ 404.html ของตัวเองไว้ที่รากของรีโพ GitHub จะแสดงหน้านี้เมื่อที่อยู่ที่ไม่มีอยู่จริง

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

ข้อผิดพลาด 404 บน GitHub Pages

สาเหตุที่พบบ่อยที่สุดคือไม่มีไฟล์ index.html ในโฟลเดอร์ที่เลือกเป็นแหล่งที่มา ตรวจว่าเลือกสาขาและโฟลเดอร์ถูกต้อง (/ (root) หรือ /docs) และไฟล์ชื่อ index.html ตัวพิมพ์เล็กทั้งหมด สาเหตุที่สองคือเว็บยังเผยแพร่ไม่เสร็จ ให้ดูแท็บ Actions แล้วรอจนการ build จบ

หากได้รับ 404 บนหน้าย่อยของแอปแบบหน้าเดียวหลังรีเฟรชหน้า ปัญหาอยู่ที่การกำหนดเส้นทาง (routing) เซิร์ฟเวอร์หาที่อยู่ /about ไม่พบเพราะไม่มีไฟล์นั้น วิธีแก้ชั่วคราวคือใช้ hash routing (/#/about) หรือคัดลอก index.html เป็น 404.html

เว็บไม่อัปเดต

ตรวจก่อนว่าการเปลี่ยนแปลงไปถึง GitHub แล้วจริงหรือไม่ รัน git status และ git log origin/main --oneline -3 จากนั้นเปิดแท็บ Actions หากการ build ล้มเหลว จะมีเครื่องหมายกากบาทสีแดงและบันทึกข้อผิดพลาด เช่น ไวยากรณ์ของไฟล์ Jekyll หรือข้อผิดพลาดใน workflow

หากการ build สำเร็จแต่เบราว์เซอร์ยังแสดงเวอร์ชันเก่า สาเหตุคือแคช GitHub Pages แคชไฟล์ไว้ไม่กี่นาที และเบราว์เซอร์ก็แคชด้วย ให้รีเฟรชแบบล้างแคช (Ctrl+F5 หรือ Cmd+Shift+R) หรือเปิดในหน้าต่างส่วนตัว

สไตล์และรูปภาพโหลดไม่ขึ้น

เกือบทุกครั้งเป็นเพราะพาธไม่ถูกต้อง บนเว็บของโปรเจกต์ ลิงก์ /style.css จะชี้ไปยังรากของ username.github.io ไม่ใช่โฟลเดอร์ของรีโพ ให้ใช้พาธแบบสัมพัทธ์ (style.css, ./img/logo.png) หรือกำหนด base path ในเครื่องมือ build นอกจากนี้ตรวจตัวพิมพ์เล็กใหญ่ของชื่อไฟล์ด้วย เซิร์ฟเวอร์ของ GitHub แยกแยะ Logo.PNG กับ logo.png แม้บน Windows ในเครื่องจะทำงานได้ปกติ

โฟลเดอร์ที่ขึ้นต้นด้วยขีดล่างหายไป

นี่คือพฤติกรรมของ Jekyll ซึ่งจะไม่เผยแพร่ไดเรกทอรีอย่าง _app เพิ่มไฟล์ .nojekyll ที่รากของรีโพ หรือเปลี่ยนไปเผยแพร่ด้วย GitHub Actions

สรุป

GitHub Pages คือวิธีที่เร็วที่สุดในการเผยแพร่เว็บแบบสแตติกโดยไม่เสียค่าใช้จ่าย มีรีโพ ไฟล์ index.html และการเลือกแหล่งที่มาใน Settings → Pages ไม่กี่นาทีเว็บก็ออนไลน์ที่ username.github.io สำหรับเว็บที่ต้อง build ให้ใช้ GitHub Actions ส่วนการผูกโดเมนของตัวเองต้องตั้งค่าเรคอร์ด DNS และติ๊ก Enforce HTTPS สิ่งที่ต้องระวังคือขอบเขตของบริการ: รองรับเฉพาะเนื้อหาสแตติก ไม่มีโค้ดฝั่งเซิร์ฟเวอร์ และมีขีดจำกัดด้านขนาดและปริมาณการใช้งาน การทำงานกับ GitHub การส่งการเปลี่ยนแปลง และการทำให้เป็นอัตโนมัติมีการอธิบายโดยละเอียดในคอร์ส Git ด้วย