[Workshop] ใช้ AI สร้าง Personal Blog จาก Free Template แบบไม่ต้องเขียนโค้ดด้วย Bolt.new

บทความนี้เป็นบทความประกอบ Video ใช้ AI สร้าง Personal Blog แบบไม่ต้องเขียนโค้ดด้วย 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

ใน Project นี้เราจะใช้เครื่องมืออย่าง Bolt.new ซึ่งเป็น AI ที่จะช่วยเราทำ Website แบบไม่ต้องเขียนโค้ด เพียงแค่พิมบอก ตัวอย่างเว็บไซต์ที่ต้องการ ระบบก็จะสร้าง และ Deploy ให้เราใช้งานได้ที โดยโครงสร้างภาพรวมของ Project คือ

• การพัฒนา (Development) จะใช้ Bolt.new ในการพัฒนา Frontend หรือส่วนการแสดงผลทั้งหมด
• ใช้ Netlify ในการช่วย Deployment

ประโยชน์ทางธุรกิจ / Business Overview

การใช้ Bolt.new ในการสร้างเว็บไซต์ Personal Blog ที่เน้นเอาไว้ใช้เผยแพร่บทความของตัวเอง สามารถไปประยุกต์ใช้ทำ เว็บไซต์ Personal Branding สำหรับแสดงผลงาน, ประวัติการทำงาน และมีช่องทางให้ติดต่อกลับ ซึ่งสามารถต่อยอดโดยเพิ่มหน้าอื่น ๆ เข้าไป เช่นหน้าทำนัดหมาย หรือลิ้งค์กับระบบขายของ

รายละเอียดเกี่ยวกับเทคโนโลยีที่ใช้ / Technology Stack

แนะนำเทคโนโลยีที่ใช้เพื่อประโยชน์ในการศึกษาต่อ

Astro.js framework (.astro)

Astro เป็น Javascript framework สำหรับสร้างและพัฒนาเว็บไซต์ส่วนการแสดงผล (Frontend) ที่มีจุดเด่นที่เหมาะกับการทำ Web Blog เพราะโหลดหน้าได้เร็ว และถูกออกแบบมาให้รองรับการทำ SEO ตั้งแต่แรก รวมทั้งมีโครงสร้างไฟล์ไม่ซับซ้อน

อ่านรายละเอียดเกี่ยวกับ Astro

Tailwind CSS framework

Tailwind เป็น CSS framework สำหรับการปรับแต่งการแสดงผลบนหน้าเว็บไซต์ ที่มีจุดเด่นที่เราสามารถเขียน Styling แบบสั้น ๆ ได้ตรงส่วนที่เราต้องการได้เลย

อ่านรายละเอียดเกี่ยวกับ Tailwind

Markdown Language (.md)

Markdown คือภาษานึงในการจัดการเนื้อหาที่มี Syntax ง่าย ๆ และจำได้ง่ายกว่าการเขียน HTML ซึ่งใช้กันเยอะในการทำ CMS (Content Management System)

# H1

## H2

### H3

#### H4

##### H5

###### H6

## Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

## Images
![blog placeholder](/blog-placeholder-about.jpg)

อ่านรายละเอียดเกี่ยวกับ Markdown

ลองฝึกใช้ Markdown ผ่าน https://markdownlivepreview.com/

ค่าใช้จ่ายที่อาจจะเกิดขึ้น / 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

หรือสามารถใช้งาน Bolt.diy ซึ่งเป็นโปรแกรม bolt.new เวอร์ชั่นฟรี สามารถติดตั้งลงเครื่องคอมพิวเตอร์ได้เลยฟรี แต่ต้องใช้ ChatGPT, Claude API key ของตัวเอง อ่านรายละเอียดเกี่ยวกับ Bolt.diy

Netlify platform

Netlify เป็น Platform สำหรับการ Host website ของเรา โดยคิดค่าบริการแบบ Pay per usage (ยิ่งคนเข้าใช้งานเว็บไซต์เยอะ ยิ่งจ่ายแพง) โดยใน Workshop นี้ใช้ฟีเจอร์ใน Netlify ดังนี้

• 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 – 1,000 บาท ต่อปี โดยมีหลายเว็บไซต์ที่ให้บริการเช่า Domain name เช่น namecheap.com, godaddy.com

แนวคิดการพัฒนา / Task Breakdown

