บทความนี้เป็นบทความประกอบ Video ใช้ AI สร้าง Sale page แบบ No-Code ด้วย Bolt.new
Bolt.new คือโปรแกรมที่ใช้ Generative AI (Claude 3.5 Sonnet) ในการช่วยเราเขียนโค้ดโดยเพียงแค่เราพิมคำสั่งอธิบายโปรเจคที่เราต้องการ เพียงเท่านี้ โปรแกรมก็จะเริ่มเขียนโค้ดให้เราเองได้แล้ว
หากต้องการแก้ไขส่วนที่ AI เขียนโค้ดมาให้ก็เพียงแค่พิมคำสั่งให้ระบบแก้ไขตัวเองได้เลย Bolt.new ยังสามารถจัดการเรื่องการ Deployment ในตัวผ่าน Netlify และเชื่อมต่อกับ Database ด้วย Supabase
นอกจาก Bolt.new แล้วยังมีโปรแกรมอื่น ๆ ที่มีความสามารถคล้าย ๆ กัน เช่น v0, lovable, Replit AI
ตัวอย่างเว็บไซต์ที่เสร็จสมบูรณ์แล้ว
ถึงแม้ว่า Workshop นี้จะบอกว่าไม่ต้องเขียนโค้ดก็ตาม แต่ผู้เขียนก็ยังเชื่อว่า ถ้าคุณจำคำสั่งง่าย ๆ เพิ่มแค่ไม่กี่ตัว มันจะช่วยทำให้การทำงาน มีประสิทธิภาพ และลดค่าใช้จ่ายได้เยอะมาก ๆ ทีเดียว ดังนั้นใน Workshop จะเสนอทางเลือกทั้งการเขียนโค้ดเล็ก ๆ น้อย กับการไม่เขียนโค้ดเลยประกอบ
ภาพรวม / Project Overview
การสร้าง Website มีได้หลายวิธี และแต่ละวิธีก็มีข้อดี ข้อเสียแตกต่างกันออกไป อ่านบทความ พัฒนาโปรแกรมยังไงให้คุ้มค่า เขียนโปรแกรม VS Low-Code VS โปรแกรมสำเร็จรูป เพิ่มเติมเพื่อให้เลือกวิธีการได้เหมาะสม
และในกรณีนี้โปรแกรมอย่าง Bolt.new เป็นเครื่องมือแบบใหม่ ที่สร้างสั่งการเป็นภาษาพูด (Prompt) เพื่อสร้างเว็บไซต์ที่เราต้องการ และสามารถดูผลลัพธ์ได้ทันที ในส่วนนี้จะแนะนำภาพรวมของ Project ก่อนตัดสินใจลงมือทำ

