ทำเว็บด้วย WordPress แบบฟรีๆ รับคนเข้าได้เยอะ และปลอดภัยมากมาก

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

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

สำหรับเครื่องมือที่เราจะใช้กัน มีดังนี้

1. เว็บ WordPress สักเว็บนึง จะเหมาะมากกับเว็บแนว corporate เว็บ landing page หรือบล็อกส่วนตัว ซึ่งเราจะเก็บไว้แค่ localhost ก็ได้ ปลอดภัย ไม่มีใครมาแฮ็กแน่นอน
2. ปลั๊กอินแปลงเว็บเป็น static pages เช่น Staatic
3. บัญชี GitHub
4. บัญชี Cloudflare
5. ใช้ Git เป็นนิดหน่อย (ใครยังใช้ไม่เป็น รีบหัดนะครับ)

สาเหตุที่เลือกใช้ Cloudflare Pages แทนที่จะใช้ GitHub Pages จบๆ ไปเลย นั่นเพราะว่าเราสามารถเอามาใช้กับ Worker เพื่อรัน JavaScript ให้ทำงานบางอย่างเพิ่มเติมได้ (เช่นทำระบบ Search หรือการแปลงภาพเป็น WebP) และรวมๆ ก็ยังเข้าถึงได้เร็วกว่าด้วย (แน่นอนล่ะ)

อ่านเพิ่มเติม: https://bejamas.io/compare/cloudflare-pages-vs-github-pages

เตรียม GitHub Repository

ขั้นแรกให้เราไปสร้าง repository เอาไว้บน GitHub ก่อน (เราจะเก็บหน้าเว็บเราไว้ที่นี่)

จากนั้นก็ clone repo เปล่าๆ มาเก็บไว้ในเครื่องเรา

git clone [email protected]:<username>/s<repository>.git ./my-static-website

ฝั่ง GitHub เตรียมแค่นี้แหละ เสร็จแล้ว

คือจริงๆ ปลั๊กอิน Staatic มันรองรับการดีพลอยไป GitHub อัตโนมัตินะ เราแค่ไปสร้าง API token เพิ่ม กำหนดสิทธิ์ read and write ให้กับสโคป contents แล้วเอามาใส่ก็ใช้ได้เลย

แต่ที่ลองดูคือมันจะเจอปัญหา timeout ตอน push ไปยัง GitHub ดังนั้นเราแปลงเป็น static เสร็จแล้ว เราโหลดมาคอมมิตเองดีกว่า

สร้าง Static Pages

ให้เราติดตั้งปลั๊กอิน Staatic (หรือ static page generator ตัวอื่นที่ชอบที่ชอบ) จากนั้นจัดการแปลงเว็บเป็น static ให้เรียบร้อย

สำหรับ Staatic เมื่อติดตั้งและเปิดใช้ปลั๊กอินแล้ว ให้ไปที่เมนู Staatic > Publications และเลือก Publish Now ปลั๊กอินก็จะเริ่มกระบวนการแปลงเว็บไซต์ให้ทันที ซึ่งจะใช้เวลาสักพักนึง (อย่างบล็อกนี้ ที่ไม่ใช่บล็อกนั้น ใช้เวลาประมาณ 20 นาที) เมื่อเสร็จแล้วก็กลับมาหน้า Publications และดาวน์โหลดไฟล์ล่าสุดมาไว้ที่เครื่องเรา

ซึ่งในไฟล์ที่เราดาวน์โหลดมานี่แหละ จะเป็นเว็บไซต์ทั้งหมดของเรา ถึงสเต็ปนี้เราจะเอาเว็บไปอัปโหลดที่ไหนก็ได้แล้ว (แม้แต่โฮสต์ Thai.net ก็ได้เช่นกัน) แต่เพื่อความเท่และความคูล เราจะเอามันไปแปะไว้บน Cloudflare Pages กัน

คอมมิตเว็บเราขึ้น GitHub

ได้ไฟล์ static มาแล้วก็แตกไฟล์ออก แล้วก็อปไฟล์ทั้งหมดไปไว้ในโฟลเดอร์ของ git repository ที่เราเพิ่งโคลนลงมาเมื่อสักครู่นี้ (ในตัวอย่างจะเป็นการโคลนลงมาใส่โฟลเดอร์ my-static-website) จากนั้นก็คอมมิตและพุชขึ้นไปบน GitHub

git add .
git commit -m 'my cool website'
git push origin

สร้าง Cloudflare Pages