ขั้นตอนในการลงมือทำไล่เป็นขั้นตอนจากง่ายไปยาก หากทำตามขั้นตอนเหล่านี้จะสามารถเห็นภาพรวมของการพัฒนาได้ดียิ่งขึ้น

1. Development Stage (ขั้นตอนการพัฒนา)
   1. ใช้ Astro Blog Starter template จาก Bolt.new เพื่อเริ่ม Project เริ่มพัฒนาเว็บไซต์โดยใช้ template เดิมที่มีอยู่แล้ว โดยเน้นปรับแต่งให้เข้ากับโจทย์ที่เราต้องการ
      1. การ Import template จากใน Bolt.new
      2. การอ่าน README.md เพื่อทำความเข้าใจ Project
   2. ใช้งาน Bolt.new เพื่อปรับแต่งเว็บไซต์เพิ่มเติมต่อจาก Prompt อันแรก โดยทำได้หลายวิธีเช่น
      1. แก้ไขข้อความ, เพิ่มรูปภาพใหม่ผ่านการแก้ไขใน Code editor
      2. การ Preview การแก้ไขใน Website และตรวจสอบการแสดงผลในหน้าจอแต่ละแบบ
      3. การ Prompt เพิ่มเติมเพื่อแก้ไข และการใช้ Inspector mode
      4. การใช้เทคนิค Screenshot to Code
2. Testing / Audit Stage (การตรวจสอบก่อนใช้งาน)
   1. การตรวจสอบเว็บไซต์ก่อน Deployment
      1. การตรวจสอบการแสดงผลในหลาย ๆ ขนาดหน้าจอ ด้วย Responsive viewer (Chrome extension)
      2. การตรวจสอบการตั้งค่าเกี่ยวกับ SEO ด้วย Meta inspector (Chrome extension)
3. Deployment Stage (ขั้นตอนการใช้งานจริง)
   1. เชื่อมต่อ Bolt.new กับ Netlify เพื่อทำการ Deploy
   2. เชื่อม Domain name เข้ากับ Netlify (ส่วนเสริม)

สิ่งที่ต้องเตรียม / Project Prerequisites

• Bolt.new account สมัครเข้าใช้งานที่นี่ https://bolt.new/
• Domain name (ส่วนเสริม)

ขั้นตอนการลงมือทำ / How to

ใช้ Astro Blog Starter template จาก Bolt.new เพื่อเริ่ม Project

Bolt.new สามารถใช้ Template จาก GitHub public repository ซึ่งเป็นแหล่งเก็บรวบรวม Template เว็บหลาย ๆ แบบที่ใช้งานแบบฟรีได้ โดยสามารถเลือก Template มาใช้ได้ 2 วิธี

เลือกจาก Template ใน Bolt.new

โดยสามารถกดเลือก Template จาก Bolt.new ได้เอง

เลือก Astro blog template จาก Public repository ใน GitHub

ค้นหา Template Astro blog ที่สนใจใน GitHub เช่น Astro Blog Template ของ Charca

โดยปกติแล้ว Public repository ใน Github จะสามารถนำมาใช้งานได้ฟรี แต่ถ้าต้องการจะดาวน์โหลดมาปรับแต่งและขายต่อ อาจจะได้ License ในการใช้งาน (ส่วนใหญ่ Template จะเป็น MIT License – OpenSource)

Template ตัวนี้มี URL เป็น https://github.com/Charca/astro-blog-template

(Charca คือ username และ astro-blog-template คือ project / repository)

โดยเราสามารถ Import project เข้ามาใน Bolt.new เพื่อปรับแต่งต่อได้โดยใช้ Format ตามนี้

https://bolt.new/~/github.com/<username>/<repository>

ตัวอย่างกรณีที่จะใช้ astro-blog-template คือ https://bolt.new/~/github.com/Charca/astro-blog-template

แหล่งรวม Astro theme สำหรับ Setup project ด้วยตัวเองอื่น ๆ (ทั้งฟรี และเสียเงิน)

• https://astro.build/themes/
• https://htmlrev.com/free-astro-templates.html
• https://www.astrothemes.dev/
• https://getastrothemes.com/free-astro-themes-templates/

แนะนำ User Interface ของ Bolt.new

User Interface ของ Bolt.new

แนะนำ User Interface ของ Bolt.new โดยสามารถแบ่งเป็นส่วนต่าง ๆ ได้ดังนี้

ส่วนที่ 1 : Toolbar ของ Project สำหรับการ Export, Deploy หรือเชื่อมต่อกับโปรแกรมอื่น ๆ