โครงสร้างภาพรวมของ Project คือ
- การพัฒนา (Development) จะใช้ Bolt.new ในการพัฒนา Frontend หรือส่วนการแสดงผลทั้งหมด
- ใช้ Netlify ในการช่วย Deployment และทำตัวเหมือน Backend ในการเก็บข้อมูล Contact form
ประโยชน์ทางธุรกิจ / Business Overview
ใน Workshop เป็นการทดลองใช้งาน Bolt.new เพื่อสร้างเว็บไซต์หน้าเดียวที่ขายบริการให้คำปรึกษาเกี่ยวกับ Marketing Technology มี Contact form สำหรับให้ผู้เข้าชมส่งข้อมูลให้ทีมงานติดต่อกลับ
โดยส่วน Contact form จะใช้ฟีเจอร์ Netlify form ในการเก็บข้อมูล แทนการเก็บข้อมูลใน Database
รายละเอียด Contact form
หากเพิ่มข้อมูลที่จำเป็นไม่ครบจะส่งข้อมูลไม่ได้
- ชื่อ: ข้อมูลที่จำเป็น
- นามสกุล: ข้อมูลที่จำเป็น
- อีเมล: ข้อมูลที่จำเป็น และต้องเป็น E-mail format
- เบอร์โทรศัพท์: ข้อมูลที่ไม่จำเป็น
- ข้อความ: ข้อมูลที่จำเป็น
รายละเอียดอื่น ๆ
ค่าใช้จ่ายที่อาจจะเกิดขึ้น / Cost Breakdown
สำหรับการทำ Project นี้เพื่อใช้งานจริง สามารถแบ่งค่าใช้จ่ายที่เกิดขึ้นได้ดังนี้
Bolt.new
Bolt.new ใช้เพื่อ Prompt เพื่อสร้างเว็บไซต์คิดเป็นค่าใช้จ่ายเป็น token ในการใช้งาน AI ของ Platform โดยมีรายละเอียดดังนี้
- Free plan จะใช้ได้เพียง 150,000 token ต่อวัน และ 1 million token ต่อเดือน (เมื่อเต็ม Quota จะใช้งานต่อไม่ได้)
- Pro plan คิดราคาเริ่มต้นที่ $20 (ประมาณ 700 บาท) ต่อ 10 million Token ต่อเดือน
รายละเอียดเกี่ยวกับราคาของ Bolt.new
Netlify platform
Netlify เป็น Platform สำหรับการ Host website ของเรา โดยคิดค่าบริการแบบ Pay per usage (ยิ่งคนเข้าใช้งานเว็บไซต์เยอะ ยิ่งจ่ายแพง) โดยใน Workshop นี้ใช้ 2 ฟีเจอร์ใน Netlify ดังนี้
- Netlify form ระบบจัดการแบบฟอร์มใช้งานได้ฟรี 100 records ต่อเดือน (สามารถ export ข้อมูลเป็นไฟล์ CSV ได้) และคิด $19 (ประมาณ 700 บาท) ต่อเดือนเมื่อใช้งานเกิน Quota
- Netlify hosting การเช่า hosting ของ Netlify ใช้งานได้ฟรี ประมาณ 100GB (Bandwidth) ต่อเดือน และ $55 (ประมาณ 1,800 บาท) ต่อเดือนเมื่อใช้งานเกิน Quota
รายละเอียดเกี่ยวกับราคาของ Netlify
Domain name (ส่วนเสริม)
Domain name คือส่วนเสริมที่เราสามารถเปลี่ยน URL ของ Website จาก project_name.netlify.app เป็น URL ที่เราต้องการได้
ค่า Domain name จะคิดค่าใช้จ่ายตามชื่อของมัน มีค่าใช้จ่ายประมาณ 400 – 1000 บาท ต่อปี โดยมีหลายเว็บไซต์ที่ให้บริการเช่า Domain name เช่น namecheap.com, godaddy.com
แนวคิดการพัฒนา / Task Breakdown
ขั้นตอนในการลงมือทำไล่เป็นขั้นตอนจากง่ายไปยาก โดยหากทำตามขั้นตอนเหล่านี้จะสามารถเห็นภาพรวมของการพัฒนาได้ดียิ่งขึ้น
- ออกแบบและสร้าง Prompt สำหรับสั่งการ Bolt.new
หัวใจสำคัญของการใช้ AI เขียนโค้ดสร้างเว็บไซต์คือ การมี Brief การทำงานที่ละเอียด ซึ่งครอบคลุมตั้งแต่ข้อกำหนดทางเทคนิค และฟีเจอร์การใช้งาน - ใช้งาน Bolt.new เพื่อปรับแต่งเว็บไซต์เพิ่มเติมต่อจาก Prompt อันแรก
โดยทำได้หลายวิธีเช่น- แก้ไขข้อความ, เพิ่มรูปภาพใหม่ผ่านการแก้ไขใน Code editor
- การ Preview การแก้ไขใน Website และตรวจสอบการแสดงผลในหน้าจอแต่ละแบบ
- การ Prompt เพิ่มเติมเพื่อแก้ไข และการใช้ Inspector mode
- เชื่อมต่อ Bolt.new กับ Netlify
- เชื่อมต่อและทดสอบ Contact form ผ่าน Netlify form
- เชื่อม Domain name เข้ากับ Netlify (ส่วนเสริม)
สิ่งที่ต้องเตรียม / Project Prerequisites
- Bolt.new account สมัครเข้าใช้งานที่นี่ https://bolt.new/
- Domain name (ส่วนเสริม)
- ไฟล์รูปภาพที่ใช้ใน Project
ขั้นตอนการลงมือทำ / How to
1. เตรียม Prompt สำหรับใช้งานกับ Bolt.new

Prompt ที่ใช้ทำงานกับ Bolt.new ควรมีองค์ประกอบดังนี้ (ควรกรอกข้อมูลให้ครบแล้วค่อยไปแก้ไขใน Bolt.new ภายหลัง)

