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

1. เตรียมความพร้อมก่อนเริ่มใช้งาน Netlify

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

1.1 มีโปรเจกต์เว็บไซต์แบบ Static พร้อมใช้งาน

สิ่งสำคัญที่สุดคือคุณต้องมีโปรเจกต์เว็บไซต์แบบ Static ที่พร้อมจะ Deploy ขึ้น Netlify โปรเจกต์เหล่านี้อาจเป็นไฟล์ HTML, CSS, JavaScript ธรรมดาๆ, เว็บไซต์ที่สร้างด้วย Static Site Generators (SSGs) อย่าง Gatsby, Next.js (แบบ Static Export), Hugo, Jekyll, หรือแม้แต่ Vuepress, Astro และ SvelteKit (ในโหมด SSG) ก็ได้

• โครงสร้างไฟล์: ตรวจสอบให้แน่ใจว่าโปรเจกต์ของคุณมีโครงสร้างไฟล์ที่ถูกต้อง โดยปกติแล้วไฟล์ index.html จะอยู่ที่ Root Directory หรือในโฟลเดอร์ public, build, dist หรือ out ขึ้นอยู่กับ SSG ที่คุณใช้
• โค้ดที่สมบูรณ์: โค้ดของคุณควรทำงานได้ตามปกติบนเครื่องของคุณก่อนที่จะนำไป Deploy เพราะ Netlify จะทำการ build โค้ดของคุณตามคำสั่งที่คุณระบุ

1.2 บัญชี GitHub, GitLab หรือ Bitbucket

Netlify ทำงานร่วมกับ Git Repository ได้อย่างลงตัว คุณจะต้องมีบัญชี GitHub, GitLab หรือ Bitbucket เพื่อเก็บโค้ดโปรเจกต์ของคุณ การเชื่อมต่อ Netlify กับ Repositories เหล่านี้จะทำให้คุณสามารถ Deploy เว็บไซต์ได้โดยอัตโนมัติทุกครั้งที่มีการ Push โค้ดใหม่ ซึ่งเป็นคุณสมบัติที่เรียกว่า Continuous Deployment (CD) ที่ช่วยให้การทำงานของคุณสะดวกสบายขึ้นมาก

• สร้าง Repository: หากยังไม่มี ให้สร้าง Repository ใหม่บนแพลตฟอร์ม Git ที่คุณเลือก แล้ว Push โค้ดโปรเจกต์ของคุณขึ้นไป
• ตั้งค่า Public/Private: ไม่ว่า Repository จะเป็น Public หรือ Private ก็สามารถใช้งานได้กับ Netlify แต่หากเป็น Private คุณจะต้องให้สิทธิ์ Netlify ในการเข้าถึง

1.3 ความเข้าใจพื้นฐานเกี่ยวกับ Command Line (สำหรับบางกรณี)

ในหลายๆ กรณี การใช้งาน Netlify สามารถทำได้ผ่านหน้า Web UI ได้เลย แต่ในบางครั้ง โดยเฉพาะอย่างยิ่งเมื่อทำงานกับ Static Site Generators หรือต้องการ Debug ปัญหา การมีความเข้าใจพื้นฐานเกี่ยวกับ Command Line จะเป็นประโยชน์อย่างมาก

• การติดตั้ง Node.js/npm: หากโปรเจกต์ของคุณใช้ JavaScript Frameworks หรือ SSGs ที่ต้องใช้ Node.js และ npm ในการ build คุณอาจจะต้องติดตั้ง Node.js และ npm บนเครื่องของคุณ เพื่อทำการทดสอบ build โปรเจกต์ก่อน
• คำสั่งพื้นฐาน Git: การ Push, Pull, Commit โค้ดด้วยคำสั่ง Git บน Command Line เป็นทักษะพื้นฐานที่นักพัฒนาทุกคนควรมี

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

2. ลงทะเบียนและเชื่อมต่อบัญชี Netlify

เมื่อเตรียมความพร้อมเรียบร้อยแล้ว ก็ถึงเวลาลงทะเบียนและเชื่อมต่อบัญชี Netlify กันครับ ขั้นตอนนี้ง่ายมากๆ และใช้เวลาไม่นาน คุณสามารถใช้บัญชี Git ที่มีอยู่แล้วในการสมัครได้เลย

2.1 เข้าสู่เว็บไซต์ Netlify และลงทะเบียน

1. เปิดเบราว์เซอร์: ไปที่ https://www.netlify.com/
2. คลิก "Sign up": มองหาปุ่ม "Sign up" ที่มุมขวาบนของหน้าจอแล้วคลิก
3. เลือกช่องทางการลงทะเบียน: Netlify จะเสนอทางเลือกในการลงทะเบียนหลายช่องทาง โดยส่วนใหญ่แล้วจะแนะนำให้ใช้บัญชี Git ที่คุณมีอยู่แล้ว เพื่อความสะดวกในการเชื่อมต่อในอนาคต

• GitHub: เป็นตัวเลือกที่ได้รับความนิยมมากที่สุด
• GitLab: สำหรับผู้ใช้ GitLab
• Bitbucket: สำหรับผู้ใช้ Bitbucket
• Email: คุณสามารถลงทะเบียนด้วยอีเมลได้เช่นกัน แต่คุณจะต้องเชื่อมต่อกับ Git Repository ในภายหลัง

1. อนุญาตการเข้าถึง: หากคุณเลือกที่จะลงทะเบียนด้วยบัญชี GitHub, GitLab หรือ Bitbucket ระบบจะพาคุณไปยังหน้าการอนุญาต (Authorization Page) ของแพลตฟอร์ม Git นั้นๆ ให้คุณอนุญาต Netlify ในการเข้าถึง Repository ของคุณ ไม่ต้องกังวล Netlify จะขอสิทธิ์ที่จำเป็นเท่านั้นเพื่อการ Deploy และจัดการโปรเจกต์ของคุณ

