วิธีการโฮสต์แบบคงที่ WordPress เว็บไซต์ฟรี (บนหน้า GitHub, Vercel, Netlify)

WordPress เป็นระบบจัดการเนื้อหาที่ทรงพลังและได้รับความนิยม แต่โฮสต์แบบไดนามิก WordPress ไซต์อาจมีค่าใช้จ่ายสูงและต้องมีการบำรุงรักษาอย่างต่อเนื่อง สำหรับเว็บไซต์หรือบล็อกทั่วไปจำนวนมาก a. เวอร์ชันคงที่ WordPress เว็บไซต์อาจเป็นทางเลือกที่ดีเยี่ยม ไซต์แบบคงที่นั้นเร็วกว่า ปลอดภัยกว่า และสามารถโฮสต์ได้ฟรีบนแพลตฟอร์ม เช่น GitHub Pages, Netlify หรือ Vercel

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

เครื่องมือที่คุณต้องการ

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

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

ขั้นตอนที่ 1: พัฒนาของคุณ WordPress ไซต์บน LocalWP

ก่อนที่เราจะเริ่ม คุณจะต้องมีของคุณ WordPress พร้อมไซต์ หากคุณยังไม่ได้สร้างไซต์ของคุณ หรือหากปัจจุบันโฮสต์ไว้ที่อื่น ฉันขอแนะนำให้ใช้ LocalWP (เดิมเรียกว่า Local by Flywheel) เพื่อพัฒนาและทดสอบไซต์ของคุณภายในเครื่อง

1. ดาวน์โหลดและติดตั้ง LocalWP ได้ฟรีจาก localwp.com.
2. สร้างใหม่ WordPress ไซต์ใน LocalWP
3. ออกแบบเว็บไซต์ของคุณ เพิ่มเนื้อหา และติดตั้งปลั๊กอินที่จำเป็น
4. ตรวจสอบให้แน่ใจว่าไซต์ของคุณมีลักษณะและทำงานตรงตามที่คุณต้องการในรูปแบบคงที่

ทำความเข้าใจกับข้อจำกัดของไซต์แบบคงที่

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

1. WordPress รูปแบบ: แบบดั้งเดิม WordPress แบบฟอร์มที่ใช้การประมวลผลฝั่งเซิร์ฟเวอร์จะไม่ทำงาน ซึ่งรวมถึงแบบฟอร์มติดต่อ แบบฟอร์มสมัครสมาชิก และแบบฟอร์มโต้ตอบอื่นๆ
2. WordPress ความคิดเห็น: ระบบแสดงความคิดเห็นแบบไดนามิกที่อนุญาตให้ผู้ใช้โต้ตอบแบบเรียลไทม์ไม่ได้รับการสนับสนุนในไซต์แบบคงที่
3. การเข้าถึงพื้นที่ผู้ดูแลระบบ: ลิงก์ใด ๆ ไปที่ /wp-admin หรือภายในที่คล้ายกัน WordPress เส้นทางจะไม่ทำงาน เนื่องจากต้องใช้การประมวลผลฝั่งเซิร์ฟเวอร์
4. การอัปเดตเนื้อหาแบบเรียลไทม์: ไซต์แบบคงที่จำเป็นต้องมีการสร้างใหม่และปรับใช้ใหม่เพื่อให้การเปลี่ยนแปลงเนื้อหาปรากฏ ไม่เหมือนไดนามิก WordPress ไซต์ที่มีการเปลี่ยนแปลงทันที
5. การตรวจสอบผู้ใช้: คุณลักษณะที่ต้องเข้าสู่ระบบของผู้ใช้หรือการเป็นสมาชิกไม่ได้รับการสนับสนุนในการตั้งค่าไซต์แบบคงที่ขั้นพื้นฐาน
6. ฟังก์ชั่นอีคอมเมิร์ซ: โดยทั่วไปแล้วตะกร้าสินค้าแบบไดนามิกและการประมวลผลการชำระเงินจะไม่ทำงานในสภาพแวดล้อมแบบคงที่
7. ฟังก์ชันการค้นหา: WordPressคุณลักษณะการค้นหาในตัวจะไม่ทำงานแม้ว่าจะสามารถใช้ทางเลือกอื่นได้ก็ตาม (ดังที่กล่าวไว้ในคุณสมบัติ Simply Static Pro)
8. แถบด้านข้างและวิดเจ็ตแบบไดนามิก: วิดเจ็ตที่ดึงข้อมูลแบบเรียลไทม์หรือต้องการการประมวลผลฝั่งเซิร์ฟเวอร์จะไม่ทำงานตามที่คาดไว้

