ไม่มีเว็บไซต์ของคุณเองหรือ? ต่อไปนี้คือวิธีที่คุณสามารถตั้งค่าได้ภายใน 1 ชั่วโมงโดยมีค่าใช้จ่ายต่ำหรือไม่มีค่าใช้จ่าย!

มีครั้งแรกเสมอ ภาษาแรกของคุณ สคริปต์แรกของคุณ เว็บไซต์แรกของคุณ

ไม่เพียงแต่นักพัฒนาเท่านั้นที่สามารถเป็นเจ้าของเว็บไซต์ได้ด้วยความรู้ที่ถูกต้อง ใครๆ ก็สามารถทำได้!

ดังนั้น…เราจะเริ่มต้นอย่างไรกันแน่?

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

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

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

ขั้นตอนที่ 1: เลือกสภาพแวดล้อมของคุณ

เวลาโดยประมาณ: ไม่มี, ความยาก: ต่ำ, ต้นทุน: $0

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

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

หนึ่งในเฟรมเวิร์กส่วนหน้าที่มีเครื่องมือสร้างไซต์คงที่ซึ่งฉันใช้ค่อนข้างบ่อยสำหรับหน้า GitHub คือ คนกลาง เฟรมเวิร์กนี้มีคุณสมบัติต่างๆ มากมายที่นักพัฒนา Rails อาจคุ้นเคย เช่น "เลย์เอาต์" และ "บางส่วน" จุดขายอีกประการหนึ่งคือรองรับการบูตสแตรปสำหรับไซต์คงที่พร้อมฟังก์ชันการเขียนบล็อก (โดยที่โพสต์ถูกเก็บไว้ในไฟล์มาร์กดาวน์แต่ละไฟล์) โดยไม่จำเป็นต้องใช้ UI ตัวแก้ไขทั้งหมดและฐานข้อมูลสำหรับการเขียนบล็อกด้วยค่าใช้จ่ายโฮสติ้งเพิ่มเติม โยน "middleman-gh-pages" เข้าไป และการรับแอป Middleman บน GitHub Pages เป็นเรื่องง่าย

แน่นอนว่าคนกลางไม่ใช่ทางเลือกเดียว หากคุณเป็นนักพัฒนาส่วนหน้าที่มีความมุ่งมั่นและอาจเคยชินกับ JavaScript และ React มาก่อน เฟรมเวิร์กส่วนหน้าที่ทำงานร่วมกับส่วนประกอบ React อาจเป็นสิ่งที่อยู่ในซอยของคุณ! ข้างต้น ฉันได้สร้าง "เทมเพลต Next.js และเครื่องมือสำหรับ GitHub Pages" ซึ่งสามารถใช้งานได้ทันทีสำหรับการสร้างไซต์ของคุณเอง!

เมื่อคุณเลือกสภาพแวดล้อมที่ต้องการแล้ว เราก็ไปยังขั้นตอนต่อไปได้

ขั้นตอนที่ 2: สร้างพื้นที่เก็บข้อมูลของคุณ

เวลาโดยประมาณ: 2 นาที ความยาก: ต่ำ ต้นทุน: $0

ไปยังขั้นตอนที่ 2 เราเพียงแค่ต้องสร้างพื้นที่เก็บข้อมูลใน GitHub

ขั้นตอนนี้ค่อนข้างง่าย เพียงตรวจสอบให้แน่ใจว่าคุณไปที่ github.com/new และตั้งชื่อพื้นที่เก็บข้อมูลเป็น <username|organisation>.github.io

หากคุณเลือกเทมเพลต Next.js จากขั้นตอนที่ 1 คุณสามารถอ้างอิงที่เก็บแบบแยกส่วนที่นี่เป็นเทมเพลตได้ ซึ่งจะทำให้ขั้นตอนที่ 3 ง่ายขึ้นอย่างมาก

ขั้นตอนที่ 3: ตั้งค่าสภาพแวดล้อมของคุณ กดรหัสเริ่มต้น

เวลาโดยประมาณ: 5–10 นาที ความยาก: กลาง ราคา: $0

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

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

ขั้นตอนที่ 4: สร้างและเผยแพร่เว็บไซต์ของคุณ!

เวลาโดยประมาณ: 5 นาที ความยาก: กลาง ราคา: $0

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

หากคุณใช้คนกลาง ฉันขอแนะนำให้เพิ่มสคริปต์ต่อไปนี้ในไดเรกทอรีรากของซอร์สโค้ดของคุณ (สำหรับสภาพแวดล้อม Unix) และเรียกใช้ ./publish ทุกครั้งที่คุณต้องการอัปเดตไฟล์คงที่ของเว็บไซต์ของคุณ สคริปต์นี้จะล้างไฟล์บิลด์ของคุณจากบิลด์ก่อนหน้าในระหว่างทุกกระบวนการบิลด์ใหม่ เพื่อแก้ไขปัญหา ปัญหา Git นี้

หากคุณใช้ spa-github-page-template เพียงเรียกใช้สิ่งต่อไปนี้ในเทอร์มินัลของคุณ:

npm run publish

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

ขั้นตอนที่ 5: กำหนดค่าหน้า GitHub