ล็อกอินเข้าไปในบัญชี Cloudflare ของเรา ในเมนูทางซ้ายมือให้เลือกไปที่ Workers & Pages > Overview จากนั้นกด Create เลือกแท็บ Page และเลือก Connect to Git (Cloudflare Pages รองรับทั้ง GitHub และ GitLab)

ให้เราลือกบัญชีของเราและเลือก repository ที่เราสร้างเอาไว้ และกด Begin setup

ในหน้าถัดมาจะเป็นตัวเลือกการรัน build script สำหรับเฟรมเวิร์กต่างๆ ซึ่งเว็บเรานั้น export มาเป็น HTML เรียบร้อยแล้วจึงไม่จำเป็นต้อง build อะไรเพิ่ม สามารถเลือก Framework preset เป็น None ได้เลย และในส่วนของ Project name จะเป็นตัวกำหนด URL ของเรา โดยจะได้เป็น <project-name>.pages.dev แต่จริงๆ เราก็ยังกำหนด Custom domain เพิ่มให้มันได้เช่นกัน

จากนั้นก็กด Save and Deploy รอสักครู่ก็พร้อมใช้งาน

กำหนด Custom Domain ให้กับ Cloudflare Pages

กลับมาที่หน้า Overview เราจะเห็น Pages ของเราถูกสร้างขึ้นมาแล้ว กดคลิกเข้าไปแล้วเลือกที่แท็บ Custom Domains แล้วเลือก Setup a custom domain

หน้าต่อมาจะให้เรากรอกโดเมนที่ต้องการ ซึ่งก็กรอกได้ทั้งโดเมนหรือซับโดเมนแล้วแต่สะดวก

เมื่อกด Continue หน้าต่อไปก็จะขึ้นค่า DNS Record ที่เราต้องไปกรอกเพิ่มเอาเอง เมื่อเรากรอก DNS Record เสร็จแล้วก็กลับมากด Activate Domain เป็นอันเรียบร้อย

https://very-secure-wordpress-website.jirayu.in.th

อัปเดตเนื้อหายังไง?

ถ้าเรายืนหยัดยืนยงกับความฟรี เมื่อเราอัปเดตเนื้อหาใดๆ ก็ตาม เราก็ต้องมากด New Publication ใหม่อีกรอบ จากนั้นดาวน์โหลดเนื้อหาทั้งหมดมาใส่ในโฟลเดอร์ git repository ของเรา คอมมิตและพุชใหม่อีกรอบ ทั้งนี้ Cloudflare Pages จะคอยดีพลอยให้เราใหม่เองทุกครั้งที่มีการพุชคอมมิตใหม่เข้าไปยัง main บน repository ของเรา

หรือถ้าใครยอมเสียเงินใช้ Staatic รุ่น Premium ก็จะได้ฟีเจอร์เพิ่มมาอีกเช่น

1. รองรับการส่งฟอร์ม
2. รองรับระบบค้นหา
3. อัปเดตเฉพาะเนื้อหาใหม่ได้
4. ตั้งเวลาปล่อยเนื้อหาได้

สายฟรีจะใช้ฟอร์มและค้นหายังไง

เราสามารถเขียน Worker เพื่อทำหน้าที่เป็น search engine บนเว็บเราได้ (อาจจะเอาไปต่อกับ Elasticsearch) รวมถึงใช้เก็บข้อมูลจากฟอร์มลงฐานข้อมูลก็ได้เช่นกัน ไม่ว่าจะเป็นการส่งไปยังผู้ให้บริการภายนอกอย่าง HubSpot หรือจะเก็บลงฐานข้อมูลเอง Cloudflare ก็มีบริการ integration กับฐานข้อมูลให้ด้วยเหมือนกัน

ปลอดภัยแค่ไหน?

ก็คือตอนนี้เราเอาตัวหลังบ้าน WordPress ไปซ่อนไว้ที่อื่นแล้ว (ซ่อนไว้ในเครื่องเราคนเดียวเลยก็ได้) และเว็บของเราจะเป็นเพียง static HTML บน GitHub และ Cloudflare ทั้งหมด ดังนั้นถ้าเราไม่ตั้งรหัสผ่านอ่อนเกินไป หรือโดนหลอกเก็บรหัสผ่านไปได้ คนจะมาแฮ็กก็ต้องเจาะเข้าระบบของ GitHub หรือ Cloudflare ซึ่งถ้าทำได้ขนาดก็ปล่อยไปเถอะ 🥲

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

• Category: Development