2.2 สำรวจ Dashboard ของ Netlify

หลังจากลงทะเบียนและเข้าสู่ระบบเรียบร้อยแล้ว คุณจะถูกนำมายัง Dashboard ของ Netlify นี่คือศูนย์บัญชาการหลักของคุณในการจัดการเว็บไซต์ต่างๆ ที่คุณ Deploy ขึ้นมา ในครั้งแรก Dashboard ของคุณจะว่างเปล่า แต่เมื่อคุณเริ่ม Deploy เว็บไซต์ คุณจะเห็นรายการเว็บไซต์ทั้งหมดของคุณแสดงอยู่ที่นี่

• ภาพรวม: Dashboard จะแสดงภาพรวมของ Sites (เว็บไซต์) ที่คุณมีอยู่, Teams (หากคุณทำงานเป็นทีม), และข้อมูลการใช้งานต่างๆ
• เริ่มต้นการ Deploy: คุณจะเห็นปุ่มใหญ่ๆ เช่น "Add new site" หรือ "New site from Git" ซึ่งเป็นจุดเริ่มต้นในการ Deploy เว็บไซต์แรกของคุณ

3. Deploy เว็บไซต์แรกของคุณจาก Git

นี่คือหัวใจของการใช้งาน Netlify เลยครับ การ Deploy เว็บไซต์จาก Git Repository เป็นวิธีที่นิยมที่สุดและมีประสิทธิภาพมากที่สุด คุณจะได้สัมผัสกับพลังของ Continuous Deployment ที่จะทำให้ชีวิตนักพัฒนาของคุณง่ายขึ้นเยอะ

3.1 สร้างไซต์ใหม่จาก Git

1. คลิก "Add new site": บน Dashboard ของ Netlify ให้คลิกปุ่ม "Add new site"
2. เลือก "Import an existing project": Netlify จะให้คุณเลือกว่าจะ Deploy ด้วยวิธีใด ให้เลือก "Import an existing project"
3. เชื่อมต่อกับ Git Provider: เลือกแพลตฟอร์ม Git ที่คุณใช้ (GitHub, GitLab, Bitbucket) หากคุณยังไม่ได้เชื่อมต่อ Netlify จะขอให้คุณอนุญาตการเข้าถึงอีกครั้ง
4. เลือก Repository: Netlify จะแสดงรายการ Repository ทั้งหมดที่คุณมีบนแพลตฟอร์ม Git นั้นๆ ให้คุณเลือก Repository ที่มีโปรเจกต์เว็บไซต์ของคุณ

3.2 กำหนดค่าการ Deploy

หลังจากเลือก Repository แล้ว Netlify จะนำคุณไปยังหน้าการตั้งค่าการ Deploy ซึ่งเป็นขั้นตอนที่สำคัญมากในการบอก Netlify ว่าจะ build และ Deploy เว็บไซต์ของคุณอย่างไร

3.2.1 Branch to deploy

• เลือก Branch: โดยปกติแล้ว คุณจะเลือก main หรือ master เป็น Branch หลักในการ Deploy ซึ่งหมายความว่า Netlify จะ Deploy โค้ดจาก Branch นี้เมื่อมีการ Push โค้ดใหม่ คุณสามารถเปลี่ยนเป็น Branch อื่นๆ ได้ หากคุณมี Workflow การทำงานที่แตกต่างออกไป (เช่น develop, staging เป็นต้น)

3.2.2 Basic build settings

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

• Build command: นี่คือคำสั่งที่ Netlify จะใช้ในการ build โปรเจกต์ของคุณ ซึ่งแตกต่างกันไปขึ้นอยู่กับ Static Site Generator (SSG) ที่คุณใช้:

• สำหรับโปรเจกต์ HTML/CSS/JS ธรรมดาๆ: โดยปกติแล้วคุณไม่จำเป็นต้องมี build command ใดๆ สามารถปล่อยว่างไว้ได้ หรืออาจจะเป็น npm install หากคุณมีการใช้ npm package และ npm run build หากคุณมี script สำหรับการ build ด้วยตัวเอง
• Gatsby: gatsby build
• Next.js (Static Export): next build && next export
• Hugo: hugo
• Jekyll: jekyll build
• Vuepress: vuepress build
• Astro: astro build
• SvelteKit (Static Adapter): npm run build (ต้องตั้งค่า adapter ใน svelte.config.js ให้เป็น @sveltejs/adapter-static ก่อน)

• Publish directory: นี่คือโฟลเดอร์ที่ Netlify คาดหวังว่าจะพบไฟล์ที่พร้อมใช้งานของเว็บไซต์ของคุณหลังจากกระบวนการ build เสร็จสิ้น:

• สำหรับโปรเจกต์ HTML/CSS/JS ธรรมดาๆ: โดยปกติแล้วคือ . (Root Directory) หรือ public
• Gatsby: public
• Next.js (Static Export): out
• Hugo: public
• Jekyll: _site
• Vuepress: .vuepress/dist
• Astro: dist
• SvelteKit (Static Adapter): build

ข้อควรจำ: หากคุณไม่แน่ใจว่า Build command และ Publish directory ของโปรเจกต์คุณคืออะไร ให้ดูที่เอกสารประกอบของ Static Site Generator ที่คุณใช้ หรือตรวจสอบไฟล์ package.json (สำหรับโปรเจกต์ Node.js)

3.2.3 Advanced build settings (Optional)

