การออกแบบและการดำเนินงานเว็บไซต์
หน้าแรกของการพัฒนาส่วนบุคคลคือ Cloudflare + GitHub วิธีสร้างไซต์คงที่อัปเดตด้วย AI และต้นทุน
หลังจากได้รับหมายเลข D-U-N-S และแนะนำแอปแล้ว ฉันก็เตรียมเว็บไซต์ธุรกิจเพื่อการพัฒนาตนเอง เราจะอธิบายความแตกต่างระหว่างไซต์แบบคงที่และ CMS, การอัปเดตบทความด้วย AI, การเผยแพร่ด้วย GitHub Actions และขั้นตอนการลงทะเบียนและค่าใช้จ่ายของ Cloudflare Pages
หากคุณกำลังสร้างแอปด้วยตัวเอง นอกเหนือจากการพัฒนาแอปเองแล้ว คุณจะต้องมีหน้าแรกเพื่อแนะนำธุรกิจของคุณและให้การสนับสนุนด้วย
SANGE Studio ยังจำเป็นต้องมีเว็บไซต์เพื่อเตรียมรับหมายเลข D-U-N-S และเพื่อเตรียมหน้าแนะนำแอป ฉันต้องการสร้างการกำหนดค่าที่ใช้เงินน้อยที่สุดและใช้เวลาน้อยลงในการจัดการในแต่ละวัน ตัวเลือกคือ เผยแพร่เว็บไซต์แบบคงที่ด้วย Cloudflare และจัดการไฟล์ด้วย GitHub
เมื่ออัปเดตบทความ AI จะช่วยสร้างและแก้ไข HTML และมนุษย์จะตรวจสอบเนื้อหาและแสดงผลก่อนที่จะเผยแพร่ เราเชื่อว่าการกำหนดค่านี้เพียงพอในหลาย ๆ สถานการณ์สำหรับไซต์ธุรกิจส่วนบุคคล
ในบทความนี้ เราจะอธิบายเหตุผลในการเลือก ขั้นตอนการเผยแพร่ และค่าใช้จ่าย ราคาและข้อมูลจำเพาะเป็นข้อมูล ณ วันที่ 27 ตุลาคม 2026
1. เตรียมสถานที่หลังจากได้รับหมายเลข D-U-N-S และแนะนำแอปแล้ว
หมายเลข D-U-N-S คือหมายเลข 9 หลักที่ระบุถึงบริษัทหรือองค์กรธุรกิจ ตามกฎทั่วไป คุณจะต้องใช้หมายเลขนี้เมื่อสร้างบัญชีองค์กร Google Play
นอกจากหมายเลข D-U-N-S แล้ว Google Play ยังกำหนดให้มี "เว็บไซต์ขององค์กร" เป็นข้อมูลการลงทะเบียนสำหรับบัญชีขององค์กรอีกด้วย [1]
นี่คือจุดที่สับสนได้ง่าย การที่Google Play ต้องมีเว็บไซต์ถือเป็นเรื่องหนึ่ง เป็นอีกสิ่งหนึ่งที่เว็บไซต์จำเป็นต้องมีอย่างสม่ำเสมอสำหรับแอปพลิเคชันหมายเลข D-U-N-S ทั้งหมด สำหรับข้อมูลที่คุณต้องการสมัครหมายเลข D-U-N-S โปรดตรวจสอบคำแนะนำสำหรับเคาน์เตอร์ที่คุณใช้
ไม่ว่าในกรณีใด หน้าที่อธิบายความเป็นจริงของธุรกิจของคุณและหน้าแนะนำ/สนับสนุนแอปจะมีประโยชน์สำหรับการดำเนินการในภายหลัง คุณสามารถเริ่มต้นจากเล็กๆ น้อยๆ ได้ด้วยการเตรียมเนื้อหาต่อไปนี้:
| หน้า | เนื้อหาที่จะโพสต์ |
|---|---|
| ด้านบน | ข้อมูลเกี่ยวกับชื่อร้านค้า ธุรกิจที่เราเกี่ยวข้อง และแอป |
| การแนะนำธุรกิจ | คำอธิบายที่ไม่ขัดแย้งกับข้อมูลการสมัคร เช่น รายละเอียดผู้ประกอบการและธุรกิจ |
| แนะนำแอป | คุณสมบัติ, ภาพหน้าจอ, ลิงก์ไปยัง Google Play |
| สนับสนุน | วิธีการติดต่อเราและคำถามที่พบบ่อย |
| นโยบายความเป็นส่วนตัว | คำอธิบายตามการได้มาของข้อมูลจริงและการใช้บริการภายนอก |
ไม่ได้หมายความว่าแค่เตรียมสถานที่ก็สอบผ่านแล้ว สิ่งสำคัญคือข้อมูลที่คุณโพสต์จะต้องสอดคล้องกับธุรกิจจริงและรายละเอียดการสมัคร
2. ไซต์แบบคงที่เป็นตัวเลือกที่ดีหากคุณต้องการลดต้นทุนและความพยายามในการจัดการ
หากต้องการมีหน้าแรก คุณไม่จำเป็นต้องทำสัญญาเช่าเซิร์ฟเวอร์หรือติดตั้ง WordPress
Cloudflare Pages เป็นบริการที่อนุญาตให้คุณเผยแพร่ HTML รูปภาพ ฯลฯ โดยสามารถใช้ได้จากแผนบริการฟรี และยังสามารถเผยแพร่ได้โดยใช้ URL ที่ได้รับจากบริการ: ○○.pages.dev [2]
GitHub จะถูกใช้เป็นสถานที่ในการจัดการไฟล์ของเว็บไซต์ของคุณและประวัติการเปลี่ยนแปลง คุณสามารถตรวจสอบเวลาและสถานที่ที่บางสิ่งบางอย่างได้รับการแก้ไข และหากมีปัญหา คุณสามารถทิ้งเบาะแสเพื่อกลับสู่สถานะก่อนหน้าได้
การจัดบทบาทมีลักษณะดังนี้:
| บทบาท | จะใช้อะไร. |
|---|---|
| การสร้างและแก้ไขประโยคและ HTML | เอไอและมนุษย์ |
| จัดการไฟล์และประวัติการเปลี่ยนแปลง | GitHub |
| ทำให้กระบวนการเผยแพร่เป็นอัตโนมัติหลังจากการยืนยัน | GitHub Actions |
| การส่งมอบเพจให้กับผู้ชม | Cloudflare Pages |
Cloudflare ไม่ใช่บริการที่ถูกที่สุดเพียงอย่างเดียว นอกจากนี้ยังมีบริการฟรีอีกด้วย นอกจากนี้ยังเป็นตัวเลือกที่เหมาะสมกับวัตถุประสงค์ของคุณในการเริ่มต้นเว็บไซต์แนะนำการพัฒนาส่วนบุคคลด้วยต้นทุนที่ต่ำ
- AI + มนุษย์การสร้างและตรวจสอบบทความ/HTML
- GitHubจัดการไฟล์และประวัติการเปลี่ยนแปลง
- การดำเนินการของ GitHubการเผยแพร่การเปลี่ยนแปลงที่ได้รับอนุมัติ
- หน้า Cloudflareเผยแพร่ HTML และรูปภาพให้กับผู้อ่าน
จัดการบน GitHub และเผยแพร่บน Actions Cloudflare Pages ส่งมอบหน้าต่างๆ ให้กับผู้อ่าน
3. ความแตกต่างระหว่างโฮสติ้งแบบคงที่และ CMS
โฮสติ้งแบบคงที่คือระบบที่ส่งมอบ HTML และรูปภาพที่สร้างไว้ล่วงหน้าแก่ผู้ดูตามที่เป็นอยู่
CMS คือระบบที่ทำให้ง่ายต่อการจัดการและอัปเดตบทความและรูปภาพ WordPress เป็นตัวอย่างทั่วไป คุณสามารถเขียนบทความและกำหนดวันที่และเวลาตีพิมพ์ได้จากหน้าจอการจัดการ
พูดอย่างเคร่งครัดทั้งสองไม่ใช่คำตรงกันข้าม นอกจากนี้ยังมีการกำหนดค่าที่จัดการบทความด้วย CMS และส่งมอบหน้าที่เสร็จสมบูรณ์เป็นไซต์คงที่ เพื่อให้เข้าใจได้ง่ายขึ้น เราจะเปรียบเทียบการกำหนดค่าที่จัดการ HTML บน GitHub และการกำหนดค่าที่คุณติดตั้งและใช้งาน WordPress ทั่วไปด้วยตนเอง
| รายการที่จะเปรียบเทียบ | ไซต์คงที่จัดการ HTML | การดำเนินการด้วยตนเองของ WordPress ทั่วไป |
|---|---|---|
| วิธีการอัพเดต | แก้ไขและเผยแพร่ไฟล์ | แก้ไขและเผยแพร่จากหน้าจอการจัดการ |
| กำลังประมวลผลเมื่อดู | นำไฟล์ที่เตรียมไว้ | ใช้งานได้กับ PHP, ฐานข้อมูล ฯลฯ การกำหนดค่าบางอย่างใช้แคช |
| การบำรุงรักษา | จัดการไฟล์ เส้นทางการเผยแพร่ เครื่องมือการใช้งาน ฯลฯ | จัดการหน่วยหลัก ธีม ปลั๊กอิน สภาพแวดล้อมการดำเนินการ ฯลฯ |
| โพสต์ตามกำหนดการ | เตรียมกลไกแยกควบคุมสิ่งพิมพ์ | มีฟังก์ชันการโพสต์ตามกำหนดเวลามาตรฐาน |
| การใช้งานที่เหมาะกับ | แนะนำธุรกิจ แนะนำแอพ บล็อกกลุ่มย่อย | ไซต์ที่มีผู้แก้ไขจำนวนมาก การอัปเดตบ่อยครั้ง และไซต์ที่ฟังก์ชันการแก้ไขมีความสำคัญ |
HTML เป็นไฟล์ที่อธิบายโครงสร้างของเพจ โดยปกติแล้ว การแตะโค้ดทุกครั้งที่คุณเพิ่มบทความถือเป็นส่วนที่เป็นภาระของไซต์แบบคงที่ การมี AI ช่วยคุณในงานนั้นจะทำให้เลือกได้ง่ายขึ้น
4. เมื่อพิจารณาถึงการตอบสนองต่อจุดอ่อนและวิวัฒนาการของ AI เราต้องการทำให้กลไกในการเปิดเผยข้อมูลมีขนาดเล็กลง
การเผยแพร่เว็บไซต์ไม่ใช่จุดสิ้นสุด หากพบช่องโหว่ในซอฟต์แวร์ที่คุณใช้ คุณจะต้องอัปเดตหรือตรวจสอบ เอกสาร WordPress อย่างเป็นทางการยังอธิบายวิธีอัปเดตหน่วยหลัก ปลั๊กอิน ฯลฯ และจัดการสิทธิ์และการรับรองความถูกต้อง [3]
ในการพัฒนาตนเอง เวลาในการบำรุงรักษามีจำกัด หากมุ่งเน้นไปที่การแนะนำธุรกิจและการแนะนำแอพ ฉันต้องการลดความจำเป็นในการใช้งานโปรแกรมและฐานข้อมูลที่ทำงานขณะเรียกดู รวมถึงหน้าจอเข้าสู่ระบบสำหรับการแก้ไขบทความที่เปิดสู่สาธารณะ
ด้วยการมุ่งเน้นไปที่การกระจายไฟล์แบบคงที่ คุณสามารถลดจำนวนจุดเริ่มต้นสำหรับการโจมตีที่กำหนดเป้าหมายพื้นที่ดังกล่าวได้ อย่างไรก็ตาม แม้แต่ไซต์แบบคงที่ก็อาจเสียหายได้หากบัญชี GitHub หรือ Cloudflare ถูกไฮแจ็กหรือมี JavaScript ที่เป็นอันตรายปะปนอยู่ ความปลอดภัยถูกกำหนดโดยทั้งการกำหนดค่าและการทำงาน
เหตุผลที่ฉันต้องการเลือกไซต์แบบคงที่ไม่ใช่เพราะช่องโหว่ทั้งหมดในปัจจุบันเกิดจาก CMS เนื่องจากมีฟังก์ชันการทำงานที่คุณต้องการในการจัดการน้อยลง
นอกจากนี้ AI ยังสามารถช่วยในการสร้าง HTML และ CSS ได้อีกด้วย ซึ่งช่วยลดภาระในการแก้ไขไฟล์โดยตรง สิ่งนี้ทำให้การกำหนดค่าความปลอดภัยง่ายขึ้นและลดความพยายามที่จำเป็นสำหรับการอัปเดต การรวมกันนี้มีความน่าดึงดูดในระดับบุคคล
5. บทความจะถูกแปลงเป็น HTML โดยใช้ AI ตรวจสอบโดยมนุษย์ จากนั้นจึงเผยแพร่
ขั้นตอนการอัพเดตที่คาดหวังมีหกขั้นตอนต่อไปนี้
- จัดระเบียบธีมของบทความ เนื้อหาที่คุณต้องการสื่อ และประสบการณ์
- ขอให้ AI สร้างหน้าบทความที่ตรงกับการออกแบบที่มีอยู่
- ลงทะเบียนการเปลี่ยนแปลงที่เสนอบน GitHub
- มนุษย์ตรวจสอบข้อความ หลักฐาน การแสดงผลบนหน้าจอ และการเปลี่ยนแปลง
- รวมการเปลี่ยนแปลงที่ยืนยันแล้วไว้ในสาขา
mainเพื่อการเผยแพร่ - GitHub Actions เผยแพร่ไปยังหน้า Cloudflare
กลไกในการตรวจสอบการเปลี่ยนแปลงที่เสนอบน GitHub เรียกว่า "คำขอดึง" และการดำเนินการรวมการเปลี่ยนแปลงที่ยืนยันแล้วเรียกว่า "ผสาน" แม้ว่าคุณจะเรียกใช้งานโดยลำพัง คุณก็ตั้งค่าขั้นตอนเพื่อตรวจสอบระหว่างการสร้างและการเผยแพร่ได้
ตัวอย่างเช่น สามารถระบุคำขอไปยัง AI ได้ดังนี้
โปรดแปลงต้นฉบับนี้เป็น HTML โดยใช้หน้าบทความที่มีอยู่เป็นข้อมูลอ้างอิง จัดระเบียบหัวเรื่อง ตาราง และลิงก์อ้างอิงของคุณเพื่อให้อ่านบนสมาร์ทโฟนได้ง่าย โปรดอัปเดตรายการบทความและแผนผังเว็บไซต์ด้วย โปรดอย่าเพิ่มประสบการณ์หรือตัวเลขใดๆ ที่ไม่ได้อยู่ในต้นฉบับ และชี้ให้เห็นข้อความใดๆ ที่ต้องมีการยืนยัน
ก่อนที่จะเผยแพร่ เราจะตรวจสอบความถูกต้องของข้อความ การแสดงบนสมาร์ทโฟน ปลายทางของลิงก์ สิทธิ์ของรูปภาพ และไม่ว่าจะมีข้อมูลส่วนบุคคลหรือข้อมูลที่เป็นความลับปะปนอยู่หรือไม่ การตรวจสอบ AI ยังสามารถใช้เพื่อช่วยเหลือได้ แต่การให้ AI ตรวจสอบซึ่งกันและกันไม่ได้รับประกันความถูกต้อง
หากคุณมีบทความเพิ่มเติม คุณสามารถเขียนข้อความเนื้อหาใน Markdown และสร้าง HTML ต่อไปได้ ฉันคิดว่าเป็นการดีที่สุดที่จะไม่สร้างระบบขนาดใหญ่ตั้งแต่เริ่มต้น และเพียงแนะนำมันเมื่อการอัปเดตกลายเป็นภาระ
- 1. เตรียมต้นฉบับจัดระเบียบเนื้อหาที่คุณต้องการสื่อ
- 2. แปลงเป็น HTML ด้วย AIจับคู่กับการออกแบบที่มีอยู่
- 3. การยืนยันโดยเจ้าหน้าที่ตรวจสอบข้อความ หลักฐาน และการแสดงผล
- 4. สะท้อนให้เห็นในการดำเนินการหลักที่เผยแพร่ไปยังเพจ
ระหว่างการสร้างสรรค์ด้วย AI กับการตีพิมพ์ จะมีขั้นตอนที่มนุษย์จะตรวจสอบเนื้อหาและการแสดงผล
6. เพิ่มบริการหากคุณต้องการฟังก์ชันการจองการเผยแพร่หรือการแก้ไข
สำหรับไซต์แบบคงที่ การเขียนวันที่ในอนาคตใน HTML ไม่ได้สงวนไซต์ไว้สำหรับการเผยแพร่ หากคุณอัปโหลดไฟล์ คุณอาจสามารถดูไฟล์ได้จาก URL แม้ว่าไฟล์นั้นจะไม่ได้อยู่ในรายการบทความก็ตาม
หากจำเป็นต้องเผยแพร่ตามกำหนดการ ให้พิจารณา CMS แบบไม่มีส่วนหัวที่สามารถจัดการวันที่และเวลาในการเผยแพร่ หรือบริการที่รองรับการปรับใช้งานตามกำหนดเวลา CMS ที่ไม่มีส่วนหัวคือ CMS ที่มีฟังก์ชันการจัดการบทความ และสามารถใช้แยกจากลักษณะที่ปรากฏของเพจและการเผยแพร่ได้
ในกรณีนี้ไม่ควรรวมบทความไว้ในไฟล์การเผยแพร่จนกว่าจะถึงวันและเวลาที่กำหนดและรวมกับขั้นตอนการเผยแพร่ตามเวลาที่กำหนด ตรวจสอบให้แน่ใจว่าต้นฉบับส่วนตัวไม่ได้ถูกเปิดเผยในหน้าตัวอย่างหรือที่เก็บข้อมูลสาธารณะ
นอกจากนี้ยังมีวิธีตั้งค่าการดำเนินการ GitHub Actions เป็นประจำ แต่การดำเนินการอาจมีความล่าช้า จึงไม่เหมาะสำหรับแอปพลิเคชันที่ต้องการการรับประกันเวลาที่เข้มงวด [8]
หากมีคนหลายคนต้องแก้ไข อนุมัติ จัดการรูปภาพ และกำหนดเวลาเผยแพร่ในแต่ละวัน CMS จะมีคุณค่าอย่างยิ่ง เราวางแผนที่จะตรวจสอบการกำหนดค่าเมื่อมีฟังก์ชันการแก้ไขที่จำเป็นเพิ่มขึ้น
7. ตั้งแต่การลงทะเบียนจนถึง Cloudflare ไปจนถึงการเผยแพร่หน้าเว็บ
ที่นี่ เราจะแสดงวิธีเผยแพร่จาก GitHub Actions โดยใช้ "การอัปโหลดโดยตรง" ของ Cloudflare Pages เจ้าหน้าที่ของ Cloudflare ยังให้คำแนะนำสำหรับชุดค่าผสมนี้ด้วย [4]
Cloudflare ยังมีตัวเลือกการกระจายแบบคงที่ที่เรียกว่า Workers Static Assets แต่การตั้งค่าและคำสั่งในบทความนี้มีไว้สำหรับเพจ ชื่อหน้าจออาจมีการเปลี่ยนแปลง ดังนั้นโปรดตรวจสอบชื่อบริการและการตั้งค่าก่อนดำเนินการต่อ
ขั้นตอนที่ 1: สร้างบัญชี Cloudflare และ GitHub
สร้างบัญชีด้วย Cloudflare และ GitHub และทำการยืนยันอีเมลให้เสร็จสิ้น ตั้งค่าการรับรองความถูกต้องแบบหลายปัจจัยในทั้งสองอย่าง
คุณสามารถเริ่มต้นด้วยแผนฟรี แม้ว่าคุณจะมีโดเมนเดิมอยู่แล้ว คุณก็สามารถเริ่มตรวจสอบการตีพิมพ์ได้จาก URL ที่ให้ไว้โดย Pages
ขั้นตอนที่ 2: รับโดเมนของคุณเอง
โดเมนที่กำหนดเองคือชื่อบนเว็บที่คุณได้รับและใช้ต่อไป เช่น example.com นี่เป็นสัญญาแยกต่างหากจาก Cloudflare Pages ซึ่งจัดเก็บไฟล์ของเว็บไซต์ของคุณ การซื้อโดเมนของคุณเองต้องเสียค่าใช้จ่าย และคุณจะต้องจ่ายค่าธรรมเนียมการต่ออายุเพื่อใช้งานต่อหลังจากได้มา คุณสามารถเผยแพร่ได้ด้วย pages.dev ฟรี แต่ถ้าคุณต้องการใช้เป็นไซต์ธุรกิจต่อไป จะง่ายกว่าหากคุณเตรียมโดเมนเฉพาะที่ตรงกับชื่อธุรกิจของคุณ หากคุณมีอยู่แล้ว คุณไม่จำเป็นต้องซื้อใหม่
แหล่งที่มา ได้แก่ Cloudflare Registrar และบริการจดทะเบียนโดเมนอื่นๆ หากคุณต้องการจัดการทั้งหมดพร้อมกันด้วย Cloudflare คุณสามารถขอรับได้โดยใช้ขั้นตอนต่อไปนี้ [11]
- เข้าสู่ระบบ Cloudflare และเปิด "ลงทะเบียนโดเมน" ใต้ "การลงทะเบียนโดเมน"
- ค้นหาชื่อโดเมนที่คุณต้องการและดูว่ามีตัวเลือกใดบ้าง เลือกชื่อที่ใกล้เคียงกับชื่อธุรกิจของคุณ และสั้นและพิมพ์ง่าย
- ตรวจสอบค่าธรรมเนียมการเข้าซื้อกิจการ ปีสัญญา และวันต่ออายุครั้งถัดไป เราไม่เพียงเปรียบเทียบราคาที่ต่ำในปีแรกเท่านั้น แต่ยังเปรียบเทียบค่าธรรมเนียมการต่ออายุ ภาษี และสกุลเงินในการชำระเงินด้วย
- กรอกชื่อ ที่อยู่ หมายเลขโทรศัพท์ และที่อยู่อีเมลของผู้ลงทะเบียนให้ถูกต้อง และลงทะเบียนวิธีการชำระเงิน ต้องป้อนข้อมูลผู้ลงทะเบียน Cloudflare ด้วยอักขระ ASCII ดังนั้นให้ป้อนชื่อและที่อยู่ภาษาญี่ปุ่นเป็นอักขระโรมัน ฯลฯ
- ตรวจสอบข้อกำหนดและจำนวนเงินที่ชำระ และยืนยันการซื้อของคุณ
- ตรวจสอบอีเมลยืนยันการลงทะเบียนของคุณและดำเนินการยืนยันที่อยู่อีเมลที่ร้องขอให้เสร็จสิ้น ตรวจสอบการตั้งค่าการต่ออายุอัตโนมัติและวันหมดอายุของวิธีการชำระเงินของคุณ
โดเมนที่ได้รับจากผู้รับจดทะเบียน Cloudflare จะใช้เนมเซิร์ฟเวอร์ของ Cloudflare ไม่ใช่บริการที่อนุญาตให้คุณสลับไปยังเนมเซิร์ฟเวอร์ DNS ของบริษัทอื่นได้อย่างอิสระหลังจากได้รับมา นอกจากนี้ หากไม่มีนามสกุลโดเมนที่ต้องการ ให้ขอรับจากบริการของบุคคลที่สามที่เข้ากันได้ [11]
หน้าเว็บของคุณจะไม่แสดงเพียงแค่รับโดเมนเท่านั้น หลังจากนั้น ให้เผยแพร่ไซต์ของคุณไปยังเพจและเชื่อมต่อกับโดเมนของคุณเองในขั้นตอนที่ 8 แม้ว่าคุณจะได้รับโดเมนจากบริษัทอื่น คุณก็สามารถใช้โดเมนดังกล่าวร่วมกับเพจได้โดยไม่ต้องโอนการจดทะเบียนโดเมนของคุณไปที่ Cloudflare
การสมัครสมาชิกโดเมนไม่จำเป็นต้องมีกล่องจดหมายสำหรับโดเมนนั้น หากคุณต้องการส่งและรับอีเมลผ่าน info@example.com ฯลฯ โปรดพิจารณาใช้บริการอีเมลแยกต่างหาก
ขั้นตอนที่ 3: สร้างพื้นที่เก็บข้อมูลบน GitHub
พื้นที่เก็บข้อมูลคือพื้นที่เก็บข้อมูลสำหรับไฟล์ของไซต์และประวัติการเปลี่ยนแปลง สร้างจาก "พื้นที่เก็บข้อมูลใหม่" ของ GitHub ด้วยชื่อ เช่น sange-studio-web
หากคุณกำลังจัดการกับต้นฉบับส่วนตัว การเลือกส่วนตัวจะทำให้จัดการได้ง่ายขึ้น อย่างไรก็ตาม แม้ในพื้นที่เก็บข้อมูลส่วนตัว ไฟล์ที่อยู่ในโฟลเดอร์สาธารณะจะถูกส่งไปยังไซต์
ใส่เฉพาะไฟล์ที่คุณต้องการกำหนดให้เป็นสาธารณะในโฟลเดอร์ public ตัวอย่างเช่น public/index.html คือหน้าแรก public/apps/index.html คือรายการแอป และ public/privacy/index.html คือนโยบายความเป็นส่วนตัว วิธีนี้ช่วยให้คุณจำกัดช่วงที่ต้นฉบับและไฟล์การกำหนดค่าถูกแจกจ่ายไปยังไซต์โดยไม่ได้ตั้งใจ
คุณสามารถเริ่มต้นด้วย public/index.html เท่านั้น ให้ AI สร้างหน้าแนะนำธุรกิจและตรวจสอบการแสดงผลบนเบราว์เซอร์ของคุณ
ขั้นตอนที่ 4: สร้างโปรเจ็กต์ Cloudflare Pages
บนหน้าจอผู้ดูแลระบบ Cloudflare ไปที่ "ผู้ปฏิบัติงานและเพจ" เพื่อสร้างแอปพลิเคชัน และเลือกอัปโหลดไฟล์ (อัปโหลดโดยตรง) สำหรับเพจ ตัดสินใจเลือกชื่อโปรเจ็กต์และอัปโหลดเนื้อหาของโฟลเดอร์ public เพื่อเผยแพร่เป็นครั้งแรก [5]
เข้าถึง https://project name.pages.dev ที่แสดง ณ จุดนี้และตรวจสอบหน้าแรกสุด ชื่อโครงการและรหัสบัญชีจะถูกใช้ในการตั้งค่าในภายหลัง
โปรเจ็กต์ที่สร้างโดยใช้การอัปโหลดโดยตรงไม่สามารถเปลี่ยนเป็นประเภทที่เชื่อมโยงกับ Git ได้ในภายหลัง หากคุณต้องการเปลี่ยน คุณจะต้องสร้างโปรเจ็กต์ใหม่ [5]
ขั้นตอนที่ 5: สร้างโทเค็น API สาธารณะ
โทเค็น API เป็นข้อมูลรับรองสำหรับการเผยแพร่จาก GitHub Actions ไปยัง Cloudflare
สร้างโทเค็นแบบกำหนดเองจากหน้าจอโทเค็น Cloudflare API และตั้งค่าสิทธิ์เป็น "บัญชี → หน้า Cloudflare → แก้ไข" จำกัดบัญชีเป้าหมายของคุณให้แคบลงให้เหลือเพียงบัญชีที่คุณต้องการ [4]
โทเค็นที่คุณสร้างไม่ได้ถูกเขียนลงในไฟล์ HTML หรือ GitHub โดยตรง
ขั้นตอนที่ 6: ลงทะเบียนข้อมูลการรับรองความถูกต้องใน GitHub Secrets
ในพื้นที่เก็บข้อมูล GitHub ให้เปิด "การตั้งค่า → ความลับและตัวแปร → การดำเนินการ" และเพิ่มสองรายการต่อไปนี้เป็นความลับของพื้นที่เก็บข้อมูล
| ชื่อ | ค่าลงทะเบียน |
|---|---|
CLOUDFLARE_API_TOKEN | สร้างโทเค็น API แล้ว |
CLOUDFLARE_ACCOUNT_ID | รหัสบัญชี Cloudflare ที่จะเผยแพร่ |
Secrets เป็นฟังก์ชันที่เก็บข้อมูลการตรวจสอบสิทธิ์ที่ใช้ในกระบวนการเผยแพร่ [4]
ขั้นตอนที่ 7: เพิ่มการตั้งค่าการมองเห็นสำหรับ GitHub Actions
สร้าง .github/workflows/deploy.yml ในที่เก็บของคุณและบันทึกเนื้อหาต่อไปนี้: แทนที่ your-pages-project ด้วยชื่อโปรเจ็กต์ Pages ของคุณ
name: Deploy website
on:
push:
branches: [main]
workflow_dispatch:
permissions:
contents: read
concurrency:
group: production-website
cancel-in-progress: false
jobs:
deploy:
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Check entry page
run: test -f public/index.html
- name: Deploy to Cloudflare Pages
uses: cloudflare/wrangler-action@v4
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
command: pages deploy public --project-name=your-pages-project --branch=main
ตามตัวอย่างอย่างเป็นทางการ เรามีการกำหนดค่าขั้นต่ำที่จะแสดงเมื่อมีการอัปเดต main เท่านั้น [4] ไม่มีกระบวนการสร้าง HTML ดังนั้นจึงไม่จำเป็นต้องตั้งค่าบิวด์ ในตัวอย่างนี้ การตรวจสอบมีไว้เพื่อยืนยันการมีอยู่ของหน้าบนสุดเท่านั้น ดังนั้นการตรวจสอบเนื้อหาและการแสดงผลจะดำเนินการแยกกัน
โปรดตรวจสอบให้แน่ใจด้วยว่าสาขาการผลิตในฝั่ง Pages เป็น main เป็นครั้งแรก หลังจากแสดงไฟล์การกำหนดค่าใน main แล้ว ให้ตรวจสอบผลการดำเนินการใน "การดำเนินการ" ของ GitHub และเปิดไซต์หลังจากสำเร็จ
ข้างต้นเป็นข้อกำหนดแท็กเวอร์ชันที่จัดลำดับความสำคัญของความสามารถในการอ่าน เพื่อการดำเนินการต่อเนื่อง คุณสามารถกระชับการควบคุมเส้นทางสาธารณะได้โดยการปักหมุดการดำเนินการกับ SHA ที่ยืนยันแล้ว และตรวจสอบการอัปเดต
ขั้นตอนที่ 8: ตั้งค่าโดเมนดั้งเดิมที่ได้รับเป็นเพจ
เพิ่มโดเมนที่คุณต้องการใช้จาก "โดเมนแบบกำหนดเอง → ตั้งค่าโดเมน" ในโครงการเพจ [6]
โดเมนที่ได้รับจากผู้รับจดทะเบียน Cloudflare ได้รับการกำหนดค่าให้ใช้ DNS ของ Cloudflare หากคุณใช้โดเมนราก เช่น example.com ที่บริษัทอื่นได้รับมา ให้เพิ่มโดเมนไปยัง Cloudflare และเปลี่ยนเป็นเนมเซิร์ฟเวอร์ที่ระบุในหน้าจอผู้ดูแลระบบของผู้รับจดทะเบียนของคุณ หากคุณใช้อีเมลที่มีอยู่ ระเบียน DNS เช่น MX และ TXT จะถูกส่งต่อก่อนการเปลี่ยนแปลง
สำหรับโดเมนย่อยเช่น www.example.com คุณยังสามารถตั้งค่า CNAME ในบริการ DNS ภายนอกได้ ไม่ว่าในกรณีใด แทนที่จะเพิ่มเพียงบันทึก DNS ให้เชื่อมโยงบันทึกเหล่านั้นกับโดเมนแบบกำหนดเองใน Pages ก่อน [6]
หลังจากเปิดใช้งานแล้ว ให้ตรวจสอบว่าคุณสามารถเปิดด้วย HTTPS และรูปภาพ ลิงก์ และหน้าจอสมาร์ทโฟนนั้นถูกต้อง หากคุณต้องการทำให้โดเมนของคุณเองเป็น URL อย่างเป็นทางการ ให้รวม URL ตามรูปแบบบัญญัติและแผนผังเว็บไซต์ด้วย
นอกจากนี้ยังมีวิธีเริ่มต้นด้วยการตั้งค่าที่น้อยลงอีกด้วย
หากคุณไม่ต้องการการควบคุมการเผยแพร่ด้วย GitHub Actions การผสานรวมพื้นที่เก็บข้อมูล GitHub เข้ากับ Pages โดยตรงจะง่ายกว่า ซึ่งใช้การตั้งค่าน้อยกว่า การกำหนดค่าคือเลือกนำเข้าที่เก็บ Git บนหน้าจอการสร้างเพจ ตั้งค่าสาขาการผลิตเป็น main ไม่มีเฟรมเวิร์ก สร้างคำสั่งเป็น exit 0 และปลายทางเอาต์พุตเป็น public [9]
ด้วยวิธีนี้ Cloudflare จะตรวจจับการเปลี่ยนแปลงใน GitHub และเผยแพร่การเปลี่ยนแปลงดังกล่าว ดังนั้นคุณจึงสามารถขจัดความจำเป็นในการตั้งค่าโทเค็นและการดำเนินการ API สาธารณะได้ ไม่จำเป็นต้องเรียกใช้วิธี Actions และวิธีลิงก์โดยตรงในการเผยแพร่อัตโนมัติพร้อมกัน
- โดเมนที่ไม่ซ้ำตัวอย่าง: example.com
- การตั้งค่า DNSระบุปลายทางการเชื่อมต่อโดเมน
- กำหนดค่าเพจเชื่อมโยงกับโดเมนที่กำหนดเอง
- ดูไซต์ยืนยันการเผยแพร่ด้วย HTTPS
การได้รับโดเมนและการเผยแพร่เพจเป็นงานที่แตกต่างกันสองประการ จัดการตั้งค่า DNS และการเชื่อมโยงทางฝั่งเพจ
8.ราคาเท่าไหร่คะ?
หากคุณมีไซต์ขนาดเล็กเช่นบทความนี้ซึ่งเผยแพร่ HTML, CSS และรูปภาพ คุณสามารถเริ่มโฮสต์และจัดการไฟล์ได้ในราคาเพียง 0 เยนต่อเดือน
| รายการ | ค่าใช้จ่าย | อาหารเสริม |
|---|---|---|
| Cloudflare Pages Free | 0 เหรียญสหรัฐต่อเดือน | ใช้สำหรับการเผยแพร่ไซต์แบบคงที่ |
| GitHub Free | 0 เหรียญสหรัฐต่อเดือน | จัดการไฟล์และประวัติการเปลี่ยนแปลง |
| GitHub Actions | 0 USD ภายในขีดจำกัดฟรี | พื้นที่เก็บข้อมูลส่วนตัวฟรีของ GitHub จำกัดอยู่ที่ 2,000 นาทีต่อเดือน และพื้นที่เก็บข้อมูลอาร์ติแฟกต์ขนาด 500MB แบ่งปันบัญชีของคุณกับการใช้งานอื่น ๆ |
| URL ที่จัดทำโดยเพจ | ค่าใช้จ่ายเพิ่มเติม 0 เยน | ○○.pages.dev |
| โดเมนของตัวเอง | ต้องเสียค่าธรรมเนียมการได้มา/การต่ออายุแยกต่างหาก | แตกต่างกันไปขึ้นอยู่กับนามสกุลโดเมน ผู้รับจดทะเบียน และข้อกำหนดของสัญญา |
| AI | ขึ้นอยู่กับบริการที่ใช้ | แผนฟรี สัญญารายเดือน ค่าธรรมเนียมการใช้ API ฯลฯ |
| การเปิดเผย/แบบฟอร์มการจอง ฯลฯ | ขึ้นอยู่กับบริการที่ใช้ | เพิ่มเฉพาะคุณสมบัติที่คุณต้องการ |
Cloudflare บอกว่าจำนวนคำขอและแบนด์วิธสำหรับ Pages นั้นไม่จำกัด แต่ก็มีข้อจำกัด เช่น จำนวนไฟล์และเงื่อนไขการใช้งาน แผนฟรีอนุญาตให้สร้างบิลด์ที่เชื่อมโยงกับ Git ได้ 500 รายการต่อเดือนและสูงสุด 20,000 ไฟล์ เมื่อประมวลผลและอัปโหลดโดยตรงด้วย GitHub Actions ให้แยกความแตกต่างระหว่างเฟรมบิลด์บนฝั่ง Cloudflare และเฟรมการดำเนินการบนฝั่ง GitHub [2][7]
GitHub Actions ทำงานได้ฟรีบนรันเนอร์มาตรฐานที่โฮสต์โดย GitHub สำหรับพื้นที่เก็บข้อมูลสาธารณะ ระวังอย่าให้เกิน Free Tier ในที่เก็บส่วนตัว นักวิ่งขนาดใหญ่และความจุเป็นข้อกำหนดอื่น ๆ [10]
ตัวอย่างเช่น หากคุณรันกระบวนการเผยแพร่ครั้งละ 3 นาทีบนที่เก็บส่วนตัว 30 ครั้งต่อเดือน เวลาทั้งหมดคือ 90 นาที หากคุณไม่ได้ใช้โควต้าจนหมดเพื่อวัตถุประสงค์อื่นและความจุพื้นที่เก็บข้อมูลของคุณอยู่ภายในโควต้า คุณสามารถใช้ได้ 2,000 นาทีต่อเดือน
หากคุณมีโดเมนเป็นของตัวเองอยู่แล้ว ไม่มีค่าใช้จ่ายใดๆ ในการซื้อโดเมนใหม่เมื่อเพิ่มเว็บไซต์ อย่างไรก็ตาม ค่าธรรมเนียมการต่ออายุสำหรับโดเมนที่มีอยู่จะยังคงมีผลใช้ต่อไป อย่าตัดสินราคาโดเมนของคุณเองจากส่วนลดปีแรกเท่านั้น ตรวจสอบราคาต่ออายุด้วย
โปรดทราบว่าค่าใช้จ่ายในการเพิ่ม API, ฐานข้อมูล, ฟังก์ชั่นเพจ ฯลฯ จะไม่รวมอยู่ในการประมาณการไซต์คงที่นี้
สำหรับการพัฒนาส่วนบุคคล ให้เลือกการกำหนดค่าที่ช่วยให้คุณสามารถดำเนินการต่อไปได้
การแนะนำธุรกิจ การแนะนำแอปพลิเคชัน การสนับสนุน บล็อกที่อัปเดตโดยคนจำนวนไม่มาก เพื่อจุดประสงค์เหล่านี้ การรันไซต์แบบคงที่ด้วย Cloudflare และ GitHub ถือเป็นตัวเลือกที่ดี
AI ช่วยสร้างและแก้ไขเพจ และมนุษย์ตรวจสอบและอนุมัติเนื้อหา ซึ่งจากนั้นจะเผยแพร่โดยอัตโนมัติ เมื่อฟังก์ชันการแก้ไขที่จำเป็นเพิ่มขึ้น ให้เพิ่ม CMS หรือบริการภายนอกในขั้นตอนนั้น
สำหรับการดำเนินงานส่วนบุคคลเช่น SANGE Studio เราต้องการเลือกการกำหนดค่าที่ช่วยให้เราสามารถส่งมอบข้อมูลทางธุรกิจต่อไปได้ ในขณะเดียวกันก็รักษาเวลาในการพัฒนาแอปพลิเคชันไว้ด้วย
วัสดุอ้างอิง
- ข้อมูลที่จำเป็นในการสร้างบัญชี Google Play Console
- ข้อมูลผลิตภัณฑ์หน้า Cloudflare
- เจ้าหน้าที่ WordPress: การทำให้ WordPress แข็งแกร่งขึ้น
- ทางการของ Cloudflare: การอัปโหลดโดยตรงและการรวม CI
- ทางการของ Cloudflare: อัปโหลดโดยตรง
- ทางการของ Cloudflare: โดเมนที่กำหนดเอง
- ขีดจำกัดหน้า Cloudflare
- อย่างเป็นทางการของ GitHub: กำหนดเวลากิจกรรม
- ทางการของ Cloudflare: HTML แบบคงที่
- ราคา GitHub Actions และระดับฟรี
- ทางการของ Cloudflare: ลงทะเบียนโดเมนใหม่