วิธีแก้ปัญหาที่เป็นไปได้

แม้ว่าจะมีข้อจำกัดเหล่านี้ แต่ก็มีวิธีบรรเทาบางส่วนได้:

• สำหรับแบบฟอร์ม คุณสามารถใช้บริการของบุคคลที่สาม เช่น Formspree หรือ Netlify Forms
• ความคิดเห็นสามารถจัดการได้ผ่านบริการต่างๆ เช่น Disqus หรือ Facebook Comments
• ฟังก์ชันการค้นหาสามารถใช้งานได้โดยใช้โซลูชันฝั่งไคลเอ็นต์ เช่น Lunr.js หรือ Algolia (ดังที่นำเสนอใน Simply Static Pro)
• สำหรับอีคอมเมิร์ซ ให้พิจารณาใช้บริการภายนอก เช่น Snipcart หรือ Gumroad

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

ขั้นตอนที่ 2: ติดตั้งและกำหนดค่าแบบคงที่

Simply Static เป็นบริการฟรี WordPress เสียบเข้าไป ที่สร้างเวอร์ชันคงที่ของคุณ WordPress เว็บไซต์. ต่อไปนี้เป็นวิธีการตั้งค่า:

1. ในของคุณ WordPress แดชบอร์ด ไปที่ปลั๊กอิน > เพิ่มใหม่
2. ค้นหา "Simply Static" ติดตั้งปลั๊กอินและเปิดใช้งานปลั๊กอิน
3. ไปที่ Simply Static > การตั้งค่า ในของคุณ WordPress แผงควบคุม.
4. ใต้แท็บ "ทั่วไป" ให้ตั้งค่าดังต่อไปนี้:
   • URL ปลายทาง: เลือก “บันทึกสำหรับการใช้งานออฟไลน์” หากคุณมีโดเมนที่กำหนดเองอยู่แล้ว ให้เลือก “URL ที่สมบูรณ์” ตามภาพหน้าจอด้านล่าง:

5. Local Directory: ตั้งค่านี้เป็นไดเร็กทอรีภายนอกของคุณ WordPress การติดตั้ง เช่น /Users/yourusername/Documents/StaticSite

6. ใต้แท็บ "รวม/ยกเว้น" ตรวจสอบให้แน่ใจว่ามี URL ที่จำเป็นทั้งหมดรวมอยู่ด้วย
   • ในกรณีส่วนใหญ่ ให้ใช้ /wp-content/ และ /wp-includes/

7. บันทึกการตั้งค่าของคุณ

นอกจากนี้ยังมี SimplyStatic รุ่นโปรต่อไปนี้เป็นบทสรุปคุณลักษณะโปรของปลั๊กอิน Simply Static:

1. การปรับใช้ขั้นสูง:
   • ปรับใช้ไซต์คงที่กับหลายแพลตฟอร์ม รวมถึง SimplyCDN, GitHub, Amazon AWS S3, Digital Ocean Spaces และ BunnyCDN
2. อัปเดตไซต์อย่างง่าย:
   • จัดการการอัปเดตเนื้อหาอย่างมีประสิทธิภาพ ไม่ว่าจะเป็นโพสต์เดี่ยว การอัปเดตเป็นกลุ่ม หรือ URL ที่เฉพาะเจาะจง
3. การรวมแบบฟอร์มและความคิดเห็น:
   • ผสานรวมแบบฟอร์มจากปลั๊กอินยอดนิยมอย่าง Contact Form 7, Gravity Forms และ Elementor Forms ลงในไซต์คงที่ของคุณ