• Environment variables: หากโปรเจกต์ของคุณต้องการ Environment variables (เช่น API keys, token) ในระหว่างกระบวนการ build คุณสามารถกำหนดค่าได้ที่นี่ โดยคลิก "Show advanced" แล้ว "New variable" นี่เป็นวิธีที่ปลอดภัยในการจัดการข้อมูลสำคัญของคุณโดยไม่ต้อง hardcode ลงไปในโค้ด
• Build Hooks: สำหรับการทำงานร่วมกับ CI/CD อื่นๆ

3.3 เริ่มต้น Deploy และตรวจสอบสถานะ

1. คลิก "Deploy site": เมื่อตั้งค่าทุกอย่างเรียบร้อยแล้ว ให้คลิกปุ่ม "Deploy site" Netlify จะเริ่มกระบวนการ Deploy ทันที
2. ตรวจสอบสถานะการ Deploy: คุณจะถูกนำไปยังหน้า "Deploys" ของไซต์นั้นๆ คุณจะเห็นสถานะการ Deploy เป็น "Building" หรือ "Processing" Netlify จะแสดง Log ของกระบวนการ build แบบ Real-time คุณสามารถคลิกดู Log เพื่อตรวจสอบว่ามีข้อผิดพลาดเกิดขึ้นหรือไม่
3. Deploy สำเร็จ: หากทุกอย่างเป็นไปด้วยดี สถานะจะเปลี่ยนเป็น "Published" และ Netlify จะสร้าง URL ชั่วคราวให้คุณ ซึ่งปกติจะเป็นชื่อสุ่มๆ เช่น happy-newton-12345.netlify.app คุณสามารถคลิกที่ URL นี้เพื่อดูเว็บไซต์ของคุณที่ออนไลน์อยู่ได้ทันที!

4. การจัดการไซต์และการตั้งค่า Domain

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

4.1 ตั้งชื่อไซต์และ Domain ชั่วคราว

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

1. ไปที่ "Site settings": บน Dashboard ของ Netlify ให้คลิกที่ชื่อไซต์ของคุณ แล้วไปที่แท็บ "Site settings"
2. เปลี่ยนชื่อไซต์: ในส่วน "Site information" คุณจะเห็น "Site name" ซึ่งเป็นชื่อที่ Netlify ใช้ภายใน คุณสามารถคลิก "Change site name" เพื่อเปลี่ยนได้ (อันนี้ไม่ใช่ URL สาธารณะ)
3. เปลี่ยน Domain ชั่วคราว (Optional): ในส่วน "Domain management" คุณจะเห็น "Default subdomain" ซึ่งเป็น URL ชั่วคราวที่ Netlify สร้างให้ คุณสามารถคลิก "Options" แล้ว "Edit site name" เพื่อเปลี่ยนชื่อ subdomain ให้เป็นชื่อที่คุณต้องการได้ เช่น จาก happy-newton-12345.netlify.app เป็น my-awesome-project.netlify.app

4.2 การเพิ่ม Custom Domain

การมี Custom Domain ของตัวเอง (เช่น yourwebsite.com) เป็นสิ่งสำคัญสำหรับเว็บไซต์มืออาชีพ Netlify ทำให้การเชื่อมต่อ Custom Domain เป็นเรื่องง่ายมากๆ

1. ไปที่ "Domain management": บนหน้า "Site settings" ให้ไปที่แท็บ "Domain management"
2. คลิก "Add a custom domain": ป้อนชื่อ Domain ของคุณ (เช่น yourwebsite.com) แล้วคลิก "Verify"
3. ตรวจสอบความเป็นเจ้าของ: Netlify อาจขอให้คุณยืนยันความเป็นเจ้าของ Domain หากคุณเพิ่งเพิ่ม Domain นั้นๆ เป็นครั้งแรก
4. ตั้งค่า DNS: นี่คือขั้นตอนที่สำคัญที่สุด Netlify จะแนะนำให้คุณใช้ 2 วิธีในการเชื่อมต่อ Domain:

• Netlify DNS (Recommended): หากคุณต้องการให้ Netlify จัดการ DNS ทั้งหมดให้คุณ นี่เป็นวิธีที่ง่ายที่สุด คุณจะต้องเปลี่ยน Nameservers ของ Domain ของคุณให้ชี้มาที่ Netlify ที่ผู้ให้บริการ Domain ของคุณ (Domain Registrar) Netlify จะให้ Nameservers 4 ตัวแก่คุณ
• External DNS: หากคุณต้องการจัดการ DNS ด้วยตัวเอง หรือมี DNS Records อื่นๆ ที่ต้องรักษาไว้ คุณจะต้องเพิ่ม CNAME Record สำหรับ www (ชี้ไปที่ Domain ชั่วคราวของ Netlify ของคุณ) และ A Record สำหรับ Root Domain (@) ที่ชี้ไปที่ IP Address ของ Netlify (75.2.60.5)

คำแนะนำ: หากคุณไม่เคยตั้งค่า DNS มาก่อน แนะนำให้ใช้ Netlify DNS จะสะดวกที่สุดครับ

1. รอการ Propagation: หลังจากตั้งค่า DNS แล้ว อาจใช้เวลาสักพัก (ไม่กี่นาทีถึง 24 ชั่วโมง) เพื่อให้ DNS Records ทั่วโลกอัปเดต เมื่อการ Propagation เสร็จสมบูรณ์ เว็บไซต์ของคุณก็จะสามารถเข้าถึงได้ด้วย Custom Domain ของคุณ

4.3 การเปิดใช้งาน HTTPS/SSL (ฟรี!)

Netlify มีบริการ SSL Certificate ฟรีจาก Let's Encrypt ซึ่งจะช่วยให้เว็บไซต์ของคุณปลอดภัยและน่าเชื่อถือมากขึ้น โดยปกติแล้ว Netlify จะเปิดใช้งานให้อัตโนมัติเมื่อคุณเชื่อมต่อ Custom Domain