- Technical Requirements
ส่วนรายละเอียดทางเทคนิคที่สำคัญ- Technology stack ที่ใช้งาน
- Framework: Astro.js
เหตุผลที่เลือกเพราะเรียบง่าย สามารถแก้ไขไฟล์ HTML ได้เองเลย - Programming language: Typescript
เหตุผลที่เลือกเพราะสามารถส่งต่องานให้ Software Engineer ต่อได้ง่าย - Styling Framework: Tailwind CSS
เหตุผลที่เลือกเพราะเป็นที่นิยม สามารถเขียน Style ลงในไฟล์ HTML ตรง ๆ ได้ - Deployment Platform: Netlify
- Package Manager: NPM
- Framework: Astro.js
- การปรับแต่งทาง SEO
- Netlify form
- การใส่ placeholder content
- Coding rules เพื่อ AI ทำงานตามรูปแบบของเรา
ยิ่ง AI เขียนแบ่งเป็นหลายไฟล์จะทำให้เสีย Token น้อยลงในการแก้ไขแต่ละครั้ง
- Technology stack ที่ใช้งาน
- Design requirements
ส่วนเสริม ใส่หรือไม่ใส่ก็ได้ (แนะนำให้ไปปรับแต่งใน Code editor แทน เพราะ Brief เรื่อง Design ทำได้ยาก หากไม่มีการใช้ Mockup file ประกอบ)- Typeface ที่ใช้
- Mood and Tone ที่ต้องการ
- Business requirements
ส่วนข้อมูลเกี่ยวกับตัวบริษัท (แนะนำให้ใส่ส่วนนี้ให้ละเอียดที่สุด เพื่อป้องกันการ Hallucination ของ AI)- Company name
- Tag line
- Address
- Customer representative
- Telephone
- Contact form
- First name (required)
- Last name (required)
- E-mail (required)
- Telephone (no required)
- Message (required)
- SEO meta tag
ส่วนข้อความที่จะแสดงผลกับ Search Engine- Meta title
- Meta description
- Content
ส่วนข้อความทั้งหมดบนหน้าเว็บไซต์
(ข้อความทั้งหมดจะส่งผลต่อการสร้าง Layout ของ Website)
Prompt ฉบับเต็ม
Prompt นี้เป็น Prompt ตัวอย่างสามารถปรับแต่งให้เข้ากับโจทย์ของตัวเอง หรือให้ Generative AI ช่วยปรับ Prompt ให้เราก็ได้
Create a single-page website with contact form for a MarTech consultant service.
# Technical Requirements
## Technology Stack
- **Frontend Framework**: Astro
- **Programming Language**: TypeScript
- **Styling Framework**: Tailwind CSS
- **Deployment Platform**: Netlify
- **Package Manager**: NPM
## Form Implementation Requirements
Manage forms and submissions without any server-side code.
Add an HTML form to your site with a netlify attribute in the <form> tag, enable form detection, and you’ll automatically receive form submissions in your Netlify dashboard. Netlify parses HTML forms directly at deploy time, so there’s no need to make an API call.
example code
```html
<form name="contact" netlify>
<p>
<label>Name <input type="text" name="name" /></label>
</p>
<p>
<label>Email <input type="email" name="email" /></label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
```
## SEO Optimization Requirements
- Implement proper heading hierarchy (h1 → h2 → h3)
- Ensure single h1 per page
- Use semantic HTML5 elements
- Ensure all images have descriptive alt text
- Implement responsive design for all devices
## Special Instruction
- Fill image assets with Unsplash stock images you know exist.
- Use svgs for icon or logos if component requires them.
- Use modules instead of just a single file.
- Remove the starter file e.g. Welcome.astro
- All color palette need to register inside tailwind config to easy to adjust later with readable name e.g. hero-background
- Maintain all existing content during the second iteration as I will incorporate it into my project.
- Provide clear instructions for replacing content, font, themes, or images in this project.
- This project is intended to be a single-page website only. Do not add any additional pages or dead links to this project.
# Design requirements
- Typeface (Google font):
Primary font: IBM Plex Sans Thai for heading
Secondary font: Sarabun for body
- Style: Modern, Minimal
# Business requirements
Company name: Helix Consulting
Tag line: Marketing technology expert in your area.
Address: 123 Automation Avenue Luxury Heights, CA 90210
Email: info@helix-consulting.com
Telephone: +66 0879060345
# SEO content
Meta title: Helix Consultant | Marketing technology expert in your area
Meta description: Expert marketing technology consulting from Helix to elevate your digital strategy. Increase ROI with local, personalized MarTech solutions tailored to your business needs.
# Content
## Header
Fixed header with logo image and contact button
Smooth scroll to sections
## Hero section
(Full-width background image (use Unsplash: "modern-office-workspace"))
**Transform Your Digital Presence**
At Helix Consulting, we blend innovative marketing technology with strategic expertise to help your business thrive in the digital landscape. As your local MarTech partner, we deliver customized solutions that drive measurable results and sustainable growth.
Contact us
## Why us section
**Why Choose Helix Consulting?**
**Local Expertise, Global Standards**
Based in Luxury Heights, we understand the unique challenges and opportunities of the local market while implementing solutions that meet international best practices.
**Data-Driven Approach**
We transform raw data into actionable insights, helping you make informed decisions that maximize your marketing ROI and business performance.
**Tailored Solutions**
No two businesses are alike. We create customized MarTech strategies aligned with your specific goals, industry, and target audience.
**Seamless Integration**
Our experts ensure that your marketing technology stack works harmoniously with your existing systems, creating a unified ecosystem that enhances efficiency.
**Long-Term Partnership**
We're committed to your ongoing success, providing continuous support, optimization, and strategic guidance as your business evolves.
## Service section
**Our Services**
**MarTech Consultation**
Our strategic consultants assess your current marketing technology ecosystem, identify gaps and opportunities, and develop a comprehensive roadmap tailored to your business objectives.
**MarTech Implementation**
We transform strategy into reality by expertly implementing the right marketing technology solutions for your business needs.
- CRM system integration
- Marketing automation setup
- Analytics platform configuration
- Customer journey mapping tools
## Contact form
**Let's Work Together**
Ready to transform your digital strategy? Get in touch with us today.
- First name (required field)
- Last name (required field)
- E-mail (required field)
- Telephone (no required field)
- Message (required field)
## Footer
© Helix Consulting. All Rights Reserved.
2. Prompt เพื่อสร้าง Website ด้วย Bolt.new
เริ่มใช้งาน Bolt.new เพื่อ Prompt สร้าง Website ได้เลย !



