วิธีสร้างเว็บไซต์ฟรีด้วยชื่อโดเมน โฮสติ้ง และการเข้ารหัส SSL แบบกำหนดเอง

การสร้างเว็บไซต์เป็นการลงทุนที่จริงจัง คุณต้องจ่ายเงินสำหรับทุกขั้นตอนของการสร้างเว็บไซต์

คุณต้องการสร้างเว็บไซต์ฟรีสำหรับการเติบโตส่วนบุคคลหรือในอาชีพหรือไม่? นี่คือวิธีการออกแบบเว็บไซต์ถัดไปของคุณด้วยชื่อโดเมนที่กำหนดเอง โฮสติ้งฟรีตลอดชีพ และการเข้ารหัส SSL ฟรีโดยสิ้นเชิง ว้าว! คุณจะขออะไรอีก

การมีเว็บไซต์ช่วยเพิ่มตัวเลขการเติบโตของคุณนั้นไม่ใช่เรื่องยาก และวันนี้เป็นการลงทุนมากกว่าความฟุ่มเฟือย สิ่งนี้ไม่เป็นความจริงสำหรับธุรกิจเท่านั้น แต่บุคคลทั่วไปก็สามารถได้รับประโยชน์อย่างมากผ่านเว็บไซต์ส่วนตัว

ไม่ว่าจะจดทะเบียนชื่อโดเมน โฮสต์เนื้อหาของเว็บไซต์ของคุณ สร้างเว็บไซต์ หรือเปิดใช้งานการเข้ารหัส SSL คุณก็ควรพร้อมที่จะล้างกระเป๋าของคุณ นอกจากความเจ็บปวดแล้ว ค่าใช้จ่ายบางส่วนเหล่านี้ยังเกิดขึ้นซ้ำๆ และดำเนินต่อไปตลอดไป

จะเกิดอะไรขึ้นถ้าฉันบอกคุณว่าคุณสามารถสร้างเว็บไซต์ฟรีในขณะที่ทำตามขั้นตอนสำคัญทั้งหมดที่กล่าวมาข้างต้นในการสร้างเว็บไซต์ได้ฟรีเช่นกัน คุณอาจทำทั้งหมดนี้ได้ฟรีหากคุณเป็นนักเรียน

หากคุณรู้จัก GitHub คุณอาจรู้จัก GitHub Pages ใช้บริการฟรีที่มาพร้อมกับบัญชี GitHub ทุกบัญชี GitHub Pages ให้ผู้ใช้ทุกคนสร้างเว็บไซต์ฟรีและโฮสต์ได้ แต่มีข้อแม้อยู่มาก ชื่อโดเมนของเว็บไซต์ฟรีเหล่านี้ลงท้ายด้วย github.io ซึ่งทำลายความเป็นมืออาชีพของเว็บไซต์ของคุณ

GitHub Student Developer Pack คืออะไร

ผู้ใช้จำนวนน้อยลงจะให้ความสำคัญกับเว็บไซต์ของคุณ และการมีชื่อโดเมนที่ยาวโดยไม่จำเป็นนั้นไม่ใช่ความคิดที่ดี แต่เดี๋ยวก่อน! เราไม่ได้อยู่ที่นี่เพื่อพูดคุยเกี่ยวกับข้อดีหรือข้อแม้ของ GitHub Pages ฉันสัญญาว่าจะให้คุณสร้างเว็บไซต์ฟรีด้วยชื่อโดเมนที่กำหนดเองได้ และนี่คือวิธีที่คุณสามารถทำได้

GitHub มอบโอกาสในการใช้ชุดเครื่องมือที่ยอดเยี่ยมซึ่งเต็มไปด้วยเครื่องมือออนไลน์ที่มีประโยชน์สำหรับนักเรียนทุกคนที่ลงทะเบียนเรียนในหลักสูตรระดับปริญญาหรืออนุปริญญา หรือที่เรียกว่า GitHub Student Developer Pack ชุดนี้ประกอบด้วยการสมัครใช้งานแบบมืออาชีพและส่วนลดที่น่าเหลือเชื่อสำหรับเครื่องมือยอดนิยมอย่าง Canva, Namecheap, Microsoft Azure, Discord, Name.com และ StreamYard รวมถึงรายการอื่นๆ อีกกว่าพันล้านรายการ