1. ตรวจสอบสถานะ SSL: ในหน้า "Domain management" ภายใต้ส่วน "HTTPS" คุณจะเห็นสถานะ SSL Certificate ของคุณ
2. บังคับใช้ HTTPS: หากยังไม่ได้เปิดใช้งาน คุณสามารถคลิก "Options" แล้วเลือก "Force HTTPS" เพื่อให้แน่ใจว่าผู้ใช้งานทุกคนจะเข้าถึงเว็บไซต์ของคุณผ่าน HTTPS เสมอ

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

5. Continuous Deployment และ Preview Deployments

หัวข้อ	รายละเอียด	หน่วยวัด	ค่าเฉลี่ย
เวลาติดตั้ง Netlify CLI	เวลาที่ใช้ในการติดตั้ง Netlify CLI ผ่าน npm	วินาที	30
จำนวนขั้นตอนการติดตั้ง	จำนวนขั้นตอนหลักที่ต้องทำเพื่อให้ติดตั้งเสร็จสมบูรณ์	ขั้นตอน	5
ขนาดไฟล์ติดตั้ง	ขนาดไฟล์ที่ดาวน์โหลดสำหรับติดตั้ง Netlify CLI	เมกะไบต์	15
ความต้องการระบบขั้นต่ำ	ระบบปฏิบัติการและ Node.js เวอร์ชันที่รองรับ	เวอร์ชัน	Node.js 12 ขึ้นไป
อัตราความสำเร็จในการติดตั้ง	เปอร์เซ็นต์ของการติดตั้งที่สำเร็จโดยไม่มีข้อผิดพลาด	เปอร์เซ็นต์	98%

หนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Netlify คือ Continuous Deployment (CD) ที่ทำให้กระบวนการ Deploy เว็บไซต์ของคุณเป็นไปโดยอัตโนมัติ นอกจากนี้ยังมี Preview Deployments ที่ช่วยให้คุณสามารถดูการเปลี่ยนแปลงก่อนที่จะ Deploy ขึ้น Production จริง

5.1 Continuous Deployment (CD)

เมื่อคุณเชื่อมต่อ Repository กับ Netlify แล้ว และมีการตั้งค่า Build command กับ Publish directory เรียบร้อย Netlify จะตั้งค่า Continuous Deployment ให้คุณโดยอัตโนมัติ

• Workflow: ทุกครั้งที่คุณ Push โค้ดไปยัง Branch ที่คุณกำหนดให้ Deploy (เช่น main หรือ master) Netlify จะตรวจจับการเปลี่ยนแปลงนั้น และจะเริ่มกระบวนการ build และ deploy เว็บไซต์ของคุณโดยอัตโนมัติ
• ประโยชน์:
• ประหยัดเวลา: ไม่ต้อง Deploy ด้วยมืออีกต่อไป
• ลดข้อผิดพลาด: ลดโอกาสเกิดข้อผิดพลาดจากการ Deploy ด้วยมือ
• อัปเดตได้รวดเร็ว: เว็บไซต์ของคุณจะอัปเดตตามโค้ดล่าสุดของคุณเสมอ

• การจัดการ Deployments: คุณสามารถดูประวัติการ Deploy ทั้งหมดได้ที่แท็บ "Deploys" ของไซต์นั้นๆ คุณจะเห็นสถานะของการ Deploy แต่ละครั้ง, Log การ build, และหากมีการ Deploy ที่ล้มเหลว คุณสามารถดูข้อผิดพลาดเพื่อแก้ไขได้

5.2 Preview Deployments (หรือ Deploy Previews)

Preview Deployments เป็นคุณสมบัติที่ยอดเยี่ยมสำหรับทีมพัฒนาและผู้ที่ต้องการตรวจสอบการเปลี่ยนแปลงก่อนที่จะเผยแพร่ไปยัง Production จริง Netlify จะสร้าง Deploy Preview สำหรับทุก Pull Request (หรือ Merge Request) ที่คุณสร้างขึ้นบน GitHub/GitLab/Bitbucket

• Workflow:

1. คุณสร้าง Branch ใหม่สำหรับฟีเจอร์หรือแก้ไขบั๊ก
2. คุณ Push โค้ดไปยัง Branch นั้น
3. คุณสร้าง Pull Request (PR) บน GitHub/GitLab/Bitbucket
4. Netlify จะตรวจจับ PR นั้น และจะสร้าง Deploy Preview โดยอัตโนมัติพร้อม URL ชั่วคราวสำหรับ PR นั้นๆ
5. คุณสามารถแชร์ URL ของ Deploy Preview นี้กับทีมงานหรือลูกค้าเพื่อรับ Feedback
6. เมื่อ PR ถูก Merge เข้าสู่ Branch หลัก (เช่น main) Netlify จะทำการ Deploy ขึ้น Production โดยอัตโนมัติ

• ประโยชน์:
• ตรวจสอบการเปลี่ยนแปลงก่อนใคร: เห็นว่าการเปลี่ยนแปลงของคุณจะมีลักษณะอย่างไรบนสภาพแวดล้อมจริง
• รับ Feedback ได้ง่าย: แชร์ URL ให้กับเพื่อนร่วมงานหรือลูกค้าเพื่อขอความคิดเห็น
• ลดความเสี่ยง: ลดความเสี่ยงในการ Deploy โค้ดที่มีปัญหาขึ้น Production
• ผสานรวมกับ Git: Netlify จะแสดงสถานะการ Deploy Preview บนหน้า PR ของคุณโดยตรง

5.3 Rollbacks (ย้อนกลับการ Deploy)