ส่วนที่ 2 : Chat box พื้นที่สำหรับพิมคำสั่งให้ Generative AI ทำงาน และเมื่อมันทำงาน มันจะตอบกลับเราตรงนี้ โดยนอกจากพิมถามตอบ (สามารถ Discuss ก่อนได้) แล้ว เรายังสามารถแนบไฟล์ได้อีกด้วย

ส่วนที่ 3 : Code Editor พื้นที่ทำงานจริง ที่เราจะสามารถดูผลลัพธ์การทำงานของ Bolt.new ได้ ซึ่งมีเครื่องมือหลายอย่าง

ส่วนที่ 4 : Settings พื้นที่สำหรับจัดการ Account และ Project

Code Editor ของ Bolt.new

โดยหลักการแล้ว Code Editor คือพื้นที่ในการจัดการไฟล์ต่าง ๆ ของเรา โดย

ส่วนที่ 1 : เป็น Tab สำหรับสลับส่วน Code Editor (แก้ไข File, Folder) และ Preview (เว็บไซต์)

ส่วนที่ 2 : รายชื่อ File และ Folder ทั้งหมดใน Project โดยสามารถ Search หาข้อความได้

ส่วนที่ 3 : แสดงผลข้อมูลในแต่ละ File ที่เราเลือก โดยเมื่อแก้ไขข้อความแล้วต้องกด Save ทุกครั้ง

ส่วนที่ 4 : Terminal หรือพื้นที่สำหรับรัน Project และดูสถานะของ Project (โดยปกติ Bolt จะจัดการรัน Project ให้ โดยที่เราแทบไม่ต้องจำคำสั่งเองเลย แต่ถ้าอยากรันส่วนย่อย ๆ ของ Project สามารถมาทำในนี้ได้เหมือนกัน)

ทำความเข้าใจ Project Structure ผ่าน README.md

ก่อนจะลงมือแก้ไข Template เราขอแนะนำให้หาไฟล์ที่ชื่อ README.md เพื่อทำความเข้าใจเกี่ยวกับโครงสร้างของ Project ก่อน

โดย README.md จะอธิบายเกี่ยวกับ

• Project structure โครงสร้างของ Project ว่าถ้าจะแก้หน้า A ต้องไปดูที่ Folder ไหน หรือ File ไหน
• คำสั่งที่สามารถใช้ได้ใน Terminal
• แหล่งเรียนรู้เพิ่มเติม

ใช้ Code editor เพื่อแก้ไข Content ในเว็บไซต์

วิธีที่ง่ายที่สุดในการแก้ไข Content ในเว็บไซต์คือการเสริชหาว่า Content นั้นอยู่ที่ไหน และเข้าไปแก้ไขตรงนั้น โดยตรง และดู Preview เว็บไซต์ประกอบ โดยหากอ้างอิงตาม Project structure

• Content ในแต่ละหน้า จะอยู่ที่ src/pages ซึ่งเขียนเป็นภาษา HTML
• Content ของ Blog จะอยู่ที่ src/content/blog ซึ่งเขียนเป็นภาษา Markdown

อ่านรายละเอียดเกี่ยวกับ HTML

อ่านรายละเอียดเกี่ยวกับ Markdown

เมื่อเจอ Content ส่วนที่ต้องการแล้วสามารถแก้ไขข้อความเดิม กด Save และดูผลลัพธ์ตรง Tab Preview

กรณีที่ผลลัพธ์ไม่ถูกต้อง สามารถกด undo ด้วย Ctrl + Z หรือ Command + Z

Exercise: ลองแก้ First post เป็น #1 First post

Exercise: ลองแก้ Hello, Astronaut! เป็น Hello, <ชื่อตัวเอง>

กรณีที่เป็นลิ้งค์ เราจะหาข้อความของลิ้งค์ และแก้ไขค่าที่ href ซึ่งเป็น URL ของลิ้งค์ที่คลิก

Exercise: ลองแก้ลิ้งค์ Twitter URL เป็น Twitter ของตัวเอง

อ่านรายละเอียดเกี่ยวกับ Anchor element

ใช้ Code editor เพื่ออัปโหลดภาพในเว็บไซต์

หลักการคือ การหาไฟล์ภาพที่เราต้องการแก้ไขว่าอัปโหลดอยู่ที่ไหน ใน Soure code และอัปโหลดไฟล์ภาพใหม่ใน Folder เดียวกันจากนั้นก็แก้ชื่อ โดยใน Project นี้ไฟล์ภาพทั้งหมดจะเก็บอยู่ที่ /public (Folder public เช่น blog-placeholder-1.jpg)