ในบทความนี้ เราจะใช้ Namecheap เพื่อลงทะเบียนโดเมนที่กำหนดเองฟรี และใช้หน้า GitHub เพื่อโฮสต์เว็บไซต์ของเรา จากนั้นเราจะดูวิธีออกแบบและอัปโหลดไฟล์ HTML, CSS และ JavaScript ของคุณไปยังหน้า GitHub ในที่สุด เราจะเปิดใช้งานการเข้ารหัส SSL สำหรับเว็บไซต์ด้วย แต่ก่อนอื่น เราต้องลงทะเบียนสำหรับ Student Developer Pack

จะสมัคร GitHub Student Developer Pack ได้อย่างไร

ขั้นตอนการลงทะเบียน Student Developer Pack มาจากการมีที่อยู่อีเมลของนักศึกษาที่มหาวิทยาลัยอนุญาต ที่อยู่อีเมลของนักเรียนมักจะลงท้ายด้วยชื่อโดเมนของมหาวิทยาลัยของคุณ เช่น [email protected] มีวิธีอื่นในการลงทะเบียนชุดดังกล่าว แต่ต้องใช้เวลาตรวจสอบมากกว่าการใช้อีเมลของนักเรียนมาก หากคุณมีที่อยู่อีเมลของนักเรียนพร้อม วิธีลงทะเบียนสำหรับชุดมีดังนี้:

ขั้นตอนที่ 1: ไปที่การศึกษา GitHub และคลิกที่ตัวเลือกลงชื่อเข้าใช้

คุณสามารถเข้าสู่ระบบโดยใช้ข้อมูลประจำตัวของคุณ หากคุณมีแพ็คอยู่แล้ว มิฉะนั้น คุณสามารถทำตามขั้นตอนด้านล่าง

คลิกที่ สร้างบัญชี ตัวเลือกในหน้าต่างลงชื่อเข้าใช้

ขั้นตอนที่ 2: ถัดไป ลงทะเบียนโดยใช้อีเมลของนักเรียนและสร้างบัญชี

ขั้นตอนที่ 3: เมื่อได้รับแจ้งว่า “ข้อใดอธิบายสถานะทางวิชาการของคุณได้ดีที่สุด ให้เลือกนักเรียน

ขั้นตอนที่ 4: กรอกรายละเอียดในกล่องที่จำเป็นเกี่ยวกับชื่อโรงเรียนของคุณและจุดประสงค์ในการใช้ GitHub

ขั้นตอนที่ 5 : สุดท้าย ส่งใบสมัครของคุณโดยใช้ตัวเลือก “ส่งข้อมูลของคุณ”

คุณควรได้รับอีเมลยืนยันเกี่ยวกับชุดนักพัฒนาซอฟต์แวร์หากใบสมัครของคุณได้รับการอนุมัติจาก GitHub กระบวนการนี้มักใช้เวลาสองสามวัน แต่เวลาอาจแตกต่างกันอย่างมากในช่วงเวลาเร่งด่วน

วิธีสมัคร GitHub Student Developer Pack โดยไม่ต้องใช้อีเมลนักเรียน

GitHub ยังให้ตัวเลือกแก่คุณในการสมัครชุดโดยใช้บัตรประจำตัวนักศึกษาที่ถูกต้องหรือหลักฐานอื่นใดเกี่ยวกับสถานะทางวิชาการของคุณ คำเตือนเพียงอย่างเดียวคือเวลารอนานและอัตราการปฏิเสธที่สูงขึ้น อย่างไรก็ตาม คุณสามารถสมัครชุดนักเรียนด้วยวิธีนี้ได้ดังนี้:

ขั้นตอนที่ 1: ทำตามขั้นตอนที่กล่าวข้างต้นเพื่อสร้างบัญชีผ่านอีเมลส่วนตัวของคุณ