เกิดข้อผิดพลาดหลังจากการ Deploy ขึ้น Production? ไม่ต้องกังวล! Netlify มีคุณสมบัติ Rollback ที่ช่วยให้คุณสามารถย้อนกลับไปยัง Deploy เวอร์ชันก่อนหน้าได้อย่างง่ายดาย

1. ไปที่แท็บ "Deploys": บน Dashboard ของ Netlify ให้เลือกไซต์ของคุณ แล้วไปที่แท็บ "Deploys"
2. เลือก Deploy ที่ต้องการ: คุณจะเห็นรายการ Deploy ทั้งหมดของคุณ โดยมี "Current" กำกับอยู่ Deploy ที่คุณต้องการ Rollback ไปคือ Deploy ที่ "Published" ก่อนหน้า
3. คลิก "Publish deploy": เมื่อคุณเจอ Deploy ที่ต้องการย้อนกลับไป ให้คลิกที่มัน แล้วจะเห็นปุ่ม "Publish deploy" ให้คลิกปุ่มนี้ Netlify จะทำการเปลี่ยน Deploy ปัจจุบันของคุณกลับไปเป็นเวอร์ชันนั้นทันที

• ประโยชน์: เป็นฟีเจอร์ช่วยชีวิตเมื่อเกิดปัญหาหลังจาก Deploy ทำให้คุณสามารถแก้ไขสถานการณ์ได้อย่างรวดเร็ว

6. Netlify Dev และ Netlify CLI

Netlify ไม่ได้มีแค่ Web UI เท่านั้น แต่ยังมี Command Line Interface (CLI) และฟีเจอร์ Netlify Dev ที่ช่วยให้การพัฒนาเว็บไซต์ของคุณง่ายขึ้นและคล้ายกับสภาพแวดล้อม Production มากที่สุด

6.1 ติดตั้ง Netlify CLI

Netlify CLI เป็นเครื่องมือบรรทัดคำสั่งที่ช่วยให้คุณสามารถจัดการเว็บไซต์ Netlify ของคุณได้จาก Terminal ไม่ว่าจะเป็นการ Deploy ด้วยมือ, การตั้งค่า Environment variables, หรือการทดสอบ Functions

