ทำเว็บเพจง่ายมากเว่อร์ #githubpages

วันดีคืนดีก็อยากมีเว็บไซต์เป็นของตัวเองเป็น personal website ธรรมดาๆนี้แหละ โดยก่อนหน้านี้เคยทั้งนั่งออกแบบเอง จดโดเมนและโฮสไว้บน godaddy และ azure แต่สุดท้ายแล้วต้องล้มเลิกไปเพราะความยุ่งยากของมัน รอบนี้เลยเอาใหม่โดยคอนเซ็ปต์ของเราคือ เร็วเว่อร์ ประหยัดเว่อร์ และง่ายเว่อร์ๆ


และเจ้า GitHub Page นี่แหละที่ตอบโจทย์สุดๆ

มาเริ่มกันเลย

ขั้นตอนที่ 1: ทำเว็บของเราขึ้นมาโดยเขียน html เอง ใช้ธีม หรือสามารถหา template ฟรีแล้วนำมาปรับแก้โค้ตก็ได้

การจะเอา template มาใช้ต้องดูประเภท licenseของ templateด้วยนะเดี๋ยวจะงานงอกเอา

เราใช้ template จาก www.templatewire.com แล้วนำมาปรับเนื้อหา, html และ css ให้ตรงกับที่เราต้องการจากนั้นเราก็จะได้ไฟล์ออกมาตามภาพ

ขั้นตอนที่ 2: Login เข้า GitHub ก่อนเลย

ขั้นตอนที่ 3: กดสร้าง repository ใหม่ขึ้นมา

ขั้นตอนที่ 4: หลังจากสร้าง repository สำเร็จ กดสร้างไฟล์ readme ขึ้นมาก่อน โดนกดที่ README (หรือกดสร้างพร้อมตอนสร้าง repository ก็ได้)

แก้ไขไฟล์ตามต้องการ

จากนั้นเลื่อนลงมาแล้วกด Commit file

หลังจากเราสร้างไฟล์เสร็จ หน้าตา repository ของเราก็จะได้ประมาณนี้ *ในส่วน topics สามารถกรอกได้ตามต้องการ

ขั้นตอนที่ 5: ทำการอัปโหลดไฟล์ที่เตรียมไว้จากขั้นตอนที่ 1 ลงไปยัง repository ที่สร้างไว้ข้างต้น โดยกดที่ Upload files

จากนั้นลากไฟล์ที่เตรียมไว้ทั้งหมดลงในกรอบตามภาพเพื่ออัปโหลด

เมื่อไฟล์อัปโหลดเสร็จก็กด Commit files

เมื่ออัปโหลดเสร็จก็จะได้ไฟล์ตามรูป

ขั้นตอนที่ 6: ทำการตั้งค่าเพจ

  • กดที่ Settings แล้วไปที่ GitHub Pages
  • ไปที่ GitHub Pages > Source ให้เลือก master branch แล้วกด Save
  • เมื่อบันทึกสำเร็จจะได้ข้อความแจ้งเตือนตามรูป

ขั้นตอนที่ 7: ขั้นตอนสุดท้าย กลับไปหน้า Settings แล้วไปที่ GitHub Pages

เราจะได้ URL สำหรับเว็บของเรา และนำไปใช้ได้เลย

หรือใครอยากจะเปลี่ยน URL หรือมีโดเมนอยู่แล้วก็สามารถเปลี่ยนไปใช้ได้โดยแก้ไขในส่วนของ Custom domain ได้เลย

เท่านี้ก็เป็นอันเสร็จสิ้น :))


ข้อดีของการใช้ GitHub Pages

เร็วเว่อร์ ประหยัดเว่อร์ และง่ายเว่อร์ๆ ตรงคอนเซ็ปต์เลย
เหมาะกับการใช้ทำ personal website, resume website หรือเว็บแนะนำโปรเจคแบบไม่ซับซ้อนมาก

ข้อเสียมันก็ต้องมี

ก็คือเราใช้ GitHub แบบฟรีดังนั้นคนอื่นก็จะเข้ามาใน repository ของเราได้ แต่เราก็สามารถจัดการไม่ให้คนอื่นเข้าถึง repository ของเราได้โดยการอัปเกรดแอคเคาท์เพื่อใช้งานแบบ private ก็จะเสียเงินเพิ่มนิดหน่อย

ส่วนอันนี้เป็นเว็บที่เราทำไว้เล่นๆเข้าไปชมกันได้ fonphannida.github.io
Like what you read? Give Fon Phannida 🐞 a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.