ขั้นตอนที่ 2: ตอนนี้อัปโหลดหลักฐานสถานะทางวิชาการของคุณโดยใช้ตัวเลือกกล้องหรืออัปโหลดภาพถ่ายโดยตรงไปยัง GitHub โดยใช้ปุ่มอัปโหลด

ขั้นตอนที่ 3: ถัดไป กรอกรายละเอียดที่จำเป็นทั้งหมด เช่น ชื่อโรงเรียนและวัตถุประสงค์ของการใช้ GitHub

ขั้นตอนที่ 4: ส่งใบสมัครของคุณ

จะลงทะเบียนโดเมนที่กำหนดเองของคุณโดยใช้ Namecheap ได้อย่างไร

ฉันคิดว่าคุณมีบัญชี GitHub Education แล้ว ขั้นตอนต่อไปนี้เกี่ยวข้องกับการใช้ Namecheap เพื่อลงทะเบียนโดเมนที่กำหนดเองฟรีและโฮสต์ผ่าน GitHub Pages ทำตามขั้นตอนเหล่านี้เพื่อจดทะเบียนชื่อโดเมนที่คุณต้องการ:

ขั้นตอนที่ 1: ลงชื่อเข้าใช้บัญชี GitHub Education แล้วไปที่ส่วนสวัสดิการ

คุณควรเห็น Web Dev Kit และ Virtual Event Kit

ขั้นตอนที่ 2: ไปที่ Virtual Event Kit และเลื่อนลงเพื่อค้นหา Namecheap

GitHub เสนอการจดทะเบียนชื่อโดเมน 1 ปีบน .me TLD ซึ่งคุณสามารถเข้าถึงได้โดยคลิกที่ตัวเลือกรับการเข้าถึง

ขั้นตอนที่ 3: หน้าต่างต่อไปนี้จะขอให้คุณอนุญาตคำขอเชื่อมต่อจาก Namecheap ไปยังบัญชี GitHub ของคุณ อนุญาต Namecheap และดำเนินการในขั้นตอนต่อไป

คุณควรเห็นข้อความแจ้งว่า "เรายืนยันชุดนักเรียนของคุณด้วย GitHub สำเร็จแล้ว" หลังจากการอนุญาตสำเร็จ

ขั้นตอนที่ 4: ค้นหาโดเมนที่คุณต้องการผ่านแถบค้นหา แล้วคลิกค้นหา

คุณควรเห็นชื่อโดเมนที่พร้อมใช้งานในหน้าจอถัดไป หากชื่อโดเมนของคุณพร้อมใช้งาน คุณสามารถดำเนินการซื้อได้ฟรี

ขั้นตอนที่ 5: ชำระเงินโดยใช้ที่อยู่อีเมล GitHub Education และเลือก GitHub Pages เป็นวิธีโฮสต์ของคุณขณะดำเนินการ

หลังจากลงทะเบียนชื่อโดเมนที่กำหนดเองของคุณสำเร็จและเลือก GitHub Pages เป็นโฮสติ้งของคุณ Namecheap ควรสร้างที่เก็บในบัญชี GitHub ของคุณโดยอัตโนมัติ ที่เก็บนี้ว่างเปล่าโดยสมบูรณ์และมีเฉพาะไฟล์ README.md

คุณสามารถเข้าถึงที่เก็บนี้ได้โดยลงชื่อเข้าใช้บัญชี GitHub ของคุณและคลิกส่วน "ที่เก็บของคุณ" GitHub Pages ไม่มีเครื่องมือภาพและธีมที่สร้างไว้ล่วงหน้าสำหรับเว็บไซต์ของคุณ คุณต้องเขียนโค้ดทั้งเว็บไซต์ด้วยตนเองและอัปโหลดไฟล์ที่เกี่ยวข้องไปยังที่เก็บ GitHub ที่สร้างขึ้นใหม่

จะสร้างเว็บไซต์ฟรีและโฮสต์บน GitHub Pages ได้อย่างไร

