Making of adkdev.com Part 2: GitHub pages and Cloudflare

June 18, 2017
howto github pages cloudflare

เมื่อวานเราได้ Introduction ไปแล้ว วันนี้จะต่อในส่วนของการใช้ GitHub pages เป็น Web Hosting และการใช้ Cloudflare เป็น DNS server เพื่อให้ชี้ DNS records มาที่ GitHub ครับ

GitHub pages with custom domain

GitHub pages แบ่งเป็น 2 ประเภท คือ User/Organization site และ Project site

โดยในส่วนนี้เราจะเลือกใช้แบบแรก คือเป็น website ของ user เรา วิธีการก็ง่ายๆ แค่สร้าง repository เป็น username.github.io โดยช่อง username นั้นก็เป็น username ของเรา ในกรณีนี้ ก็จะได้เป็น adkdev.github.io

GitHub page - Create

โดยให้เลือก option “Initialize this repository with a README” ไว้ด้วย เพื่อไว้แสดงข้อความบนหน้าเว็บชั่วคราวไว้ก่อน

หากไม่ต้องการใช้ domain เป็นของตัวเอง ก็จบแต่เพียงเท่านี้ครับ ไม่ต้องทำอะไรเพิ่ม

แต่ถ้าหากต้องการใช้ domain ตัวเอง ก็ง่ายมั่กๆ แค่ไปแก้ค่า settings ใน github เท่านั้นเอง

สำหรับตัวอย่างของเว็บนี้ ก็ปรับ settings ตามนี้

GitHub page - Custom domain

จากนั้น GitHub จะสร้างไฟล์ขึ้นมา 1 ไฟล์ชื่อ CNAME เพิ่มใน repository ของเราโดยข้อความข้างในก็เป็นชื่อ domain ของเรานั่นเอง

เป็นอันเสร็จพิธีในส่วนของ GitHub pages

Cloudflare free DNS server

เมื่อเรามี web server แล้ว จด domain name แล้ว คราวนี้ก็ถึงคราวที่จะทำให้ ทั้งคู่รู้จักกัน ปกติแล้ว หากเราเช่า web hosting ทั่วไป เราจะใช้ dns ของผู้ให้บริการนั้นๆ เพราะเขาจะมี dns server บริการให้เรา และจะเชื่อมกับ web server ให้เราเอง

แต่… ในงานนี้ เราใช้ GitHub pages ซึ่งไม่มี DNS server ให้เรา ทำไงดีละทีนี้ ทางออกก็คือต้องไปหาผู้ให้บริการ Free DNS Server ซึ่งในตลาด ก็จะมีอยู่หลายเจ้า ที่ให้บริการในเรื่องนี้อยู่
(หากมี DNS Server เองอยู่แล้ว ข้ามส่วนนี้ไปได้ครับ สามารถดู ip server ตาม 4 ตัวเลือกด้านล่าง)

และวันนี้เราก็จะเลือกใช้ Cloudflare ก็ตามปกติเหมือน service ทั่วไป คือต้องสมัครสมาชิกก่อน จากนั้นเพิ่ม DNS records

โดยการเพิ่ม DNS records นั้นจะแตกต่างไป ว่าเราอยากให้เว็บเรามี domain รูปแบบไหน โดย github มีให้เลือก 4 แบบ คือ

  1. แบบไม่มี www นำหน้า เช่น adkdev.com
  2. แบบมี www นำหน้า เช่น www.adkdev.com
  3. แบบทั้งมีและไม่มี www นำหน้า เช่น adkdev.com และ www.adkdev.com
  4. หรือจะเลือกแบบเป็น sub domain เช่น blog.adkdev.com

ซึ่งแต่ละแบบ จะ dns record ให้เพิ่มแตกต่างกันไป

และในที่นี้เราจะเลือกข้อ 1) แบบไม่มี www นำหน้า ตามสมัยนิยม โดยให้ใช้ IP ให้ ณ ปัจจุบัน วันนี้ มีให้ใช้ 2 ip คือ 192.30.252.153 และ 192.30.252.154

วิธีเพิ่ม DNS records บน Cloudflare

  1. เพิ่ม website เข้าไป โดยกรอก domain ของเรา ให้ระบบ scan หา dns records ในปัจจุบัน (ถ้ามี) Cloudflare - Add site
  2. เพิ่ม type “A” records ตามด้านล่างนี้ โดยเปลี่ยน domain เป็น domain ของคุณ Cloudflare - Add records CNAME record ที่เห็น ตั้งให้เป็น alias ไปที่ adkdev.github.io เพื่อให้ GitHub redirect ไปหน้าเว็บแบบไม่มี www ให้
  3. กด Next แล้วเลือก package แบบฟรี หรือจะเลือกแบบเสียเงิน ก็ตามสะดวก (สามารถปรับเปลี่ยน package ได้้ภายหลัง)
  4. จากนั้น จะมีหน้าบอกรายละเอียดของ Cloudflare Nameservers ซึ่งแต่ละคนจะได้ไม่เหมือนกัน Cloudflare - Nameservers จากนั้น เราก็ไปที่หน้าจัดการ Domain name ของเรา ที่ Registrar ที่ได้จดไว้ แล้วก็ใส่ Nameservers ตามข้อมูลด้านบน จากนั้นก็รอสักหน่อย เพราะ NameServers จะมี TTL (Time To Live) อยู่ ซึ่งปกติจะตั้งกันไว้สูงมาก เป็นวันๆ ด้วยเหตุที่ว่า โดยทั่วไปแล้ว เราไม่ได้ย้าย NameServer กันบ่อยๆ และแต่ละที่ก็มีค่าเวลาไม่เท่ากัน

โดยสามารถเข้าไปดูสถานะได้เรื่อยๆ ว่า active แล้วหรือยัง อย่างภาพด้านล่างนี้ คือ active แล้ว

Cloudflare - Status

เมื่อสถานะเป็น Active แล้วก็ลองเข้า website เราดู http://adkdev.com ก็จะเจอข้อความจาก readme ของ repository ของเรา (ถ้าเลือก Initialize readme ไว้)

เสร็จเรียบร้อย สำหรับการใช้ GitHub pages เป็น Web hosting และ Cloudflare เป็น DNS server แบบฟรี ไม่มีเสียตังค์

ในตอนถัดไป ก็จะเป็นแกนหลักแล้วละครับ คือการใช้ Hugo สร้าง Static web site

วันนี้ ขอจบตอนแต่เพียงเท่านี้ สวัสดีครับ บายๆ

comments powered by Disqus