1. ติดตั้ง Node.js: หากยังไม่ได้ติดตั้ง Node.js บนเครื่องของคุณ ให้ติดตั้งก่อน (ไปที่ https://nodejs.org/ เพื่อดาวน์โหลด)
2. ติดตั้ง Netlify CLI ผ่าน npm: เปิด Terminal หรือ Command Prompt แล้วรันคำสั่ง:

```bash

npm install netlify-cli -g

```

คำสั่ง -g คือการติดตั้งแบบ Global ทำให้คุณสามารถเรียกใช้คำสั่ง netlify ได้จากทุกที่

1. ล็อกอิน: หลังจากติดตั้งเสร็จ ให้รันคำสั่ง:

```bash

netlify login

```

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

6.2 Netlify Dev: พัฒนาในสภาพแวดล้อม Netlify Local

Netlify Dev เป็นฟีเจอร์ที่ยอดเยี่ยมของ Netlify CLI ที่ช่วยให้คุณสามารถรันและทดสอบเว็บไซต์ของคุณในเครื่อง Local โดยจำลองสภาพแวดล้อมของ Netlify ซึ่งรวมถึง Netlify Functions, Environment variables, และ Rewrites/Redirects

1. ไปที่ Root Directory ของโปรเจกต์: ใน Terminal ให้ cd เข้าไปยัง Root Directory ของโปรเจกต์เว็บไซต์ของคุณ
2. รันคำสั่ง netlify dev:

```bash

netlify dev

```

1. การทำงานของ netlify dev:

• ตรวจจับ SSG: Netlify Dev จะพยายามตรวจจับ Static Site Generator ที่คุณใช้ (เช่น Gatsby, Next.js, Hugo) และรัน dev server ที่ถูกต้องให้คุณโดยอัตโนมัติ (เช่น gatsby develop, next dev)
• จำลอง Netlify Functions: หากคุณมี Netlify Functions อยู่ในโปรเจกต์ Netlify Dev จะรัน Functions เหล่านั้นบนเครื่อง Local ของคุณ ทำให้คุณสามารถทดสอบ Functions ได้โดยไม่ต้อง Deploy ขึ้น Netlify จริง
• อ่าน Environment variables: Netlify Dev จะอ่าน Environment variables ที่คุณตั้งค่าไว้ใน Netlify Dashboard และนำมาใช้ในสภาพแวดล้อม Local
• จำลอง Rewrites/Redirects: Rule การ Redirect ที่คุณตั้งค่าไว้ใน _redirects หรือ netlify.toml ก็จะถูกจำลองบน Local ด้วย

• ประโยชน์:
• ลดความแตกต่างระหว่าง Local กับ Production: ทำให้คุณมั่นใจได้ว่าโค้ดของคุณจะทำงานได้เหมือนกันทั้งบน Local และบน Netlify
• ทดสอบ Functions ได้ง่าย: พัฒนาและทดสอบ Serverless Functions ได้อย่างรวดเร็ว
• Debug ได้สะดวก: สามารถใช้เครื่องมือ Debug ของเบราว์เซอร์หรือ IDE ของคุณได้อย่างเต็มที่

6.3 Deploy ด้วย Netlify CLI (สำหรับกรณีพิเศษ)

แม้ว่า Continuous Deployment จาก Git จะเป็นวิธีหลัก แต่ในบางกรณี คุณอาจต้องการ Deploy ด้วยมือผ่าน CLI เช่น หากคุณมีโปรเจกต์ที่ไม่ได้เก็บไว้ใน Git หรือต้องการ Deploy ไฟล์บางส่วนชั่วคราว

1. รันคำสั่ง netlify deploy:

```bash

netlify deploy

```

1. เลือก Site: CLI จะถามว่าคุณต้องการ Deploy ไปยังไซต์ที่มีอยู่แล้ว หรือสร้างไซต์ใหม่
2. ระบุ Deploy Folder: CLI จะถามว่าโฟลเดอร์ใดคือโฟลเดอร์ที่จะ Deploy (เทียบเท่ากับ Publish directory) โดยปกติคือ public, build, dist หรือ .
3. Deploy Preview หรือ Production:

• หากต้องการ Deploy เป็น Preview (ชั่วคราว) ให้รัน netlify deploy
• หากต้องการ Deploy ขึ้น Production ทันที ให้รัน netlify deploy --prod

• ประโยชน์: ยืดหยุ่นในการ Deploy ในสถานการณ์ที่ไม่ได้ใช้ Git Workflow ปกติ

7. Netlify Functions (Serverless Functions)

Netlify Functions เป็นบริการ Serverless Functions ที่ช่วยให้คุณสามารถรันโค้ด Back-end ขนาดเล็กได้โดยไม่ต้องจัดการ Server ด้วยตัวเอง คุณสามารถเขียน Functions ด้วย JavaScript, TypeScript, Go หรือ Rust และ Deploy พร้อมกับเว็บไซต์ Static ของคุณ

7.1 หลักการทำงานของ Netlify Functions

• โค้ด on Demand: Functions จะถูกเรียกใช้เมื่อมีการ Request เข้ามาเท่านั้น
• ไม่ต้องจัดการ Server: Netlify จัดการโครงสร้างพื้นฐานทั้งหมดให้คุณ
• ผสานรวมกับ API Gateway: Netlify จัดการเรื่อง API Gateway และการ Routing ให้คุณโดยอัตโนมัติ
• รวมอยู่ใน Workflow การ Deploy: Functions จะถูก Deploy พร้อมกับเว็บไซต์ของคุณ

7.2 ตัวอย่างการสร้าง Netlify Function (JavaScript)

1. สร้างโฟลเดอร์สำหรับ Functions: โดยทั่วไป คุณจะสร้างโฟลเดอร์ชื่อ netlify/functions ที่ Root Directory ของโปรเจกต์
2. สร้างไฟล์ Function: ภายในโฟลเดอร์ netlify/functions สร้างไฟล์ JavaScript เช่น hello.js
3. เขียนโค้ด Function:

```javascript

// netlify/functions/hello.js

exports.handler = async function(event, context) {

// event: ข้อมูล Request (Headers, Body, Query parameters)

// context: ข้อมูลเกี่ยวกับสภาพแวดล้อม (เช่น User details หากมีการล็อกอินด้วย Netlify Identity)

// ตรวจสอบ Method ของ Request

if (event.httpMethod !== 'GET') {

return { statusCode: 405, body: 'Method Not Allowed' };

}

// ดึง query parameter

const name = event.queryStringParameters.name || 'World';

return {

statusCode: 200,

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify({ message: Hello, ${name}! }),

};

};

```

1. ตั้งค่าใน netlify.toml (Optional แต่แนะนำ): คุณสามารถกำหนด Path ของ Functions ได้ในไฟล์ netlify.toml ที่ Root Directory

```toml

[build]

functions = "netlify/functions" # ระบุโฟลเดอร์ที่เก็บ Functions

หรือในกรณีที่คุณต้องการให้ Netlify CLI รัน Functions ด้วย

[functions]

node_bundler = "esbuild" # แนะนำให้ใช้ esbuild เพื่อประสิทธิภาพที่ดีขึ้น

```

1. Deploy และทดสอบ:

• บน Local ด้วย Netlify Dev: รัน netlify dev แล้วเข้าถึง Function ได้ที่ http://localhost:8888/.netlify/functions/hello?name=Netlify (พอร์ตอาจแตกต่างกันไป)
• บน Production: เมื่อ Deploy ขึ้น Netlify แล้ว Function จะเข้าถึงได้ที่ https://[your-site-name].netlify.app/.netlify/functions/hello?name=Netlify

• Use Cases:
• API Endpoints ขนาดเล็ก
• ส่งฟอร์มอีเมล
• ประมวลผล Webhooks
• เชื่อมต่อกับฐานข้อมูล
• จัดการการยืนยันตัวตน (Authentication)

8. Forms และ Redirects/Rewrites

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

8.1 Netlify Forms

Netlify Forms เป็นฟีเจอร์ที่ยอดเยี่ยมที่ช่วยให้คุณสามารถรวบรวมข้อมูลจากฟอร์มบนเว็บไซต์ Static ของคุณได้โดยไม่ต้องเขียนโค้ด Back-end เลย

1. สร้างฟอร์ม HTML: ในไฟล์ HTML ของคุณ ให้สร้าง

   element ปกติ
2. เพิ่ม data-netlify="true" attribute: นี่คือสิ่งสำคัญที่บอก Netlify ว่าให้จัดการฟอร์มนี้

```html

Your Name:

Your Email:

Message:

Send

```

1. Deploy เว็บไซต์: เมื่อคุณ Deploy เว็บไซต์ที่มีฟอร์มนี้ขึ้น Netlify ระบบจะตรวจจับฟอร์มโดยอัตโนมัติ
2. ดูข้อมูลฟอร์ม: ข้อมูลที่ส่งมาจากฟอร์มจะถูกเก็บไว้ใน Netlify Dashboard ของไซต์นั้นๆ ใต้แท็บ "Forms" คุณสามารถดู, ดาวน์โหลด, หรือตั้งค่าการแจ้งเตือนอีเมลได้

• คุณสมบัติเพิ่มเติม:
• Custom Success Page: กำหนดหน้าที่จะ Redirect ไปหลังจากส่งฟอร์มสำเร็จ (เพิ่ม action="/success" ใน

  แล้วสร้างไฟล์ success.html)
• Spam Protection: มีระบบ Honeypot และ reCAPTCHA ในตัว
• Ajax Submissions: สามารถส่งฟอร์มด้วย JavaScript (AJAX) ได้
• File Uploads: รองรับการอัปโหลดไฟล์ (ต้องเพิ่ม enctype="multipart/form-data" ใน
)

8.2 Redirects และ Rewrites

Netlify มีระบบ Redirects และ Rewrites ที่ทรงพลังและใช้งานง่าย ช่วยให้คุณสามารถจัดการ URL และการส่งต่อ Request ได้อย่างยืดหยุ่น

8.2.1 สร้างไฟล์ _redirects

วิธีที่ง่ายที่สุดคือการสร้างไฟล์ชื่อ _redirects ที่ Root Directory ของโฟลเดอร์ที่จะ Deploy (Publish directory) แต่ละบรรทัดในไฟล์นี้คือหนึ่ง Rule

• Basic Redirect:

```

/old-path /new-path 301

```

(301 คือ Permanent Redirect)

• Splat Redirect (Redirect ทุกอย่างภายใต้ Path):

```

/blog/* /news/:splat 301

```

(เช่น /blog/post1 จะไปที่ /news/post1)

• Proxy/Rewrite (แสดงเนื้อหาจาก Path อื่นโดยไม่เปลี่ยน URL):

```

/api/* /.netlify/functions/api/:splat 200

```

(เช่น /api/users จะไปที่ .netlify/functions/api/users แต่ URL ยังคงเป็น /api/users)

• Redirect ไปยัง External URL:

```

/legacy-page https://example.com/new-page 301

```

8.2.2 กำหนดใน netlify.toml

สำหรับ Rule ที่ซับซ้อนขึ้น หรือต้องการรวมการตั้งค่าทั้งหมดไว้ในที่เดียว คุณสามารถกำหนด Redirects และ Rewrites ในไฟล์ netlify.toml ได้

```toml

[[redirects]]

from = "/old-path"

to = "/new-path"

status = 301

[[redirects]]

from = "/blog/*"

to = "/news/:splat"

status = 301

[[redirects]]

from = "/api/*"

to = "/.netlify/functions/api/:splat"

status = 200

```

• ประโยชน์:
• จัดการ SEO: รักษาอันดับ SEO เมื่อเปลี่ยนโครงสร้าง URL
• สร้าง Custom Routing: สร้าง URL ที่เป็นมิตรกับผู้ใช้งานมากขึ้น
• ทำ Proxy API: ซ่อน Endpoint ของ API จริงจากผู้ใช้งาน
• จัดการ Error Pages: กำหนด Custom 404 Page (โดยปกติคือไฟล์ 404.html ใน Publish directory)

9. Netlify Analytics และ Add-ons

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

9.1 Netlify Analytics (บริการเสริม)

Netlify Analytics เป็นบริการเสริมที่ให้ข้อมูลเชิงลึกเกี่ยวกับการเข้าชมเว็บไซต์ของคุณ โดยไม่ใช้ JavaScript และไม่บันทึกข้อมูลส่วนบุคคลของผู้ใช้งาน (GDPR compliant) ซึ่งแตกต่างจาก Google Analytics

• คุณสมบัติ:
• ไม่ใช้ JavaScript: เก็บข้อมูลที่ Server-side โดยตรง ทำให้ไม่ถูกบล็อกโดย Ad-blockers และไม่ส่งผลต่อประสิทธิภาพของเว็บไซต์
• ข้อมูลผู้เข้าชมที่ไม่ระบุตัวตน: ไม่เก็บข้อมูลส่วนบุคคล เช่น IP address เพื่อความเป็นส่วนตัว
• ข้อมูลการเข้าชม: แสดงข้อมูล Page views, Unique visitors, Referrers, Top pages, และ Traffic by country
• ภาพรวมประสิทธิภาพ: ช่วยให้คุณเข้าใจพฤติกรรมการใช้งานเว็บไซต์ของคุณได้ดียิ่งขึ้น

• การเปิดใช้งาน: คุณสามารถเปิดใช้งาน Netlify Analytics ได้จากแท็บ "Analytics" ในหน้า Site settings ของคุณ โดยมีค่าใช้จ่ายเพิ่มเติม

9.2 Add-ons อื่นๆ ของ Netlify

Netlify มีระบบ Add-ons ที่ช่วยให้คุณสามารถเพิ่มฟังก์ชันการทำงานต่างๆ ให้กับเว็บไซต์ของคุณได้อย่างง่ายดาย โดยมี Add-ons ทั้งที่เป็นของ Netlify เองและของ Third-party

• Netlify Identity: ระบบยืนยันตัวตนสำหรับเว็บไซต์ Static ของคุณ (Authentication) ซึ่งรองรับการล็อกอินด้วยอีเมล/รหัสผ่าน และ Social Logins (GitHub, Google, GitLab) เหมาะสำหรับสร้างเว็บไซต์ที่มี Member Area หรือ Admin Panel ขนาดเล็ก
• Netlify CMS: Content Management System (CMS) แบบ Open Source ที่ทำงานร่วมกับ Git และ Netlify ได้อย่างลงตัว ช่วยให้ผู้ดูแลเว็บไซต์สามารถจัดการเนื้อหาได้ง่ายๆ โดยไม่ต้องเข้าถึงโค้ด
• Axiom: สำหรับเก็บ Log ของ Serverless Functions ของคุณ
• Rollbar: สำหรับตรวจสอบข้อผิดพลาด (Error Monitoring)
• FaunaDB: Serverless Database ที่สามารถเชื่อมต่อกับ Netlify Functions ได้อย่างดีเยี่ยม

• การจัดการ Add-ons: คุณสามารถดูและจัดการ Add-ons ของไซต์ของคุณได้ที่แท็บ "Add-ons" ในหน้า Site settings

10. การเรียนรู้เพิ่มเติมและแหล่งข้อมูล

Netlify เป็นแพลตฟอร์มที่มีฟีเจอร์มากมายและมีการพัฒนาอย่างต่อเนื่อง การเรียนรู้เพิ่มเติมจะช่วยให้คุณใช้งาน Netlify ได้อย่างเต็มประสิทธิภาพและแก้ไขปัญหาต่างๆ ได้ด้วยตัวเอง

10.1 เอกสารประกอบของ Netlify (Docs)

เอกสารประกอบอย่างเป็นทางการของ Netlify เป็นแหล่งข้อมูลที่ดีที่สุดในการเรียนรู้ทุกสิ่งที่คุณต้องการเกี่ยวกับแพลตฟอร์มนี้

• ครอบคลุมทุกด้าน: ตั้งแต่พื้นฐานไปจนถึงฟีเจอร์ขั้นสูง, การตั้งค่า, Troubleshooting, และ Use Cases ต่างๆ
• อัปเดตอยู่เสมอ: เอกสารจะได้รับการอัปเดตตามการเปลี่ยนแปลงของแพลตฟอร์ม
• ค้นหาง่าย: มีฟังก์ชันการค้นหาที่ช่วยให้คุณหาข้อมูลที่ต้องการได้อย่างรวดเร็ว
• ลิงก์: https://docs.netlify.com/

10.2 Netlify Community Forums

หากคุณมีคำถามหรือปัญหาที่ไม่สามารถหาคำตอบได้จากเอกสารประกอบ Netlify Community Forums เป็นสถานที่ที่ดีเยี่ยมในการสอบถามและพูดคุยกับผู้ใช้งานคนอื่นๆ รวมถึงทีมงานของ Netlify

• ถาม-ตอบ: โพสต์คำถามของคุณและรับความช่วยเหลือจากชุมชน
• ค้นหาคำตอบ: มีคำถามและคำตอบจำนวนมากที่เคยถูกถามไปแล้ว
• แลกเปลี่ยนความรู้: เรียนรู้จากประสบการณ์ของผู้อื่น
• ลิงก์: https://community.netlify.com/

10.3 Netlify Blog

Netlify Blog เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับการเรียนรู้เกี่ยวกับฟีเจอร์ใหม่ๆ, แนวปฏิบัติที่ดีที่สุด (Best Practices), บทเรียน (Tutorials), และข่าวสารเกี่ยวกับ Jamstack และ Serverless

• บทความเชิงลึก: มีบทความที่อธิบายถึงแนวคิดและเทคโนโลยีต่างๆ ที่เกี่ยวข้อง
• Use Cases: ตัวอย่างการใช้งานจริงของ Netlify ในสถานการณ์ต่างๆ
• แรงบันดาลใจ: ได้รับแรงบันดาลใจจากโปรเจกต์และแนวคิดใหม่ๆ
• ลิงก์: https://www.netlify.com/blog/

10.4 Tutorials และ Videos อื่นๆ

มีแหล่งข้อมูลมากมายบน YouTube, Medium, Dev.to และบล็อกของนักพัฒนาอิสระที่สอนการใช้งาน Netlify ในรูปแบบต่างๆ ตั้งแต่เริ่มต้นไปจนถึงโปรเจกต์ที่ซับซ้อน ลองค้นหาด้วยคำว่า "Netlify tutorial" หรือ "Deploy static site Netlify" เพื่อหาบทเรียนที่เหมาะกับคุณ

• เรียนรู้จากตัวอย่าง: วิดีโอและบทความที่พาคุณทำตามขั้นตอนจริง
• มุมมองที่หลากหลาย: ได้เรียนรู้จากมุมมองและเทคนิคที่แตกต่างกันไป
• อัปเดตทักษะ: ติดตามเทรนด์และเทคโนโลยีใหม่ๆ ในวงการ Jamstack

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

FAQs

การติดตั้ง Netlify ต้องทำอย่างไร?

การติดตั้ง Netlify สามารถทำได้โดยการสร้างบัญชีผู้ใช้ที่เว็บไซต์ Netlify จากนั้นคุณสามารถเชื่อมต่อกับ GitHub, GitLab หรือ Bitbucket เพื่อทำการนำเข้าโปรเจกต์ของคุณได้อย่างง่ายดาย

Netlify รองรับภาษาโปรแกรมอะไรบ้าง?

Netlify รองรับการใช้งานกับหลายภาษาโปรแกรม เช่น HTML, CSS, JavaScript และยังสามารถใช้งานร่วมกับเฟรมเวิร์กต่างๆ เช่น React, Vue.js, และ Angular ได้อีกด้วย

Netlify มีฟีเจอร์อะไรที่น่าสนใจบ้าง?

Netlify มีฟีเจอร์ที่น่าสนใจมากมาย เช่น Continuous Deployment, การจัดการโดเมน, SSL Certificates ฟรี, และการสร้างฟังก์ชัน Serverless ที่ช่วยให้คุณสามารถพัฒนาแอปพลิเคชันได้อย่างมีประสิทธิภาพ

การเชื่อมต่อโดเมนส่วนตัวกับ Netlify ทำได้อย่างไร?

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

Netlify มีค่าใช้จ่ายหรือไม่?

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