ดังที่กล่าวไว้ข้างต้น คุณจะต้องสร้างไฟล์ HTML, CSS และ JavaScript ทั้งหมดที่เกี่ยวข้องกับเว็บไซต์ของคุณ หากคุณเป็นผู้ใช้ Web Dev และรู้วิธีเขียนโค้ดผ่าน คุณก็ควรอัปโหลดไฟล์ของคุณในที่เก็บ GitHub และทำให้เว็บไซต์ของคุณทำงาน คุณสามารถเลื่อนไปที่ส่วนของบทความนี้ที่เกี่ยวข้องกับการอัปโหลดรหัสเว็บไซต์ไปยัง GitHub Pages

แต่ถ้าคุณเป็นคนที่มีข้อมูลเพียงเล็กน้อยหรือไม่มีเลยเกี่ยวกับ Web Dev เราก็มีข้อมูลครอบคลุมให้คุณ คุณสามารถใช้ขั้นตอนด้านล่างและออกแบบเว็บไซต์ของคุณเองโดยใช้ HTML พื้นฐาน:

ขั้นตอนที่ 1: ไปที่ HTML5 UP แล้วเลื่อนไปที่การออกแบบเว็บไซต์ที่คุณต้องการ คุณสามารถเลือกธีมที่สร้างไว้ล่วงหน้าอื่นๆ จากแพลตฟอร์มใดก็ได้ ฉันได้เลือก "Massively" จาก HTML5 UP แล้ว แต่คุณสามารถดาวน์โหลดและปรับแต่งการออกแบบเว็บไซต์ได้ตามต้องการ

ขั้นตอนที่ 2: แยกไฟล์ zip ที่ดาวน์โหลดมาจากการออกแบบเว็บไซต์ที่คุณชื่นชอบ

คุณควรเห็นไฟล์ชื่อ index.html และ generic.html และโฟลเดอร์ต่างๆ เช่น สินทรัพย์และรูปภาพในโฟลเดอร์ที่แยกออกมา

ขั้นตอนที่ 3: ตอนนี้เปิดไฟล์ที่แยกออกมาโดยใช้ Visual Studio Code แล้วเลือกไฟล์ index.html

ขั้นตอนที่ 4: ดาวน์โหลดและติดตั้งส่วนขยาย “Live Server” ใน Visual Studio Code หากคุณยังไม่มี

ขั้นตอนที่ 5: เลือกไฟล์ index.html คลิกปุ่มเมาส์ขวาแล้วเลือกตัวเลือก "เปิดในเซิร์ฟเวอร์จริง" ตัวเลือกนี้ช่วยให้คุณเห็นภาพการเปลี่ยนแปลงในไฟล์ HTML ในเบราว์เซอร์ของคุณแบบเรียลไทม์

วิธีปรับแต่งการออกแบบเว็บไซต์ของคุณ?

ฉันจะไม่เรียกกระบวนการนี้ว่า "ขั้นตอน" ในการปรับแต่งเว็บไซต์ของคุณ การปรับแต่งไฟล์ HTML นั้นขึ้นอยู่กับความต้องการของคุณทั้งหมด แต่นี่คือวิธีที่ฉันปรับแต่งการออกแบบ “จำนวนมาก” จาก HTML5 UP และแปลงเป็นพอร์ตโฟลิโอ คุณสามารถเลือกใช้แรงบันดาลใจจากสิ่งนี้หรือปรับแต่งเว็บไซต์ของคุณทั้งหมดด้วยตัวเอง ทางเลือกเป็นของคุณ!

การแก้ไขแท็กชื่อเรื่องและย่อหน้า

เริ่มต้นกระบวนการปรับแต่งของฉัน ฉันเปลี่ยนชื่อแท็กเป็น "อย่างมากมาย" แท็กชื่อไฟล์ HTML ของคุณจะกำหนดชื่อในขณะที่เปิดในแท็บเบราว์เซอร์ ชื่อเริ่มต้นสำหรับ Massively ควรเป็น "Massively โดย HTML5 UP" และฉันขอแนะนำให้เปลี่ยนเป็นสิ่งที่เว็บไซต์ของคุณมีลักษณะคล้ายกัน