ตัวอย่างไฟล์ สำหรับลองอัปโหลด bolt-blog.jpg

โดย blog-placeholder-1.jpg ถูกใช้ที่ /src/content/blog/markdown-style-guide.md ตรงส่วน heroImage

เราสามารถแก้ Path จาก ./blog-placeholder-1.jpg จากเดิมเป็นไฟล์ใหม่ที่เราเพิ่งอัปโหลดเข้าไปได้ เป็น ./bolt-blog.jpg

ลองเพิ่ม Blog ใหม่ใน Project

สำหรับการเพิ่ม Blog ใหม่ใน Project เราจะสร้างไฟล์ใหม่ใน /src/content/blog/ ให้ลองสร้างไฟล์ชื่อ new-post.md แล้ว Copy เนื้อหาจาก Blog อันอื่นมา แล้วลองแก้ไข Title หรือ Content ข้างในเพื่อสังเกตการเปลี่ยนแปลง

ลองฝึกใช้ Markdown ผ่าน https://markdownlivepreview.com/

การ Prompt เพื่อแก้ไขส่วนต่าง ๆ ในเว็บไซต์

หลังจากเราเรียนรู้ขั้นตอนการปรับแก้ไข ผ่านการลองเข้าไปดูในไฟล์ต่าง ๆ แล้ว ต่อไปเราจะลองใช้ Prompt เพื่อแก้ไขแต่ละส่วนกัน

เราจะกด Icon รูปเมาส์ด้านขวา (Inspector mode ช่วยให้ Bolt focus การเปลี่ยนแปลงที่ส่วน ๆ นั้นเป็นหลักโดยไม่ไปแก้ส่วนอื่น) และชี้ไปใน Section ที่เราสนใจจะเปลี่ยนแปลงการแสดงผล และ Prompt เพิ่มเติม โดยอาจจะกด Enhance prompt เพื่อให้เขียนให้ละเอียดขึ้น

Prompt:
I want to change this text to “Hello, Peter” but remain all styling just change content inside

Enhance Prompt:
Convert the given text to "🧑‍🚀 Hello, XYZ" while preserving all existing formatting, styling, and structural elements. Only modify the text content itself, keeping all HTML tags, CSS classes, styling attributes, and other markup exactly as they appear in the original.

ตัวอย่าง Prompt

• I want to change this text to “Hello, Peter” but remain all styling just change content inside
• I want to change this link to “https://google.com” but remain all styling just change link inside
• I want to change this image to bolt-blog.jpg with the following path: ./public/bolt-blog.jpg
• Create new blog post with url : new-blog-post

การใช้เทคนิค Screenshot To Code

เทคนิค Screenshot to Code คือการใช้ Generative AI แกะ Layout ของ Website จาก Screenshot แล้วเราเอามาใช้ต่ออีกทีใน Bolt.new โดยเทคนิคนี้มาจาก @imrat

หลักการคือแปะ Screenshot (พยายามทำเป็น Section) และใส่ Prompt นี้ลงไปใน Generative AI ตัวไหนก็ได้ แนะนำ Claude ระบบจะสร้าง Prompt สำหรับแก้ Design ใหม่ให้เราก็อปปี้เอาไปใช้ได้เลย

You are an expert web designer and developer tasked with analyzing a screenshot of a webpage and creating a detailed prompt for another AI to replicate the exact design. Your analysis must be thorough and precise to ensure accurate replication.

Here is the screenshot of the webpage you need to analyze:

<webpage_screenshot>
{{SCREENSHOT}}
</webpage_screenshot>

Analyze the screenshot in great detail, focusing on the following aspects:

1. Layout
2. Color scheme
3. Typography
4. Images and graphics
5. Navigation
6. Content sections
7. Responsive design elements

For each aspect:
a) Write down specific observations, including exact measurements, proportions, and color values where applicable.
b) Compare and contrast different elements within each aspect.
c) Consider how each aspect contributes to the overall user experience and design cohesion.

Wrap your comprehensive analysis in <detailed_analysis> tags. Be as specific as possible to ensure accurate replication. After your analysis, compile your findings into a comprehensive prompt that will allow another AI to recreate this exact design.

Your output should consist of only two sections:

<prompt>
[Your detailed prompt for replicating the webpage design]
</prompt>

