พร้อม ตั้งค่า เปิดใช้: การสร้างไซต์แบบสแตติกด้วยเพจ GitHub

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

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

หน้า GitHub คืออะไร?

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

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

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

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

เว็บไซต์คงที่ vs ไดนามิก

ดังที่เราได้เห็นแล้ว GitHub Pages ให้วิธีการปรับใช้เว็บไซต์แบบสแตติก แต่อะไรคือความแตกต่างระหว่างเว็บไซต์คงที่และเว็บไซต์แบบไดนามิก?

เริ่มต้นด้วยการพูดคุยเกี่ยวกับเนื้อหาในเว็บไซต์ดังกล่าว

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

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

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

โดยทั่วไป เราสามารถพูดได้ว่าเว็บไซต์เป็นแบบคงที่หากมีเพียง HTML, CSS และ JavaScript ที่ส่วนหน้า โดยไม่มีเทคโนโลยีเซิร์ฟเวอร์เช่น PHP หรือ Python ที่โต้ตอบกับฐานข้อมูล

แม้ว่าจะไม่สามารถสร้างเว็บไซต์ไดนามิกโดยใช้ GitHub Pages ได้ แต่คุณสามารถสร้างเว็บไซต์ของคุณเองได้ง่ายๆ โดยใช้ CMS เช่น WordPress หรือโปรแกรมสร้างเว็บไซต์แบบสแตติกอย่าง Gatsby หรือ Hugo

คุณสมบัติหลักของหน้า GitHub

มาดูจุดแข็งของ GitHub Pages ในฐานะบริการโฮสติ้ง:

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

ข้อจำกัด

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

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

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

การสร้างและปรับใช้กับ GitHub Pages: คำแนะนำทีละขั้นตอน

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

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

เข้าเรื่องกันเลย!

1. ลงทะเบียนบน GitHub

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

หลังจากลงชื่อเข้าใช้แล้ว คุณควรจะสามารถสร้างที่เก็บระยะไกลได้

2. สร้างพื้นที่เก็บข้อมูลระยะไกล

ที่เก็บคือไดเร็กทอรีที่คุณเก็บโค้ดทั้งหมดที่เกี่ยวข้องกับโปรเจ็กต์หนึ่งๆ

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

ขั้นตอนต่อไปเหล่านี้มีความสำคัญ:

1. ตั้งชื่อที่เก็บของคุณเป็น "yourusername".github.io
2. ตรวจสอบปุ่มสาธารณะ คุณต้องตั้งค่าที่เก็บเป็น สาธารณะ เพื่อเผยแพร่ไซต์ของคุณ
3. เพิ่ม README

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

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

หลังจากนี้คุณควรมีสิ่งต่อไปนี้:

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

ในการทำเช่นนี้ ให้คลิกเมนู Add file ในที่เก็บของคุณ แล้วเลือกตัวเลือก อัปโหลดไฟล์ จากนั้นเลือกไฟล์ของเว็บไซต์ของคุณ โดยมีไฟล์ HTML หลักชื่อ index.html อย่าลืมใส่ไฟล์ CSS และ JavaScript ทั้งหมดของคุณในที่เก็บข้อมูลด้วย

สุดท้ายให้กดปุ่ม ยอมรับการเปลี่ยนแปลง

ในส่วนต่อไปนี้ เราจะสร้างเว็บไซต์ส่วนตัวอย่างง่ายด้วย HTML และ Bootstrap จากนั้นเราจะอัปโหลดไปยัง GitHub และตั้งค่าเป็นหน้าสาธารณะของ GitHub ด้วยโดเมนที่กำหนดเอง

3. สร้างเว็บไซต์ส่วนตัว

เราจะเริ่มต้นด้วยการโคลน GitHub repo ที่เราเพิ่งสร้างขึ้น ในการทำเช่นนี้ ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งไคลเอนต์ Git ไว้ในคอมพิวเตอร์ของคุณแล้ว (หากยังไม่มี โปรดดูบทช่วยสอนเกี่ยวกับ Git และ GitHub)

