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

Fon Phannida 🐞
PranWorks
Published in
3 min readSep 11, 2018

วันดีคืนดีก็อยากมีเว็บไซต์เป็นของตัวเองเป็น 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

--

--

Fon Phannida 🐞
PranWorks

I’m Fon. Interested in Shabu, Mukata, Yoka, Diving, English, and Games.