ฉันเปลี่ยนชื่อแท็กเป็น “Samyak Goswami | Tech Content Writer” ซึ่งเหมาะกับผลงานของฉัน ถัดไป ฉันได้เปลี่ยนส่วน Intro ของเว็บไซต์ซึ่งกล่าวว่า "This is Massively" (มีอยู่ในแท็ก H1) และทำให้เป็น "Samyak's Portfolio" ด้วยเหตุผลที่ชัดเจน ต่อจากนั้น ฉันเปลี่ยนข้อความด้านล่างในแท็กย่อหน้าเป็น “การแสดงโครงการและความสามารถของฉัน”

ไปที่ส่วนการนำทาง (Nav) ในไฟล์ดัชนี ฉันละเว้นปุ่มการนำทางสองในสามปุ่มที่อยู่ในแท็กรายการ ฉันต้องการสร้างเว็บไซต์แบบหน้าเดียวที่มีรายละเอียดทั้งหมดอยู่ในหน้าเดียว แต่คุณสามารถปรับเปลี่ยนจำนวนปุ่มนำทางได้ตามต้องการ

ต่อมาฉันเปลี่ยนข้อความ "This is Massively" บนปุ่มนำทางเป็น "My Articles"

การปรับเปลี่ยนลิงก์และไอคอนโซเชียลมีเดีย

คุณต้องเห็นไอคอนโซเชียลมีเดียต่างๆ บนเซิร์ฟเวอร์ที่ใช้งานจริง เช่น Twitter, Facebook, Instagram และ GitHub ฉันตัดสินใจที่จะละเว้น Twitter และ Facebook และเก็บ Instagram และ LinkedIn ไว้สำหรับกรณีการใช้งานของฉัน

คุณสามารถแก้ไขไอคอนโซเชียลมีเดียและลิงก์ได้โดยไปที่ส่วนการนำทาง (Nav) และเลื่อนไปที่แท็กรายการด้วย Twitter, Instagram และอื่นๆ ที่เขียนอยู่ภายใน

สังเกตว่าไม่มีลิงก์แนบมากับไอคอนโซเชียลมีเดียเหล่านี้เนื่องจากแท็ก href เว้นว่างไว้ คุณสามารถเพิ่มลิงก์ไปยังแท็ก href โดยแทนที่ “#” ด้วยลิงก์ที่คุณต้องการ

การแก้ไขเนื้อหาของโฮมเพจ

ก่อนอื่น ฉันเปลี่ยนแท็ก H2 และทำให้เป็น "ฉันชื่อ Samyak Goswami" จากนั้นจึงเปลี่ยนแท็กย่อหน้าเป็น "ฉันเป็นผู้ที่ชื่นชอบเทคโนโลยี…..” ฉันขอแนะนำให้คุณเปลี่ยนแท็ก H2 ด้วยสิ่งที่ตรงกับเนื้อหาของหน้าแรกของคุณและแท็กย่อหน้าที่อธิบาย

ตอนนี้เรากำลังคิดส่วนที่สำคัญที่สุดของการปรับแต่งนี้ การแก้ไขเนื้อหาของไทล์บทความ

ในการดำเนินการนี้ ให้ไปที่ส่วนโพสต์ในไฟล์ดัชนี แล้วคุณจะเห็นข้อมูลโค้ดหลายรายการในแท็กบทความ คุณสามารถเพิ่มลิงก์ไปยังเรื่องราวของคุณได้โดยแก้ไขส่วน href เช่นเดียวกับที่เราทำในขณะที่เพิ่มลิงก์ไปยังไอคอนโซเชียลมีเดีย

หลังจากนั้น คุณสามารถเปลี่ยนชื่อบทความโดยแก้ไขเนื้อหาภายในแท็ก H2 คุณยังสามารถเพิ่มคำอธิบายให้กับบทความของคุณโดยใช้แท็กย่อหน้า