4. ฟังก์ชันการค้นหา:
   • ใช้การค้นหาขั้นพื้นฐานโดยใช้ Fuse.js หรืออัปเกรดเป็นประสบการณ์การค้นหาที่ครอบคลุมมากขึ้นด้วย Algolia
5. รองรับ WP-CLI:
   • ใช้ WP-CLI เพื่อกำหนดค่า ส่งออก และจัดการฟีเจอร์ Simply Static โดยตรงจากบรรทัดคำสั่ง
6. การสนับสนุนหลายภาษา:
   • นำเสนอเนื้อหาในหลายภาษาพร้อมการผสานรวมสำหรับ WPML, Polylang และ TranslatePress
7. minification:
   • เพิ่มประสิทธิภาพไซต์โดยย่อขนาดไฟล์ CSS, JavaScript และ HTML แบบคงที่
8. WordPress การปกปิด:
   • แทนที่ค่าเริ่มต้น WordPress เส้นทางที่จะซ่อนความจริงที่ว่า WordPress กำลังถูกใช้เป็นระบบการจัดการเนื้อหา

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

ขั้นตอนที่ 3: เริ่มต้นพื้นที่เก็บข้อมูล Git

ตอนนี้เราได้ตั้งค่าตัวสร้างเว็บไซต์แบบคงที่แล้ว มาเตรียมไดเร็กทอรีในเครื่องของเราสำหรับการควบคุมเวอร์ชันกันดีกว่า:

1. เปิดเทอร์มินัลหรือพรอมต์คำสั่ง
2. นำทางไปยังไดเร็กทอรีที่คุณระบุใน Simply Static (เช่น cd /Users/yourusername/Documents/StaticSite).
3. เริ่มต้นพื้นที่เก็บข้อมูล Git ใหม่โดยการรัน:

   git init

ขั้นตอนที่ 4: สร้างพื้นที่เก็บข้อมูล GitHub

เราจะใช้ GitHub Desktop เพื่อสร้างและจัดการพื้นที่เก็บข้อมูลของเรา:

1. ดาวน์โหลดและติดตั้ง GitHub Desktop จาก desktop.github.com ถ้าคุณยังไม่ได้
2. เปิด GitHub Desktop แล้วลงชื่อเข้าใช้บัญชี GitHub ของคุณ
3. คลิกที่ “ไฟล์” > “พื้นที่เก็บข้อมูลใหม่” หรือใช้ปุ่ม “สร้างพื้นที่เก็บข้อมูลใหม่บนฮาร์ดไดรฟ์ของคุณ”
4. ตั้งค่าต่อไปนี้:
   • ชื่อ: เลือกชื่อสำหรับที่เก็บข้อมูลของคุณ (เช่น "my-static-wordpress")
   • Local Path: ตั้งค่านี้เป็นไดเร็กทอรีเดียวกับที่คุณระบุไว้ใน Simply Static
   • เริ่มต้นพื้นที่เก็บข้อมูลนี้ด้วย README: ไม่ต้องเลือก
   • Git ละเว้น: เลือก “ไม่มี” (เราสร้างขึ้นเองในขั้นตอนที่ 3)
   • ใบอนุญาต: เลือกใบอนุญาตที่เหมาะสมหรือปล่อยให้เป็น "ไม่มี"
5. คลิก “สร้างพื้นที่เก็บข้อมูล”

ขั้นตอนที่ 5: คอมมิตพื้นที่เก็บข้อมูล

ตอนนี้เราได้ตั้งค่าพื้นที่เก็บข้อมูลแล้ว เรามาเริ่มคอมมิตกันก่อน:

1. ใน GitHub Desktop คุณควรเห็นไฟล์ทั้งหมดในไซต์คงที่ของคุณแสดงรายการเป็นการเปลี่ยนแปลง
2. ป้อนข้อมูลสรุปสำหรับคอมมิตของคุณ (เช่น “คอมมิตเริ่มต้นของไฟล์ไซต์คงที่”)
3. คลิก "ยืนยันเป็นผู้เชี่ยวชาญ" (หรือ "ยืนยันเป็นผู้เชี่ยวชาญ" ในเวอร์ชันเก่า)
4. คลิก “เผยแพร่พื้นที่เก็บข้อมูล” เพื่อพุชพื้นที่เก็บข้อมูลในเครื่องของคุณไปที่ GitHub

