สวัสดีครับ วันนี้ผมจะมาขอแนะนำฟีเจอร์เด็ดของเครื่องมือที่ผมชอบมากตัวหนึ่ง นั่นก็คือ GitLab Pages นั่นเอง อธิบายสั้นๆ ก็คือ GitLab Pages เอาไว้โฮสเว็บไซต์แบบ Static คือมาแต่ฝั่ง HTML/CSS/JS นั่นเอง โดยที่เราไม่จำเป็นต้องตั้ง Server ของตัวเองเลย GitLab อาสาไปโฮสให้ฟรีๆ แต่ด้วยพลังของ GitLab CI/CD ทำให้มีการสร้างโปรแกรมขึ้นมาเพื่อ Generate Static Website กันบน Online ได้เลย หนึ่งตัวที่น่าสนใจก็คือ Hugo แต่อันนั้นจะเล่าในวันหลัง ส่วนวันนี้ผมจะมาสอนการใช้แบบพื้นฐานเป็น Plain HTML กันก่อน 🙂
สำหรับบทความนี้จะมีทั้งหมด 3 ตอน ดังนี้
- ใช้ GitLab Pages โฮส Static Website ฟรีๆ ไม่ต้องตั้ง Server
- การต่อ HTTPS กับ GitLab Pages ด้วย Cloudflare ให้ได้ SSL Lab เกรด A+
- ทำเว็บไซต์แบบเป็นเรื่องเป็นราวบน GitLab Pages ด้วย Hugo
ก่อนจะไปดูวิธีการทำ ผมขอแนะนำให้รู้จักกับ GitLab กันก่อนสำหรับคนที่ไม่รู้จัก GitLab เนี่ยเป็นเว็บสำหรับโฮส Git Repository (ผมคงไม่ยาวลงไปถึงว่า Git คืออะไร ไปหาอ่านกันเองที่นี่นะครับ) ซึ่งหลายๆ คนจะรู้จัก GitHub กันอยู่แล้ว มันก็คืออะไรแบบเดียวกัน แต่ GitLab พยายามทำตัวเป็นเครื่องมือที่ครบวงจรสำหรับการพัฒนา Software ตั้งแต่ Verision Control ไปถึง Deployment ตั้งแต่การแจ้งบั๊ก ไปถึง Project Management และมีฟีเจอร์อีกเยอะแยะเหลือเกิน แต่ถ้าจะให้สรุปสั้นๆ ว่าดียังไงล่ะก็ ผมขอเลือกข้อที่เหนือกว่าคู่แข่งรายอื่นมาเลย ที่ผมเห็นคือประมาณนี้
- GitLab เปิดให้ใช้งานฟรี ทั้ง Public และ Private Repo ข้อจำกัดจำนวนต่างๆ สูงมากซะจนใช้งานกันในองค์กรเล็กๆ ได้สบายๆ
- มีเครื่องมือการทำ CI/CD ในตัว ใช้งานง่าย แถมยังมีตัว โดย GitLab จะให้โควต้ารันเดือนละ 2,000 นาที แต่ถ้าใช้เกิน สามารถรัน GitLab Runner ใช้เองได้ด้วย ซึ่งถ้าใช้ GCP อยู่ สามารถใช้เครื่อง Always Free ตัวเล็กสุดไปรันทิ้งไว้ได้สบายๆ หรือไม่ก็ไปเช่า Cloud ราคาถูกๆ ตั้งเอาไว้ใช้กันเองได้
- GitLab เป็น Open Source Project และมี Community Edition ที่เราสามารถเอาไปติดตั้งใช้งานกันเองได้ด้วย สำหรับบางองค์กรอาจจะต้องการ Internal Version Control ก็สามารถโหลด GitLab ไปใช้งานกันภายในได้สบายๆ
- GitLab มีเครื่องมีครบลูปการทำ DevOps lifecycle ในตัว ที่ยังขาดอยู่เห็นทีจะเป็นเรื่อง Chat แล้วก็ App บนมือถือเนี่ยแหละ
ต่อมาผมจะขอเล่าถึงข้อดีข้อเสียของ GitLab Pages คร่าวๆ ซึ่งเท่าที่ผมเจอมาก็จะมีประมาณนี้
ข้อดี
- สะดวกมาก ไม่ต้องตั้ง Server เอง ไม่ต้องดูแลโฮส
- ใช้งานฟรีไม่เสียเงิน
- สามารถแก้ไฟล์เว็บได้ผ่านทาง Web IDE เลย สะดวกมาก
- เดี๋ยวนี้มี Web static framework ออกมาให้ใช้หลายตัว ทำให้ Static web ก็ใช้งานได้แทบจะเทียบได้กับ Web Application เลย
ข้อจำกัด
- แน่นอน ไม่สามารถรัน Dynamic Web Application ได้
- Deploy ครั้งแรกนานมาก อาจจะทำให้ใจหายได้ แต่เชื่อเถอะว่าทำถูกแล้ว
- การแก้ไขบางทีต้องรอมัน propagate สักหน่อย แต่ไม่นานมาก
- เราไม่มีอำนาจในการควบคุม Hosting แต่อย่างใด GitLab เป็นคนจัดการให้ และต้องฝากชีวิตกับ GitLab
ความจริงก็มีบริการตัวอื่นๆ อีกหลายตัวที่ใช้งานได้แบบเดียวกัน ที่ผมเคยใช้มาก่อนก็มี Netlify ฟรีเหมือนกัน แต่หลังจากมาใช้ GitLab Pages แล้วก็ไม่รู้ว่าจะไปใช้หลายๆ บริการทำไม ในเมื่อมันทำได้แบบเดียวกัน
เอาล่ะ ต่อมาเรามาเริ่มขั้นตอนการใช้งาน GitLab Pages กันเลย!
ขั้นตอนการใช้งาน GitLab Pages
เปิด Repo นี้ขึ้นมา https://gitlab.com/pages/plain-html อันนี้คือ Project ต้นแบบที่จะเอามาใช้ ไป Copy git repo path แบบ HTTPS ออกมาตามรูป เดี๋ยวจะใช้ในการสร้าง Project ใหม่
อยากให้เข้าไปดูไฟล์ .gitlab-ci.yml มันคือไฟล์ที่เอาไว้รัน Pipeline CI/CD หน้าตาเป็นแบบนี้
|
1 2 3 4 5 6 7 8 9 10 11 |
image: alpine:latest pages: stage: deploy script: - echo 'Nothing to do...' artifacts: paths: - public only: - master |
อ่านดูคร่าวๆ จะเห็นว่า มันสร้าง artifacts (ก็คือไฟล์ที่เก็บออกมาข้างนอก เป็น archive ประเภทหนึ่ง) จาก directory public ซึ่งเมื่อเราเข้าไปใน public ก็จะเห็น index.html อยู่ นั่นก็คือไฟล์ index ที่มันจะเอามาใช้เป็นหน้าแรกนั่นเอง
ต่อมาก็กลับมาที่ dashboard ของตัวเอง แล้วกด New Project
ไปที่ Import project แล้วเลือก Repo by URL จากนั้นก็วาง URL ของ plain-html repo ลงไป (https://gitlab.com/pages/plain-html.git) ต่อมาตั้งชื่อให้เรียบร้อย เรื่อง Visibility ไม่ต้องเป็น public ก็ได้ ใช้ได้เหมือนกัน เพราะ gitlab จะ built ผ่าน ci แล้วกด Create Project
เสร็จแล้วก็จะได้ Project ใหม่ออกมาดังภาพ
ต่อมาที่เมนูด้านข้าง ที่ CI/CD > Pipelines ให้ไปดูซิว่ามันรันไหม ถ้ามันจะไม่รัน แล้วกด Run Pipeline ถ้ารันแล้วก็ข้ามไป
มันจะให้เลือกว่าจะเปิด Pipeline จาก Branch ไหน ตอนนี้ก็มีแต่ master พร้อมแล้วก็กด Create pipeline ได้เลย
กดเสร็จแล้วออกมาข้างนอก ก็จะเห็นกราฟ Pipeline กำลังรันอยู่ตามภาพ
ลองกดเข้าไปดู ก็จะเห็น Script ที่อยู่ใน .gitlab-ci.yml มันทำงาน และแปบเดียวควรจะเห็นสถานะเปลี่ยนเป็น Passed
ออกมาข้างนอก ที่ Pipeline ด้านขวาจะเห็น Icon ของ Artifacts กด Download ลงมาเช็คความถูกต้องดู ข้างในควรจะมีไฟล์ที่อยู่ใน public นั่นเอง และไฟล์พวกนี้แหละที่ถูกเอาไปโฮส สำคัญสุดคือไฟล์ index.html ที่จะเป็นหน้าแรก
ต่อมาที่เมนูด้านซ้าย ไปที่ Settings > Pages เปิดเข้ามาจะเห็นหน้าตาประมาณนี้ ข้างล่าง Access pages จะเห็นลิงค์ page ของเรา ให้ลองกดเปิดดู
ถ้าเห็น 404 ไม่ต้องแปลกใจ เพราะว่า deploy ครั้งแรกมันจะใช้เวลานานมาก บางทีเป็นสิบนาที ให้ไปกินก๊วยเตี๋ยวรอได้เลย ถ้าเราเช็คใน artifact แล้วว่ามันถูกต้องก็จงมั่นใจว่ามันจะใช้ได้
หลังจากเวลาผ่านไปสักพักหนึ่ง ลองกลับมาเปิดดู ควรจะเห็นว่ามันไปโหลด index.html ขึ้นมาแสดงผลให้แล้ว!
มาต่อจะพาไปแก้ไฟล์ กลับไปที่หน้า Repository แล้วกดปุ่มทางด้านขวาบน Web IDE เพื่อเข้าไปแก้ไข
GitLab จะพามาที่หน้า Web IDE เราสามารถเขียน Code ได้จากที่นี่เลย เด็ดมาก! ก็เปิดไฟล์ Index ขึ้นมา ก็จะเห็น content เดิมประมาณนี้
ผมขอแก้ content ใหม่เป็นแบบนี้ จากนั้นก็กด Commit…
ก่อนจะ Commit มันจะแสดงขึ้นมาให้เห็นว่า มีการแก้ไขอะไรไปบ้าง ถ้าทุกอย่างเรียบร้อยดีก็ Stage & Commit โลด
ต่อมาไปเปิดดูที่หน้า Pipeline ก็จะเห็นว่ามันกำลังรันอยู่ อันนี้ก็คือสิ่งที่เราเพิ่งแก้ไปนั่นเอง
รอจนกระทั่งมัน Passed
ไปเปิดหน้าเว็บใหม่อีกที ก็จะเห็นว่า Content ใหม่ขึ้นมาแสดงเรียบร้อยแล้ว!
หลังจากนี้อยากจะแก้อะไรก็แก้ได้เลย ใครจะ Git Clone ลงมาแก้ในเครื่องแล้ว Push ขึ้นไปก็เอากันตามสะดวก Pipeline นั่นมันจะรันของมันเอง ไม่ต้องไปห่วงเลย
สำหรับใครที่อยากจะโฮสเข้า Domain ของตัวเอง ในหน้า Settings > Pages ก็จะมาให้เพิ่ม Domain เข้าไป ก็ทำตามได้เลยครับ สำหรับท่านผู้อ่านที่พร้อมจะลุยกันต่อแล้ว ก็ไปอ่านกันตอนต่อไปกันได้เลยครับ การทำ HTTPS กับ GitLab Pages ด้วย Cloudflare ให้ได้ SSL Lab เกรด A+
สำหรับตอนนี้ ใครมีคำถาม ติดขัดตรงไหนก็พูดคุยกันได้ผ่านทางกล่อง Comment นะครับ วันนี้ก็ขอจบเอาไว้เท่านี้ สวัสดีครับ