ไปที่แท็บ code ของที่เก็บของคุณและคัดลอก SSH URL ในตัวเลือก SHH

จากนั้นเปิดเครื่องเทอร์มินัลหรือบรรทัดคำสั่ง บน Linux ดิสทริบิวชันและ macOS ส่วนใหญ่ คุณสามารถใช้ทางลัด Ctrl + Alt + T หรือค้นหา Terminal จากเมนูแอปของระบบ บน Windows คุณสามารถใช้ Git BASH ที่ติดตั้งตามค่าเริ่มต้นกับไคลเอนต์ Git, CMD, PowerShell หรือ GUI

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

จากนั้นป้อนโฟลเดอร์ใหม่ชื่อ yourusername.github.io ด้วย cd และ ls คุณควรเห็นโฟลเดอร์ .git ซึ่งมีการกำหนดค่าและข้อมูลเมตาของโปรเจ็กต์ รวมถึงไฟล์ README.md หากคุณสร้างขึ้น

เปิดโปรแกรมแก้ไขข้อความที่คุณชื่นชอบ (เช่น Sublime Text) แล้วมาเริ่มสร้างเว็บไซต์ของคุณกันเลย

ที่รูทของที่เก็บ ให้สร้างไฟล์ชื่อ index.html (ชื่อนี้จำเป็นสำหรับ GitHub Pages) และพิมพ์โครงสร้างรหัส HTML ทั่วไป:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

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

เพื่อให้ Bootstrap เข้าสู่เพจของเรา เราจะต้องรวม CSS และ JavaScript ที่คอมไพล์แล้วผ่าน CDN วางโค้ดต่อไปนี้ใน HTML <head> เพื่อให้สามารถใช้ Bootstrap CSS ได้:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

ในลักษณะเดียวกันนี้ เราจะรวม Devicon CDN เพื่อให้สามารถใช้ไอคอน SVG ของภาษาและเทคโนโลยีโปรแกรมยอดนิยมได้โดยไม่มีปัญหา:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

ตอนนี้ หากต้องการรวม JavaScript ให้ใส่โค้ดต่อไปนี้ไว้เหนือส่วนท้ายของแท็ก </body> :

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

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

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

เราใช้ Bootstrap wrapper navbar และ navbar-expand-lg เพื่อสร้างคอนเทนเนอร์ตอบสนองที่จะยุบเมื่อความกว้างของการแสดงผลน้อยกว่า 992px สิ่งนี้เกิดขึ้นเนื่องจากตัวเลือกกริด lg หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกกริด โปรดดูที่หน้าเลย์เอาต์ของ Bootstrap

ตอนนี้มาสร้างคอลัมน์ที่ตอบสนองสองคอลัมน์ภายในคอนเทนเนอร์: คอลัมน์หนึ่งสำหรับรูปภาพฟรีจาก Unsplash และอีกคอลัมน์หนึ่งสำหรับคำอธิบายเกี่ยวกับตัวเรา:

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

อย่างที่คุณเห็น เรากำลังจัดหาอิมเมจจากไฟล์ในเครื่อง ดังนั้นจึงต้องอยู่ในที่เก็บเมื่อเราพุชการเปลี่ยนแปลงไปยัง GitHub repo

สุดท้าย ภายในคอนเทนเนอร์ Bootstrap ของเรา เราจะใช้ไอคอน SVG จาก Devicon พร้อมกับ CSS ภายในเล็กน้อยเพื่อทำให้ทักษะของเราโดดเด่น:

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

เนื่องจากเราใช้แท็ก <i> HTML เราจึงถือว่าเป็นแบบอักษร ดังนั้นเราจึงกำหนดขนาดโลโก้ของเราเป็น 4 em โดยประกาศในแท็ก style