เบื้องหลัง Bolt ทำอะไรให้เราบ้าง ?
- สร้าง Files และ Folders ต่าง ๆ ให้เรา
- ลงส่วนเสริมต่าง ๆ ที่จำเป็นตาม Technical requirements ด้วยคำสั่ง
npm install
ตามpackage.json
- เปิด Server ให้เรา ด้วยคำสั่ง
npm run dev
กรณีที่เกิด Error preview ไม่สำเร็จเราสามารถใช้คำสั่ง Please, try to attempt fix “ERROR_MESSAGE”
3. การแก้ไขข้อความผ่านการใช้ Code editor ใน Bolt.new
ในส่วนนี้เราจะแก้ไขข้อความจาก “Transform Your Digital Presence” เป็น “Navigate Your Digital Presence”

- Search หา Keyword ที่ต้องการแก้ไขด้วยกดการปุ่ม Search หาคำว่า “Transform Your Digital Presence”
- แก้ไขข้อความเป็น “Navigate Your Digital Presence”
- กด Save และดูผลลัพธ์ตรง Tab Preview
- กรณีที่ผลลัพธ์ไม่ถูกต้อง สามารถกด undo ด้วย Ctrl + Z หรือ Command + Z
4. การแก้ไขรูปภาพผ่านการใช้ Code editor และ Inspector mode ใน Bolt.new
ในส่วนนี้เราจะลองเปลี่ยนภาพบน Website กัน ซึ่งการเปลี่ยนภาพบน Website ทำได้ทั้งการ Upload รูปภาพเข้าไปเอง หรือใส่ URL ของรูปภาพนั้น ๆ
กรณีที่ต้องการ Upload รูปภาพเข้าไปเอง: โยนไฟล์รูปภาพไปที่ Folder public และ คลิกขวาเพื่อ copy relative path ไว้
ตัวอย่างไฟล์ภาพ blue-gradient.jpg จะได้ relative path เป็น public/blue-gradient.jpg
กรณีที่ต้องการใช้รูปภาพที่มีอยู่แล้วบน Internet: ให้ไป copy URL ของภาพนั้น ๆ
ตัวอย่างไฟล์ URL ภาพ

