imkopkap

Hosting ฟรีด้วย GitHub Pages

ใช้เวลา 12 นาที 08/03/2017

ในบทความนี้จะแนะนำการใช้งาน  GitHub Pages  ซึ่งเป็นการใช้ Server ฟรีโดยที่เราต้องอัปโหลดไฟล์โปรเจคผ่านทาง GitHub หากท่านใดยังไม่มีบัญชีให้ทำการลงทะเบียนสมัครสมาชิกก่อนนะครับ GitHub


และใน Tutorial นี้ผมได้ทำการอัพโหลดโปรเจคที่มีแต่ไฟล์ Readme.md ขึ้นไปเป็นตัวทดสอบแบบง่ายๆ และแน่นอนว่าเราสามารถอัพโหลดไฟล์ HTML, JS หรือ CSS ธรรมดาขึ้นไปได้ด้วยเหมาะสำหรับคนที่ทำ Front-end development กันเลยทีเดียว

ปล. GitHub Pages เหมาะแก่การทำ Preview Website นะครับ เราไม่สามารถเชื่อมต่อกับ Database ได้

Git คืออะไร


Git  คือ Version Control ที่ทำให้เราสามารถจัดการกับโปรเจค ซึ่งสามารถอัพโหลดขึ้นเว็บให้บริการอย่าง GitHub ได้เราสามารถย้อนไปดู Version ที่เคยอัปโหลดก่อนหน้ารวมถึงดูไฟล์นั้นด้วยว่าเราแก้ไขโค้ดส่วนไหนและมีโค้ดส่วนไหนเพิ่มขึ้นมา อีกทั้งเรายังสามารถดูได้ว่าใครได้แก้ไขตัวงานของเราก่อนหน้านี้ (สามารถเพิ่มคนร่วมทำงานในโปรเจคได้)

ก่อนเริ่มทำงานของเรา


ทำความเข้าใจกันก่อนว่าสำหรับในบทความนี้จะไม่ได้สอนการใช้ Command line หรือ Terminal เพื่อให้ Git อัปโหลดโปรเจคขึ้น GitHub นะครับ และใครอยากศึกษาเพิ่มเติมแนะนำ Try Git ตัวนี้เลยครับ
ดาวน์โหลดตัวโปรเจคในบทความนี้ได้ที่ GitHub และ ตัวอย่าง

1. ขั้นตอนการนำโปรเจคขึ้น GitHub

เมื่อเราสมัครสมาชิกเรียบร้อยแล้วให้ทำการเลือกปุ่มบวกและกด New Responsitory ให้ทำตามรูปได้เลยครับ

จากนั้นกดปุ่ม Upload Files เพื่อเพิ่มชิ้นงานโปรเจคเราได้เลย

upload files

แล้วเราจะได้ไฟล์มาครับ




2. ขั้นตอนการเปิดใช้ GitHub Pages

ให้ทำการเลือกปุ่ม Settings

Setting

เลื่อนลงมาด้านล่างจะเจอ GitHub Pages แล้วให้เลือก Master branch จากนั้นกด Save

Master branch

3. เสร็จเรียบร้อยพร้อมสู่สาธารณชน

ตอนนี้เราสามารถเข้าไปดูผลงานได้แล้วที่ www.username.github.io/respository เปลี่ยนตัวหนาเป็นของเราเองได้เลย

 

เพิ่มเติมกันนิดครับ

เนื่องจากไฟล์โปรเจคที่ได้อัปโหลดขึ้นไปอาจจะดูธรรมดา แต่เราสามารถเลือกใช้ธีมของ GitHub ได้ด้วย โดยการเลือกไปที่ Change Theme ในหน้า Setting

 

เลือกธีมสวยๆได้เลย โดยมีข้อแม้ว่าเฉพาะไฟล​์ Readme.md เท่านั้นที่จะได้รับการเปลี่ยนแปลงธีม ถ้าหากว่าเราได้อัพไฟล์ index.html ลงไปแล้วนั้น ธีมที่เราเลือกจะไม่แสดงผลนะครับ

Themes

บันทึกแนะนำ

  • แจ่มมมแมวววว

    • Kopkap

      ลองแล้วหรือยัง555