นี่คือผลลัพธ์สุดท้ายของเว็บไซต์ส่วนตัวที่เรียบง่ายนี้:

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

คุณสามารถปรับแต่งไซต์นี้ได้มากเท่าที่คุณต้องการ นี่คือแหล่งข้อมูลฉบับเต็มบน GitHub ตามที่คุณต้องการ

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

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

 git add . git commit -m "Added website source code and image" git push

ตอนนี้เราสามารถใช้เว็บไซต์นี้เพื่อตั้งค่าหน้า GitHub ของเรา

4. การเผยแพร่หน้า User GitHub

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

URL ของเว็บไซต์ของคุณจะเป็นดังนี้: https://kinstauser.github.io/

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

5. การเผยแพร่เพจ Repository GitHub

จนถึงตอนนี้ เราได้สร้างไซต์ผู้ใช้แล้ว แต่ถ้าเราต้องการมีไซต์ GitHub ที่เผยแพร่หลายไซต์ล่ะ จากนั้นเราจะต้องไปที่ไซต์โครงการ

ตัวอย่างเช่น เราจะใช้ไซต์เทคโนโลยี HTML ที่เราสร้างขึ้นในบทช่วยสอนการพัฒนา Git สำหรับเว็บ

วิธีที่ง่ายที่สุดคือไปที่แท็บ การตั้งค่า ของพื้นที่เก็บข้อมูลของเรา จากนั้นไปที่ตัวเลือก หน้า ในส่วน "โค้ดและระบบอัตโนมัติ"

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

เมื่อคุณเลือกสาขาแล้ว ให้เลือกโฟลเดอร์ที่คุณต้องการให้บริการไฟล์ ซึ่งโดยปกติจะเป็นโฟลเดอร์รูท ( / ) — แล้วคลิกบันทึก

อีกครั้ง รอสักครู่ เว็บไซต์ของคุณควรอยู่ที่ "yourusername".github.io/

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

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

6. การตั้งค่าโดเมนแบบกำหนดเอง

วิธีที่ง่ายที่สุดในการตั้งค่าโดเมนที่กำหนดเองสำหรับหน้า GitHub และตรวจสอบให้แน่ใจว่าใช้งานได้คือไปที่ผู้ให้บริการ DNS ของคุณและสร้างระเบียน A สี่ชุดสำหรับที่อยู่ IP ของหน้า GitHub:

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

นอกจากนี้ คุณต้องตั้งค่าระเบียน CNAME โดยมี yourusername.github.io เป็นเป้าหมาย โดยปกติแล้ว การเปลี่ยนแปลง DNS จะช้า ดังนั้นโปรดอดทนรอ อาจใช้เวลาถึงหนึ่งวัน

หลังจากทำเช่นนี้ ไปที่ส่วน โดเมนแบบกำหนดเอง ในการตั้งค่าของ repo ของคุณ พิมพ์โดเมนของคุณ คลิกที่ปุ่ม บันทึก และรอให้ GitHub ตรวจสอบโดเมนที่กำหนดเองของคุณ

นอกจากนี้ หาก DNS ของคุณรองรับ ให้ทำเครื่องหมายที่ช่อง บังคับใช้ HTTPS เพื่อให้บริการไซต์ของคุณผ่าน HTTPS เท่านั้น

ยินดีด้วย! หากคุณติดตามมาจนถึงจุดนี้ของบทช่วยสอน คุณมีเว็บไซต์คงที่ที่โฮสต์ใน GitHub Pages ฟรี

แนวทางปฏิบัติที่ดีที่สุดสำหรับหน้า GitHub

ก่อนที่เราจะแยกทางกัน ต่อไปนี้เป็นแนวทางปฏิบัติที่ดีที่สุดบางประการที่คุณควรคำนึงถึงเมื่อเผยแพร่ไซต์ GitHub:

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

สรุป

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

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

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