ใช้ Inspector mode เพื่อเลือกส่วนที่ต้องการปรับ และ Prompt ให้ Bolt.new เปลี่ยนรูปภาพให้ตาม URL หรือตาม Relative path ดังนี้
I want to create/change image source to “relative_path_or_url” Please maintain my original text without any edits.
ตัวอย่าง I want to create/change image source to “public/blue-gradient.jpg”. Please maintain my original text without any edits.
กด Save และดูผลลัพธ์ตรง Tab Preview
สิ่งที่ Bolt.new ทำคือการเปลี่ยนค่าใน src ของ img element ในจุดที่เราต้อง ซึ่งหากเราสามารถทำเองได้ เราจะไม่ต้อง prompt ให้เสีย token รายละเอียดเกี่ยวกับ Image element
ใน Part นี้จะเลือกเปลี่ยนภาพพื้นหลังตรง Hero หรือเปลี่ยนภาพเป็น Logo ใน Header ก็ได้
5. การแก้ไข Theme ของ Website ผ่านการใช้ Code editor ใน Bolt.new

ในส่วนการแก้ไข Theme สี ต่าง พวกค่าโค้ดสีจะถูกเก็บอยู่ tailwind.config file
ให้หาไฟล์นี้ และลองแก้ไขสีไปเรื่อยจนเห็นความแตกต่าง (สังเกตว่า AI จะตั้งชื่อ สี ให้เราตามหาได้ง่ายแล้วเช่น primary, secondary เป็นต้น)
6. Prompt เพิ่มเติมเพื่อแก้ไข Website ส่วนที่มีความซับซ้อน
ในส่วนนี้จะเป็นการแก้ไข Website ที่มีความซับซ้อนขึ้น เราเลยจะให้ Bolt.new เขียนโค้ดให้แทนเป็นหลัก
การใช้ Inspector ควบคู่กับการ Prompt

เราจะกด Icon รูปเมาส์ด้านขวา และชี้ไปใน Section ที่เราสนใจจะเปลี่ยนแปลงการแสดงผล และ Prompt เพิ่มเติม
- ตัวอย่าง Prompt: I want this section to be grid layout with icons. Please maintain my original text without any edits.
- ตัวอย่าง Prompt: I want this section to be two-column layout, Icon-based cards, bulleted lists for features, clean, professional design. Please maintain my original text without any edits.
การใช้ Prompt enhancement
Prompt enhancement feature เหมาะสำหรับคนเข้าใจเรื่องการเขียนโปรแกรม เพราะระบบจะปรับ Prompt เราให้ละเอียดมาก ไม่เหมาะกับมือใหม่
การใช้ Discuss mode
ใช้เพื่อสอบถามเกี่ยวกับโค้ด โดยที่ยังไม่ได้แก้ไข (ข้อแนะนำคือ ถ้าถามอะไรกว้าง ๆ ไปใช้ ChatGPT แทนก็ได้ จะได้ไม่เปลือง Token)
7. เชื่อมต่อ Bolt.new กับ Netlify



เบื้องหลัง Bolt ทำอะไรให้เราบ้าง ?
- สร้าง Project เพื่อเตรียม Deploy ด้วยคำสั่ง
npx astro build
- Deploy ไปที่ Netlify
8. ทดสอบการใช้งาน Netlify form


เข้าไปที่ Menu form เพื่อตรวจสอบการทำงานของ form โดยเมื่อเราลองส่งข้อมูลใน Website เข้ามา ข้อมูลจะแสดงผลในนี้ (ตรงส่วนของ Active forms)
Netlify form รองรับการทำ Spam prevention เพิ่มเติมสามารถสั่งการให้ Bolt.new เพิ่มฟีเจอร์ส่วนนี้ได้เลย รายละเอียด
รายละเอียดเกี่ยวกับ Netlify form
9. การตั้งค่า Custom domain name ใน Netlify (ส่วนเสริม)
การตั้งค่า Custom domain name สามารถทำได้ 2 วิธีดังนี้


