สวัสดีครับ บทความนี้บีมจะมาสอนเพื่อนๆใช้ Github Pages พื้นที่ Hosting Website ที่เราสามารถสร้าง Website แบบง่ายๆแค่อัพโหลดขึ้นไป Github จัดการให้หมดเลยและที่สำคัญที่สุดคือ มันฟรีครับบ 😂
Github Pages
Github คือพื้นที่เก็บ Code ของชาวเราเหล่า Developer แต่ส่วนใหญ่จะเก็บเป็นไฟล์ Text ซะส่วนใหญ่ ยังทำอะไรไม่ได้จนกว่าเราจะเอาไปประกอบร่างละอัพขึ้น Server
แต่ทาง Github ก็ได้ซ่อนของดีเอาไว้ใน Feature ชื่อ Github Pages ที่สามารถเอา Code เว็ปหน้าบ้านไป Deploy ละ Build ขึ้น Server ให้ใช้และแสดงผลออกมาผ่าน Domain จริงเลย สุดยอดมาก
จุดเด่น
ง่าย + ฟรี 100% แล้ว Domain ที่ให้มาก็เป็น HTTPS ด้วยปลอดภัยตามหลักสากล ส่วนจะฟรีตลอดไปมั้ยขึ้นอยู่กับลูกพี่ Github ละครับ 55
เวลา Update แค่ Push โค้ดขึ้นทาง Server Github ก็จะไป Build และอัพเดตหน้าเว็ปให้ทันที
เอาไปใช้ทำอะไรได้บ้าง
เหมาะกับเอามาใช้เป็น Static Site หรือ Single Page Application พูดง่ายๆคือใช้ภาษาหน้าบ้านพวก HTML, CSS, JavaScript, รูปภาพ มาแสดง ไม่สามารถใช้เป็นหลังบ้านหรือ Database ได้ (เรียก API ได้ปกติ)
ดังนั้นมันมีลิมิตก็คือทำได้เท่าที่หน้าบ้านจะทำได้ เลยเหมาะกับใช้ทำ
- เว็ปแสดง Portfolio
- Resume
- Project Open Source
- Document
เว็ปของ Framework ดังๆก็ใช้ Github Pages ทำ Document กันนะ เช่น
- Bootstrap
- Jekyll
- Homebrew
- Github: หรือแม้กระทั่ง Document เว็ป Github เอง (ก็แน่ละสิ 55)
- Sindre Sornhus Portfolio: พอร์ตของ Developer ชื่อดังวงการ Open source
- Learn Bitcoin Proof of Work mini game: ส่วนอันนี้ Mini Project ของผมเอง 😆 ลองไปเล่นกันดูได้ค้าบ ใช้ Github Pages เหมือนกัน
Get Start
1. สร้างบัญชี
แรกสุดต้องมีบัญชีกับทาง Github ก่อน ยังไม่มีก็สมัคร ใครมีแล้วข้ามเลย
ส่วนใครมี Repo กับ HTML Code พร้อมแล้วข้ามไป Step 5 ได้เลยครับ
2. สร้าง Repository
ถ้ามีบัญชีแล้วไปที่หัวข้อ Repositories แล้วกด New ได้เลย เพื่อสร้าง Repository ใหม่
Repository = คลังเก็บโค้ด
3. เลือกชื่อที่ชอบ
⚠️ สำคัญคือต้องติ๊กช่องให้ Repo เป็น Public นะไม่งั้นใช้ Github Pages ไม่ได้ เสร็จละกดสร้างเลย
4. สร้าง File หน้าเว็ป (HTML)
มาลองสร้าง File HTML กัน ไปที่ปุ่ม Add file คลิก Create new file
5. ตั้งชื่อไฟล์
จำเป็นต้องเป็น index.html เพื่อให้ Github Pages รู้ว่าต้องอ่านไฟล์นี้ไปแสดงเป็นหน้าเว็ป
ทีนี้ลองใส่ Format ของ HTML เข้าไป (ต้องมี) ส่วนสีม่วงๆอันนี้ผมเพิ่ม Content ข้อความกับ Gif เข้าไปจะลบออกหรือปรับเพิ่มได้ตามใจชอบเลย
ตัวอย่างโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Friday</title>
</head>
<body>
<h1>Happy Friday 😄 Have a Nice Weekend</h1>
<div class="tenor-gif-embed" data-postid="24196108" data-share-method="host" data-aspect-ratio="1" data-width="20%"><a href="https://tenor.com/view/leo-toast-gif-24196108">Leo Toast GIF</a>from <a href="https://tenor.com/search/leo+toast-gifs">Leo Toast GIFs</a>
</div>
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
</body>
</html>
6. Commit
การ Commit ก็คล้ายๆกับกด Save นั่นเอง พอใจแล้วก็กด Commit Changes โลดด ใส่ Commit Message ใส่เพื่อบอกว่าเราจะเปลี่ยนอะไร
7. Setup Pages
เสร็จแล้วกลับไปที่ Settings ตรงนี้หยุดก่อนเผื่อถ้าไม่พอใจกับชื่อที่เราตั้งตอนแรกก็สามารถเปลี่ยนได้ เพราะชื่อ Repo เราจะกลายเป็น Slug หรือชื่อ URL ข้างหลังชื่อเว็ปเรานั่นเอง
เช่นชื่อ Repo: Happy-Friday จะกลายเป็น beamtan.github.io/Happy-Friday
ถ้าพอใจแล้วไปที่ Pages กันเลย
8. Deployment
เลือก Branch main และใช้ /(root) ตรงนี้คือที่บอก Github ว่าเราจะใช้ Branch หรือ โค้ด Version ไหนในการส่งให้มันไปจัดการขึ้น Server
ซึ่งถ้าทำท่า Basic ก็ใช้ Main ไปเลยดีแล้ว
เสร็จแล้วกด Save เลยเพื่อส่งให้ Server Build 😎
เบื้องหลังการทำงาน (Build) ไปดูได้ที่ Tab Actions ทุกครั้งที่เรา Commit และ Push ขึ้นไปใหม่ มันจะเข้าไปทำงานในนี้และ Update ตัวเว็ปให้เราเองทุกรอบ ต้องรอแปปนึงถึงจะ Update เสร็จ
9. Done ✅
ถ้าเสร็จแล้วที่หน้าเดิมจะมี URL ของเว็ปเราออกมา ก็กดเข้าไปดูได้เลย
10. Happy Friday Website
ได้หน้าเว็ปออกมาตามที่ต้องการ 🎉 ดูตัวอย่างแบบ Live ได้ที่นี่
คุยกันหลังทำเสร็จ
เป็นไงครับง่ายมากเลยใช่มั้ย จริงๆแล้ว Feature นี้ Github ให้ไว้กับทุก Repo เลยนะสมมุติเรามี Project ของอะไรก็ได้แค่เรามีไฟล์ index.html ไว้ที่ root folder เราก็สามารถโชว์หน้าเว็ป ใช้เป็น Document ของ Project ก็ได้สะดวกมากแถมเท่สุดๆ
เท่าที่ดูมาสามารถทำได้ทุก Repo เลยด้วยนะหมายความว่าเราสามารถมี Github Pages ที่ Run พร้อมๆกันหลายๆอันได้เลย 🤩 ของดีขนาดนี้ทีแรกผมนึกว่าให้ใช้แค่ Repo เดียว 55
ส่วนจะทำให้หน้าเว็ปออกมาให้ดีได้ยังไง อันนี้ขึ้นอยู่กับ Skill Web Font-End ซะแล้ว แนะนำให้ลองไปดูตัวอย่างของคนอื่นได้ที่ Link นี้ [GithubPage Collections] ลองไป Clone Template ของคนอื่นมาเล่นดูก็ได้
Additional
จริงๆเราสามารถใช้ Custom Domain ของเราได้อีกนะแต่ต้องไป Setup เพิ่มในหน้า Pages เลยคับลองเล่นดู
หรือจะใช้ Jekyll (ตัวช่วยสร้าง Static Web ที่ Github แนะนำ) มาช่วยสร้างเว็ปก็ได้ อันนี้ส่วนตัวยังไม่ได้ลองเหมือนกันแต่จากที่ดูแล้วน่าสนใจเพราะเราไม่ต้องมา Custom หน้าเว็ปเองมันมาเป็น Theme ให้เลือกพร้อมโครงสร้างเลย
อาจจะยากขึ้นนิดนึงเพราะต้องลง Ruby มา Setup ก่อนตอนแรกและใช้ MarkDown เป็นโครงสร้างเว็ป ไว้ถ้าได้ลองทำเดียวมาเขียนต่อ EP2 ครับ
⚠️ ท้ายสุดอย่าลืมนะว่า Repo เราต้องเป็น Public ก่อน Github ถึงอนุญาติให้ใช้ Feature นี้หมายความว่าสิ่งที่เราอัพขึ้นไปจะกลายเป็น Open Source ทันทีข้อมูลที่มัน Sensitive เช่น Key ข้อมูลเราที่มันส่วนตัวมากๆหรือ Code ที่เป็นความลับก็ไม่ควรเอามาใช้ครับผม
ขอให้สนุกกับการเขียนโค้ดครับ
Leave a Reply