ขั้นตอนที่ 6: เรียกใช้การส่งออกแบบคงที่เพียงอย่างเดียว

ตอนนี้ได้เวลาสร้างไซต์คงที่ของเราแล้ว:

1. กลับไปที่ WordPress แผงควบคุม.
2. ไปที่ Simply Static > สร้าง (คุณสามารถละเว้นการแจ้งเตือนข้อผิดพลาดในการวินิจฉัยได้ เนื่องจากคุณกำลังปรับใช้กับไดเร็กทอรีในเครื่องเท่านั้น)
3. คลิก "สร้างไฟล์คงที่"
4. รอให้กระบวนการเสร็จสิ้น การดำเนินการนี้อาจใช้เวลาสักครู่ ขึ้นอยู่กับขนาดของไซต์ของคุณ
5. เมื่อเสร็จแล้ว ให้กลับไปที่ GitHub Desktop
6. คุณควรเห็นไฟล์ที่สร้างขึ้นใหม่หรืออัปเดตแสดงรายการเป็นการเปลี่ยนแปลง
7. ยอมรับการเปลี่ยนแปลงเหล่านี้ด้วยข้อความเช่น "อัปเดตไฟล์ไซต์คงที่"
8. ผลักดันการเปลี่ยนแปลงไปยัง GitHub โดยคลิก "พุชต้นกำเนิด"

ขั้นตอนที่ 7: เชื่อมต่อพื้นที่เก็บข้อมูลกับแพลตฟอร์มโฮสติ้ง

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

หน้า GitHub

1. ไปที่พื้นที่เก็บข้อมูลของคุณบน GitHub.com
2. คลิกที่ “การตั้งค่า” > “หน้า” ในแถบด้านข้างด้านซ้าย
3. ภายใต้ "แหล่งที่มา" เลือก "ปรับใช้จากสาขา"
4. เลือกสาขาที่คุณต้องการปรับใช้ (โดยปกติจะเป็น "หลัก" หรือ "ต้นแบบ")
5. เลือกโฟลเดอร์รูท (/) แล้วคลิก "บันทึก"
6. เว็บไซต์ของคุณจะใช้งานได้ที่ https://yourusername.github.io/repository-name/.

netlify

1. ลงทะเบียนสำหรับบัญชีฟรีที่ netlify.com.
2. คลิก “ไซต์ใหม่จาก Git” บนแดชบอร์ด Netlify ของคุณ
3. เลือก GitHub เป็นผู้ให้บริการ Git ของคุณและอนุญาต Netlify
4. เลือกที่เก็บของคุณจากรายการ
5. ปล่อยให้คำสั่ง build และเผยแพร่ไดเร็กทอรีว่างไว้
6. คลิก "ปรับใช้ไซต์"
7. ไซต์ของคุณจะใช้งานได้บนโดเมนย่อย Netlify ซึ่งคุณปรับแต่งได้ในการตั้งค่าไซต์

เวอร์เซล

1. ลงทะเบียนสำหรับบัญชีฟรีที่ vercel.com.
2. คลิก "โครงการใหม่" บนแดชบอร์ด Vercel ของคุณ
3. นำเข้าพื้นที่เก็บข้อมูล GitHub ของคุณ
4. ปล่อยให้การตั้งค่าบิลด์เหมือนเดิม (Vercel ควรตรวจพบอัตโนมัติว่าเป็นไซต์แบบคงที่)
5. คลิก “ปรับใช้”
6. เว็บไซต์ของคุณจะใช้งานจริงที่โดเมนย่อย Vercel ซึ่งคุณปรับแต่งได้ในการตั้งค่าโปรเจ็กต์

สรุป

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

เคล็ดลับเพิ่มเติม:

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