esWizardry embedded system, programming and fascinating things.

การใช้งาน 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

new-repo

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

create-repo


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

  • เปิด terminal ขึ้นมา (จะใช้ command prompt, Git bash อื่นๆ) แล้วสร้าง folder ที่จะใช้ทำงาน
1
2
$ mkdir /path/to/source-code
$ cd /path/to/source-code
  • ไปที่ GitHub repositoy ของเราแล้ว copy URL ของ repository ที่เราสร้างขึ้นมา

copy-to-clipboard


  • โคลน 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
...

สำเร็จแล้ว!