หน้าแรกของการพัฒนาส่วนบุคคลคือ Cloudflare + GitHub วิธีสร้างไซต์คงที่อัปเดตด้วย AI และต้นทุน

หลังจากได้รับหมายเลข D-U-N-S และแนะนำแอปแล้ว ฉันก็เตรียมเว็บไซต์ธุรกิจเพื่อการพัฒนาตนเอง เราจะอธิบายความแตกต่างระหว่างไซต์แบบคงที่และ CMS, การอัปเดตบทความด้วย AI, การเผยแพร่ด้วย GitHub Actions และขั้นตอนการลงทะเบียนและค่าใช้จ่ายของ Cloudflare Pages

เผยแพร่ อัปเดต
  • Cloudflare
  • GitHub
  • การพัฒนาส่วนบุคคล

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

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 ไม่ใช่บริการที่ถูกที่สุดเพียงอย่างเดียว นอกจากนี้ยังมีบริการฟรีอีกด้วย นอกจากนี้ยังเป็นตัวเลือกที่เหมาะสมกับวัตถุประสงค์ของคุณในการเริ่มต้นเว็บไซต์แนะนำการพัฒนาส่วนบุคคลด้วยต้นทุนที่ต่ำ

กลไกการตีพิมพ์และแต่ละบทบาท
  1. AI + มนุษย์การสร้างและตรวจสอบบทความ/HTML
  2. GitHubจัดการไฟล์และประวัติการเปลี่ยนแปลง
  3. การดำเนินการของ GitHubการเผยแพร่การเปลี่ยนแปลงที่ได้รับอนุมัติ
  4. หน้า 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 ตรวจสอบโดยมนุษย์ จากนั้นจึงเผยแพร่

ขั้นตอนการอัพเดตที่คาดหวังมีหกขั้นตอนต่อไปนี้

  1. จัดระเบียบธีมของบทความ เนื้อหาที่คุณต้องการสื่อ และประสบการณ์
  2. ขอให้ AI สร้างหน้าบทความที่ตรงกับการออกแบบที่มีอยู่
  3. ลงทะเบียนการเปลี่ยนแปลงที่เสนอบน GitHub
  4. มนุษย์ตรวจสอบข้อความ หลักฐาน การแสดงผลบนหน้าจอ และการเปลี่ยนแปลง
  5. รวมการเปลี่ยนแปลงที่ยืนยันแล้วไว้ในสาขา main เพื่อการเผยแพร่
  6. GitHub Actions เผยแพร่ไปยังหน้า Cloudflare

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

ตัวอย่างเช่น สามารถระบุคำขอไปยัง AI ได้ดังนี้

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

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

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

จากการเขียนบทความไปจนถึงการเผยแพร่
  1. 1. เตรียมต้นฉบับจัดระเบียบเนื้อหาที่คุณต้องการสื่อ
  2. 2. แปลงเป็น HTML ด้วย AIจับคู่กับการออกแบบที่มีอยู่
  3. 3. การยืนยันโดยเจ้าหน้าที่ตรวจสอบข้อความ หลักฐาน และการแสดงผล
  4. 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]

  1. เข้าสู่ระบบ Cloudflare และเปิด "ลงทะเบียนโดเมน" ใต้ "การลงทะเบียนโดเมน"
  2. ค้นหาชื่อโดเมนที่คุณต้องการและดูว่ามีตัวเลือกใดบ้าง เลือกชื่อที่ใกล้เคียงกับชื่อธุรกิจของคุณ และสั้นและพิมพ์ง่าย
  3. ตรวจสอบค่าธรรมเนียมการเข้าซื้อกิจการ ปีสัญญา และวันต่ออายุครั้งถัดไป เราไม่เพียงเปรียบเทียบราคาที่ต่ำในปีแรกเท่านั้น แต่ยังเปรียบเทียบค่าธรรมเนียมการต่ออายุ ภาษี และสกุลเงินในการชำระเงินด้วย
  4. กรอกชื่อ ที่อยู่ หมายเลขโทรศัพท์ และที่อยู่อีเมลของผู้ลงทะเบียนให้ถูกต้อง และลงทะเบียนวิธีการชำระเงิน ต้องป้อนข้อมูลผู้ลงทะเบียน Cloudflare ด้วยอักขระ ASCII ดังนั้นให้ป้อนชื่อและที่อยู่ภาษาญี่ปุ่นเป็นอักขระโรมัน ฯลฯ
  5. ตรวจสอบข้อกำหนดและจำนวนเงินที่ชำระ และยืนยันการซื้อของคุณ
  6. ตรวจสอบอีเมลยืนยันการลงทะเบียนของคุณและดำเนินการยืนยันที่อยู่อีเมลที่ร้องขอให้เสร็จสิ้น ตรวจสอบการตั้งค่าการต่ออายุอัตโนมัติและวันหมดอายุของวิธีการชำระเงินของคุณ

โดเมนที่ได้รับจากผู้รับจดทะเบียน 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 และวิธีลิงก์โดยตรงในการเผยแพร่อัตโนมัติพร้อมกัน

เชื่อมต่อโดเมนและไฟล์ไซต์ของคุณเอง
  1. โดเมนที่ไม่ซ้ำตัวอย่าง: example.com
  2. การตั้งค่า DNSระบุปลายทางการเชื่อมต่อโดเมน
  3. กำหนดค่าเพจเชื่อมโยงกับโดเมนที่กำหนดเอง
  4. ดูไซต์ยืนยันการเผยแพร่ด้วย HTTPS

การได้รับโดเมนและการเผยแพร่เพจเป็นงานที่แตกต่างกันสองประการ จัดการตั้งค่า DNS และการเชื่อมโยงทางฝั่งเพจ

8.ราคาเท่าไหร่คะ?

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

รายการค่าใช้จ่ายอาหารเสริม
Cloudflare Pages Free0 เหรียญสหรัฐต่อเดือนใช้สำหรับการเผยแพร่ไซต์แบบคงที่
GitHub Free0 เหรียญสหรัฐต่อเดือนจัดการไฟล์และประวัติการเปลี่ยนแปลง
GitHub Actions0 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 เราต้องการเลือกการกำหนดค่าที่ช่วยให้เราสามารถส่งมอบข้อมูลทางธุรกิจต่อไปได้ ในขณะเดียวกันก็รักษาเวลาในการพัฒนาแอปพลิเคชันไว้ด้วย

วัสดุอ้างอิง

  1. ข้อมูลที่จำเป็นในการสร้างบัญชี Google Play Console
  2. ข้อมูลผลิตภัณฑ์หน้า Cloudflare
  3. เจ้าหน้าที่ WordPress: การทำให้ WordPress แข็งแกร่งขึ้น
  4. ทางการของ Cloudflare: การอัปโหลดโดยตรงและการรวม CI
  5. ทางการของ Cloudflare: อัปโหลดโดยตรง
  6. ทางการของ Cloudflare: โดเมนที่กำหนดเอง
  7. ขีดจำกัดหน้า Cloudflare
  8. อย่างเป็นทางการของ GitHub: กำหนดเวลากิจกรรม
  9. ทางการของ Cloudflare: HTML แบบคงที่
  10. ราคา GitHub Actions และระดับฟรี
  11. ทางการของ Cloudflare: ลงทะเบียนโดเมนใหม่
← ไปที่รายการบทความบล็อกการพัฒนา