<additional_notes>
[Any extra observations or notes that don't fit directly into the prompt but might be helpful for replication]
</additional_notes>

Begin your analysis now:

<detailed_analysis>
[Start your detailed analysis of the webpage screenshot here, covering all seven aspects listed above and following the steps outlined]
</detailed_analysis>

ตัวอย่าง ภาพ Screenshot สำหรับทดลองใน Project ขอบคุณ Template จาก Tinjo Thomas

จากนั้นเราจะเอา Prompt ที่ได้จากขั้นตอนก่อนหน้าไปใช้ร่วมกับ Inspector ที่เราสนใจ และใส่ Prompt นั้นลงไป ซึ่งผลลัพธ์ที่ได้อาจจะต้องปรับแต่ง Style ต่าง ๆ อีกที แต่ผลลัพธ์ค่อนข้างเหมือน

การตรวจสอบการแสดงผลด้วย Responsive mode

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

การตรวจสอบข้อมูลเกี่ยวกับ SEO

การตรวจสอบ Project ของเราก่อน Deployment เป็นสิ่งสำคัญ สำหรับ Project นี้ที่เป็น Web content เราจะเน้นตรวจสอบ Content เป็นหลัก โดย Content บางอย่างอาจจะไม่ได้แสดงผลบนเว็บไซต์แต่เป็นส่วนสำคัญในทางการตลาด เช่นจำเป็นต่อการทำ SEO ของ Google หรือ ช่วยแสดงผลตอนแชร์ลง Facebook

สำหรับขั้นตอนนี้เราจะใช้ Meta SEO inspector ซึ่งเป็น Chrome extension ช่วยตรวจสอบ Content ที่เกี่ยวกับ SEO ดาวน์โหลด Extension

ดู YouTube เกี่ยวกับเทคนิคการใช้ Meta SEO inspector เพิ่มเติม

เชื่อมต่อ Bolt.new กับ Netlify

กรณีต้องการติดตั้ง Custom domain ของตัวเองสามารถทำตาม YouTube ได้เลย

Setup a Custom Domain in Netlify in 5 Minutes

ไฟล์สำเร็จรูป และแหล่งอ้างอิงอื่น ๆ

ยังไม่มี

แนวทางการต่อยอดเพิ่มเติม และข้อจำกัดใน Project นี้

แนวทางการต่อยอดเพิ่มเติม

• เพิ่มส่วน Contact form เพื่อให้สามารถติดต่อกลับได้
• ทำ Version control ด้วย GitHub integration

ข้อจำกัดของ Project ในการใช้งานจริง

Project นี้เป็น Project ทดลองโดยการใช้งานจริงอาจจะต้องคำนึงถึงข้อจำกัดเหล่านี้

กระบวนการ Deployment จะเริ่มช้าลงเรื่อย ๆ เมื่อมี Content มากขึ้น (ระดับ 1,000 บทความขึ้นไป)

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

จากประสบการณ์การทำงาน การที่เว็บไซต์มี Content ถึง 1,000 บทความ อาจจะใช้เวลา Deployment (Build) ถึง 1 ชั่วโมง

ต้องเรียนรู้การใช้ Markdown และฟีเจอร์ในการจัดการ Content มีจำกัด

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

• ไม่มีระบบ Schedule post
• ไม่มีระบบ Draft
• ไม่สามารถทำงานร่วมกับคนอื่นพร้อมกันได้

คำถามที่พบบ่อยเกี่ยวกับ Project นี้

ยังไม่มี

บทความที่เกี่ยวข้อง

April 13, 2025June 3, 2025Vibe Coding 28

[Workshop] ใช้ AI สร้าง Sale page มี Contact form แบบไม่ต้องเขียน Code เองด้วย Bolt.new

เรียนรู้แนวทางการสร้าง Sale page มี Contact form แบบไม่ต้องเขียน Code เองด้วย Bolt.new พร้อมการอธิบายเกี่ยวกับความเสี่ยงในการใช้เครื่องมือกลุ่ม Vibe Coding

• Facebook
• Twitter
• Line

AI Bolt.new Low-Code No-Code Workshop

Worakarn Ounhattapradit

พีเตอร์ ผู้ตัดสินใจกระโดดข้ามสายงานจากนักออกแบบ มาสู่โลกแห่งเทคโนโลยี สนใจในเทคโนโลยีใหม่ ๆ ที่จะพัฒนาคุณภาพชีวิตคนให้ดีขึ้น อ่านรายละเอียดเพิ่มเติม