ทำขั้นตอนซ้ำสำหรับแต่ละบทความโดยเพิ่มลิงก์ เปลี่ยนชื่อ และเพิ่มคำอธิบายให้กับบทความทั้งหมดของคุณ

การเพิ่มรูปภาพไปยังเว็บไซต์ของคุณ

คุณต้องสังเกตว่าการแสดงตัวอย่างดูแตกต่างจากภาพที่ปรากฏบนเว็บไซต์ HTML5 UP อย่างมาก นี่เป็นเพราะเครื่องบินและภาพถ่ายที่ไม่สุภาพในไฟล์ที่ปรับแต่งได้ มาเติมสีสันให้เว็บไซต์ของเราโดยเพิ่มรูปภาพที่กำหนดเองลงไป

โดยไปที่โฟลเดอร์ที่คุณเคยแตกไฟล์ zip "Massively" ไว้ก่อนหน้านี้ เปิดโฟลเดอร์ที่แยกออกมาแล้วไปที่โฟลเดอร์รูปภาพ คุณควรเห็นภาพต่างๆ ที่ชื่อ bg, pic01, pic02 และอื่นๆ เหล่านี้เป็นภาพที่เชื่อมโยงกับบทความของเราในแท็กบทความ

คุณสามารถเพิ่มรูปภาพที่กำหนดเองและแก้ไขไฟล์ดัชนีด้วยชื่อของรูปภาพเหล่านี้หรือเพิ่มรูปภาพและตั้งชื่อให้คล้ายกับรูปภาพเริ่มต้น การให้ชื่อที่เหมือนกันของรูปภาพช่วยให้เราไม่ต้องแก้ไขโค้ดและใช้เวลามากในภายหลัง

ฉันแนะนำให้คุณตรวจทานและแก้ไขส่วนอื่นๆ ของเว็บไซต์ของคุณที่ไม่สำคัญ นี่คือพอร์ตโฟลิโอที่ฉันสร้างขึ้นโดยใช้ขั้นตอนที่ฉันได้กล่าวไว้ข้างต้น: samyakgoswami.me

จะอัพโหลดโค้ดเว็บไซต์ของคุณไปที่ GitHub Pages ได้อย่างไร?

หลังจากเขียนโค้ดและออกแบบเว็บไซต์ของคุณแล้ว ก็ถึงเวลาอัปโหลดไปยัง GitHub Pages และเผยแพร่บนอินเทอร์เน็ต

วิธีอัปโหลดเว็บไซต์ของคุณไปยัง GitHub Pages มีดังนี้

ขั้นตอนที่ 1: ลงชื่อเข้าใช้บัญชี GitHub ของคุณและไปที่ส่วน My Repositories

ขั้นตอนที่ 2: คุณควรเห็นที่เก็บชื่อ your_username.github.io เข้าไปในที่เก็บนี้

ขั้นตอนที่ 3: คุณควรเห็นตัวเลือกในการสร้างไฟล์ของคุณเองหรืออัปโหลดไฟล์ไปยังที่เก็บ GitHub

ขั้นตอนที่ 4: เลือกไฟล์และโฟลเดอร์ทั้งหมดห้าไฟล์ สินทรัพย์ รูปภาพ องค์ประกอบ ทั่วไป ดัชนี แล้วลากและวางลงในที่เก็บ

หลังจากอัปโหลดไฟล์แล้ว ให้คอมมิตโค้ดและรอจนกว่า GitHub จะประมวลผลไฟล์ของคุณ

ขั้นตอนที่ 5: ไปที่การตั้งค่า>หน้า GitHub เพื่อดูสถานะของเว็บไซต์ของคุณ คุณควรเห็นข้อความแจ้งว่า "เว็บไซต์ของคุณเผยแพร่ที่ your_custom_domain"

ตอนนี้คุณสามารถไปที่ที่อยู่เว็บของคุณและตรวจสอบเว็บไซต์ด้วยตัวเอง โปรดจำไว้ว่า เว็บไซต์อาจใช้เวลาสักครู่ก่อนที่จะเริ่มใช้งานจริง

