การใช้งาน GitHub Page เพื่อโฮสเว็บไซต์ที่สร้างด้วย Jekyll

หลังจากบล็อกที่แล้วได้นำเสนอการสร้างเว็บไซต์ด้วย Jekyll กันไปแล้วต่อไปเราจะมาดูวิธีการใช้งานและโฮสต์เว็บด้วย GitHub Pages กัน

ทำไมต้องโฮสต์เว็บไซต์ที่ GitHub Page?

• ฟรี! GitHub ให้เราสามารถโฮสต์เว็บส่วนตัวได้แบบฟรีๆ 1 เว็บ
• ง่าย Jekyll นั้นถูกสร้างมาเพื่อใช้กับ GitHub เพราะว่าเว็บที่จะโฮสต์บน GitHub ได้ต้องเป็น static website (สร้างจาก HTML&CSS และ JavaScript เท่านั้น) ซึ่ง Jekyll เองก็เป็น static site genarator
• Git practicing ได้เรียนรู้การใช้งานใช้งาน Git และ GitHup ไปในตัว

สิ่งที่จำเป็นต้องมีก่อนการใช้งาน GitHub Page

• Git ถ้ายังไม่มีให้ไป Download และ install ก่อน
• GitHub user ถ้ายังไม่มีก็สามารถสมัครใช้งานใหม่ได้ที่ GitHub

ถ้ามีครบแล้วก็ไปขั้นตอนต่อไปเลย

สร้าง Repository บน GitHub

• ให้ล็อกอินเข้าไปที่ GitHup user ของเราเพื่อสร้าง repository ใหม่ +New repository

• จากนั้นก็สร้าง repository โดยใช้ชื่อ reposotory เป็นไปตามรูปแบบนี้เท่านั้น Username.github.io ถ้าเป็นรูปแบอื่นไม่ได้ รวมทั้งต้องกำหนด public ด้วยเพราะว่าเราจะสร้างเว็บซึ่งต้องให้คนอื่นเข้าถึงด้วย

โคลน repository ที่เราพึ่งสร้างลงมาที่เครื่องเรา

• เปิด terminal ขึ้นมา (จะใช้ command prompt, Git bash อื่นๆ) แล้วสร้าง folder ที่จะใช้ทำงาน

1
2
$ mkdir /path/to/source-code
$ cd /path/to/source-code

• ไปที่ GitHub repositoy ของเราแล้ว copy URL ของ repository ที่เราสร้างขึ้นมา

• โคลน repository โดยใช้คำสั่ง Git

1
2
$ git clone https://github.com/username/username.github.io.git
$ cd username.github.io

ทดสอบการอัพโหลดไฟล์ขึ้น GitHub ด้วยคำสั่ง Git

• สร้างไฟล์ใหม่ไว้ใน folder ของที่เราทำงานอยู่ให้ชื่อ index.html
• โดยในไฟล์ให้พิมพ์ช้อความ Hello Worldเข้าไป

1
2
3
4
5
6
7
8
$ git add index.html
...

$ git commit index.html -m “Initial commit with my Hello world”
...

$ git push origin master
...

• เสร็จเรียบร้อย ให้เปิดบราวเซอร์ขึ้นมาแล้วเข้าไปที่ URL ของ repository เรา “https://username.github.io” ก็จะเจอกับข้อความ
  

Hello World

อัพโหลดเว็บไซต์ที่สร้างด้วย Jekyll จากบล็อกที่แล้วไปที่ GitHup Page

• copy ไฟล์ที่อยู่ในโฟลเดอร์ “my-awesome-site” ทั้งหมดไปแทนที่ไฟล์ในโฟลเดอร์ที่เราโคลนมาเมื่อก่อนหน้าจากนั้นก็ใช้คำสั่ง Git เพื่ออัพไฟล์ไปที่ GitHub

1
2
3
4
5
6
7
8
$ git add -A
...

$ git commit -m “Add Jekyll”
...

$ git push origin master
...

สำเร็จแล้ว!