ไฟล์สำเร็จรูป และแหล่งอ้างอิงอื่น ๆ
เรียนรู้เกี่ยวกับเทคโนโลยีที่ใช้ในโปรเจคนี้เพิ่มเติม
เรียนรู้เกี่ยวกับเรื่อง SEO
แนวทางการใช้เครื่องมือกลุ่ม Agentic AI ในการเขียนโค้ด (Vibe Coding)
เรียนรู้เกี่ยวกับเรื่อง Web Security
- Vibe Coding with AI: The Security Risks We’re Ignoring
- Secure Vibe Coding Guide
- A Vibe Coding Security Playbook: Keeping AI-Generated Code Safe
- Vibe Coding Security Top 10
- เครื่องมือ Vibesecurity
- OWASP Top Ten (Security risk ที่ Software engineer ใช้อ้างอิงอัปเดตทุกปี ต้องมีความรู้เรื่อง Technical ถึงจะอ่านเข้าใจ)
เรียนรู้การใช้งาน Bolt.new เพิ่มเติม
- Prompting Effectively: How to talk to Bolt
- Maximizing Token Efficiency: How to use less tokens
- Learning Center
แนวทางการต่อยอดเพิ่มเติม และข้อจำกัดใน Project
ในการใช้เครื่องมือกลุ่มนี้ยังเป็นสิ่งใหม่ที่แต่ละเครื่องมืออาจจะทำงานได้ไม่สมบูรณ์แบบ ในส่วนนี้จะอธิบายถึงข้อจำกัด และแนวทางในการต่อยอดเพิ่มเติม
ข้อจำกัดของ Platform ที่ต้องทำด้วยตัวเอง
เพื่อให้การสร้างและดูแล Website มีประสิทธิภาพมากขึ้น ควรทำสิ่งเหล่านี้เพิ่มเติมซึ่งใน Bolt.new อาจจะยังไม่รองรับในตอนนี้
Version control ในการเขียนโปรแกรม การทำ Versioning มีประโยชน์ในการ ย้อนกลับการแก้ไข เวลา Website มีปัญหา หรือเก็บข้อมูลการแก้ไขไว้ ซึ่งจะใช้ Git ในการทำ Versioning และเก็บโค้ดบน GitHub
ความเสี่ยงเกี่ยวกับ Project นี้
การเข้าใจภัยคุกคามที่อาจจะเกิดขึ้นได้เป็นหัวใจสำคัญที่ทำให้ Website ของเราปลอดภัย ในส่วนนี้จะยกตัวอย่างพร้อมทั้งรายละเอียดให้ไปศึกษาเพิ่มเติม
การถูก Spam เข้ามาใน Contact form จนเกิน Quota หรือรบกวนการทำงาน
ในโลกอินเตอร์เน็ต ไม่ได้มีแค่ผู้ใช้งานใช้งาน Website อย่างเดียว แต่อาจจะมี Bot ที่เข้ามาใช้งานซึ่งอาจจะมีความสามารถพิเศษบางอย่างเช่น ส่งข้อมูล, ข้อความ หรือโค้ดแปลก ๆ เข้ามาใน Contact form จำนวนมากในเวลาอันสั้น
Prompt ที่อาจจะช่วยปรับปรุงโค้ดให้ปลอดภัยมากขึ้น
Create a secure contact form implementation that includes comprehensive spam prevention and input validation measures in client side such as a honeypot field.
การใช้งาน Dependency / Package ที่เก่าและมีช่องโหว่
การสร้าง Website ส่วนใหญ่ แม้จะเป็นการเขียนโค้ด แต่ก็ไม่มีใครเขียนทุกอย่างเองจาก 0 อาจจะมีบ้างทีไปยืมโค้ดของคนอื่นมาใช้
เหมือนที่โรงงานผลิตรถยนต์ ก็ไม่ได้ผลิตยางรถยนต์เอง แต่สั่งซื้อจาก Supplier อีกที ซึ่งใน Digital product อาจจะเรียกว่า Dependency, Supply chain, Package
ซึ่งปัญหาอาจจะเกิดขึ้นได้หากเราใช้โค้ดของคนอื่น / Supplier ที่เก่าแล้วและมีช่องโหว่ แต่เราไม่ได้อัปเดตให้ใหม่อยู่เสมอ
Prompt ที่อาจจะช่วยปรับปรุงโค้ดให้ปลอดภัยมากขึ้น
Analyze my project dependencies for security vulnerabilities, and suggest safer alternatives for any packages that are outdated or have known security issues.
เทคนิคขั้นสูงอื่น ๆ
- การตั้งค่า Cross-Origin Resource Sharing (CORS) Policy
- การทำ Hot link protection
- การตั้งค่า Content Security Policy (CSP) เพื่อควบคุมการโหลดข้อมูลบนเว็บไซต์ของเรา
- การทำ Cache เพื่อลดการโหลด Website บน Netlify
- การทำ reCAPTCHA
คำถามที่พบบ่อยเกี่ยวกับ Project นี้
ยังไม่มี