เวลาโดยประมาณ: 3 นาที ความยาก: ต่ำ ต้นทุน: $0

อีกขั้นตอนง่ายๆ เมื่อไซต์แบบคงที่ของคุณได้รับการเผยแพร่ไปยังสาขา gh-pages เพียงตั้งค่าสาขา GitHub Pages ใน Settings > Options ของที่เก็บของคุณ (เลื่อนลงจนสุด) แล้วคลิกบันทึก

ณ จุดนี้ เว็บไซต์ของคุณควรจะอยู่ที่ <username|organisation>.github.io (ให้เวลาหรือใช้เวลาสักครู่หากยังไม่แสดง) หากไซต์ส่งคืน 404 อย่างสม่ำเสมอ โปรดตรวจสอบการตั้งค่าในภาพหน้าจอด้านบน รวมถึงตรวจสอบสาขา gh-pages และตรวจสอบว่ามีไฟล์ index.html ที่ถูกต้องในไดเรกทอรีราก

(ไม่บังคับ) ขั้นตอนที่ 6: เพิ่มโดเมนที่คุณกำหนดเอง

เวลาโดยประมาณ: ~10 นาที ความยาก: สูง ต้นทุน: แตกต่างกันไป ขึ้นอยู่กับต้นทุนโดเมน

สมมติว่าคุณต้องการไปไกลกว่าโดเมนเริ่มต้นของ GitHub ที่ github.io คุณสามารถซื้อโดเมนของคุณเองและสนับสนุนได้จากหน้า GitHub แทน

หากต้องการทำเช่นนั้น คุณจะต้องซื้อโดเมนก่อน ใช้ผู้รับจดทะเบียน DNS เช่น Namecheap หรือสิ่งที่คล้ายกันเพื่อซื้อโดเมนที่คุณเลือก เมื่อซื้อแล้ว ให้เพิ่มระเบียน CNAME ต่อไปนี้ โดยตั้งค่า Host เป็นโดเมนย่อยที่คุณต้องการ (ยกเว้น “@” ซึ่งเป็นอักขระพิเศษสำหรับไม่มีโดเมนย่อย) ในเมนูการจัดการโดเมน

ในภาพต่อไปนี้ ไซต์ของฉัน big-on.dev ถูกส่งไปยัง big-on-dev.github.io หากฉันตัดสินใจใช้ www.big-on.dev ฉันจะต้องเปลี่ยนค่า Host เป็น www แทน

จากนั้น เพิ่มไฟล์ CNAME ลงในซอร์สโค้ดของคุณ ตรวจสอบให้แน่ใจว่าไฟล์นี้ถูกคัดลอกไปยังไดเร็กทอรี build และ gh-pages เป็นส่วนหนึ่งของกระบวนการ build ของคุณ:

เมื่อตั้งค่าเนื้อหาเหล่านี้แล้ว คุณสามารถไปที่ Settings > Options ในพื้นที่เก็บข้อมูลของคุณ และควรตั้งค่าโดเมนที่กำหนดเอง หากคุณเห็นแถบโหลด ให้รอสักครู่เพื่อให้การตั้งค่าเสร็จสมบูรณ์ เมื่อเสร็จแล้ว คุณสามารถเลือกตัวเลือก Enforce HTTPS ได้หากต้องการ

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

เว็บไซต์แรกของคุณพร้อมใช้งานแล้ว!

เฮ้ คุณได้เว็บไซต์ของคุณแล้ว! โดยรวมแล้ว หากคุณใช้โดเมนของ GitHub Pages คุณไม่ควรต้องจ่ายอะไรเลย แม้แต่ค่าโฮสติ้ง เจ๋งขนาดไหน!

เวลาทั้งหมดประมาณไว้ที่ประมาณ 30 นาทีเมื่อคำนึงถึงการตั้งค่าโดเมนที่กำหนดเอง ลองคูณเวลาด้วย 2 เพื่อเป็นบัฟเฟอร์เพิ่มเติม และควรจะอยู่ภายในเวลาที่กำหนดคือ 1 ชั่วโมง!

การสร้างเว็บไซต์ของคุณเองเป็นครั้งแรกอาจเป็นงานที่น่ากังวลมาก อย่างไรก็ตาม เมื่อคุณก้าวข้ามหลักชัยนี้ไปแล้ว คุณจะสำรวจเครื่องมืออื่นๆ เช่น Cloud Run และ App Engine ใน Google Cloud ได้ง่ายขึ้นมาก เพื่อสร้างมากกว่าเว็บไซต์คงที่ หากคุณรู้สึกอยากผจญภัย ลองเพิ่ม Google Analytics และ เครื่องมือ Search Console ลงในเพจของคุณ ขั้นตอนในการเพิ่มเครื่องมือเหล่านี้ค่อนข้างง่าย แต่การเรียนรู้ที่จะใช้เครื่องมือเหล่านี้อาจเป็นประโยชน์อย่างมากสำหรับการสำรวจเพิ่มเติมเกี่ยวกับการพัฒนาเว็บ เช่น แนวคิด SEO

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

อย่างไรก็ตาม ฉันหวังว่าคุณจะชอบคำแนะนำสั้นๆ นี้ในการสร้างเว็บไซต์ของคุณเอง!

เชา~