วิธีเปิดใช้งานการเข้ารหัส SSL ใน GitHub Pages

HTTP เป็นวิธีที่ไม่ปลอดภัยในการจัดการคำขอของผู้ใช้บนเว็บไซต์ของคุณ ใครก็ตามที่มีเจตนาร้ายและมีความรู้ด้านเทคนิคที่ดีสามารถสกัดกั้นการโต้ตอบระหว่างผู้ใช้กับเว็บไซต์ของคุณได้ ในทางกลับกัน HTTPS ให้เซสชันการท่องเว็บที่ปลอดภัยยิ่งขึ้นแก่ผู้เยี่ยมชมของคุณ GitHub Pages เสนอการเข้ารหัส HTTPS ฟรี และนี่คือวิธีที่คุณสามารถใช้ประโยชน์ได้:

เลื่อนไปที่ส่วนหน้าในที่เก็บ

คุณควรเห็นตัวเลือก "บังคับใช้ HTTPS" ที่ท้ายหน้าต่าง การเข้ารหัส SSL ควรใช้งานได้ทันทีที่คุณทำเครื่องหมายที่ช่องทำเครื่องหมายบังคับใช้ HTTPS

ในกรณีที่คุณพบว่าตัวเลือกบังคับใช้ HTTPS ไม่พร้อมใช้งานสำหรับโดเมนของคุณ คุณสามารถเปิดใช้งานการเข้ารหัส SSL ได้โดยใช้ขั้นตอนด้านล่าง:

ขั้นตอนที่ 1 : ลงชื่อเข้าใช้บัญชี Namecheap ของคุณและไปที่ส่วน "รายการโดเมน"

ขั้นตอนที่ 2: ไปที่ Manage Domain แล้วไปที่ส่วน "Advanced DNS"

คุณควรเห็นระเบียน CNAME และ A ที่มีอยู่

เพิ่มระเบียน A ต่อไปนี้โดยมีโฮสต์เป็น “@” และที่อยู่ IP เป็น “185.199.108.153” อันถัดไปที่มีชื่อโฮสต์ “@” และที่อยู่ IP เป็น “185.199.109.153”

ติดตามแนวโน้มจนกว่าคุณจะมี 4 A บันทึกถึงที่อยู่ IP “185.199.111.153”

ลบระเบียน A ก่อนหน้าทั้งหมด

ขั้นตอนที่ 3: ถัดไป เพิ่มระเบียน CNAME โดยมี Host เป็น “www” และ Value เป็นชื่อผู้ใช้ GitHub (dot) github (dot) io

ลบระเบียน CNAME ก่อนหน้า ในท้ายที่สุด การตั้งค่า DNS ของคุณควรมี 4 A Records และ 1 CNAME Records

ขั้นตอนที่ 4: ไปที่หน้า GitHub ในส่วนการตั้งค่า ตัวเลือกบังคับใช้ HTTPS ควรพร้อมใช้งานสำหรับโดเมนของคุณแล้ว

สรุป

GitHub ให้โอกาสที่ยอดเยี่ยมแก่นักเรียนทุกคนในการสร้างเว็บไซต์ฟรีและจัดการมัน แม้ว่าคุณจะใช้ GitHub Pages เพื่อโฮสต์การรับส่งข้อมูลจำนวนมากไม่ได้ แต่จะทำเครื่องหมายทุกช่องสำหรับเว็บไซต์สแตติกขนาดเล็ก ชื่อโดเมน โฮสติ้ง และการเข้ารหัส SSL แบบกำหนดเองที่ให้อภินันทนาการทำให้การเป็นเจ้าของนั้นยอดเยี่ยมยิ่งขึ้น

ตอนนี้คุณสามารถอ่าน “วิธีเลือกโฮสต์เว็บสำหรับเว็บไซต์ใหม่ของคุณ”

ต่อไปนี้เป็นเครื่องมือตรวจสอบความเร็วของหน้าที่จะแจ้งให้คุณทราบเมื่อเว็บไซต์ของคุณหยุดทำงาน