[Workshop] สำรองงานใน Bolt.new อย่างไร? ใช้ GitHub ง่ายๆ ไม่ต้องกลัวโค้ดหาย (สำหรับมือใหม่)

บทความนี้เป็นบทความประกอบ Video สำรองงานใน Bolt.new อย่างไร? ใช้ GitHub ง่ายๆ ไม่ต้องกลัวโค้ดหาย (สำหรับมือใหม่)

Bolt.new คือแพลตฟอร์ม AI ช่วยเขียนโค้ดสร้าง Website / WebApp ผ่านการเขียน Prompt โดยไม่ต้องติดตั้งโปรแกรมในเครื่อง เพียงแค่เราพิมคำสั่งอธิบายโปรเจคที่เราต้องการ เพียงเท่านี้ โปรแกรมก็จะเริ่มเขียนโค้ด และแก้ไขปัญหาเบื้องต้นให้เราเอง โดยไม่ต้องมีพื้นฐานการเขียนโปรแกรม

หากต้องการแก้ไขส่วนที่ AI เขียนโค้ดมาให้ก็เพียงแค่พิมคำสั่งให้ระบบแก้ไขตัวเองได้เลย Bolt.new ยังสามารถจัดการเรื่องการ Deployment ในตัวผ่าน Netlify และเชื่อมต่อกับ Database ด้วย Supabase

นอกจาก Bolt.new แล้วยังมีโปรแกรมอื่น ๆ ที่มีความสามารถคล้าย ๆ กัน เช่น v0.dev, lovable.dev, Replit AI

ภาพรวม / Project Overview

ใน Project นี้ เราจะสอนการเชื่อมต่อ Bolt.new เข้ากับ GitHub เพื่อใช้เก็บ Source Code ของ Project (บางทีจะเรียกว่า Repository เพราะ GitHub มี Feature Project ที่เอาไว้จัดการงานเลยเรียกว่า Repository เพื่อป้องกันความสับสน) ทำให้เก็บประวัติการแก้ไขทั้งหมดได้

ไม่งั้นหาก AI ไปแก้ไขไฟล์ Project เราจนพัง แล้วเราไม่สามารถ restore จาก bolt.new ได้ เราจะไม่สามารถคืนค่าการแก้ไขเดิมได้เลย อ่านแนวทางการ backup project ใน bolt.new แบบอื่น ๆ ได้ที่ Rollback backup

GitHub คืออะไร มีประโยชน์กับการ Vibe Coding ใน Bolt.new อย่างไร ?

GitHub คือแพลตฟอร์มที่เก็บ Source Code ออนไลน์ที่สามารถใช้งานได้ฟรีเปรียบเสมือน Google Drive สำหรับโปรแกรมเมอร์ไว้สำรองไฟล์ โดยเมื่อทุกคนทำงานเสร็จ ก็จะส่งงานของตัวเองขึ้นไปเก็บบน GitHub ได้

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

ในกรณีนี้คือเราสร้าง Project ด้วย Bolt.new แล้ว เราอยากเก็บ Project ไว้บน GitHub แทน เพื่อประโยชน์ในการสำรองข้อมูล หรือส่งต่อ Project ให้คนอื่นทำงานต่อได้ง่าย

ประโยชน์ของการเชื่อมต่อ GitHub กับ Bolt.new

การเชื่อมต่อ GitHub จะช่วยให้เราสามารถใช้งาน Bolt.new ได้อย่างเป็นระบบมากขึ้น เหมาะสำหรับ Project ที่เริ่มมีความซับซ้อนของ SourceCode หรือ Project ที่มีผู้ใช้งานจริง ๆ แล้วอยากจะค่อยต่อเติมบางส่วนเพิ่มเข้าไป

สำรองข้อมูลอย่างปลอดภัยมากกว่าเก็บไว้ใน Bolt.new อย่างเดียว

การเชื่อมต่อ GitHub ทำให้โค้ดของคุณถูกสำรองไว้พร้อมประวัติการแก้ไขทั้งหมด เปรียบเสมือนการมี “Time Machine” สำหรับโค้ด – ถ้าเกิดอะไรผิดพลาด เราสามารถย้อนกลับไปยังจุดที่ทำงานได้ (Bolt.new เก็บประวัติการแก้ไขไว้แค่บางส่วนเท่านั้น เราจึงควรใช้ GitHub ร่วมด้วย)

สามารถสร้าง Branch สำหรับจัดการ Project ในหลาย ๆ เวอร์ชั่นได้

Branch คือเวอร์ชันต่างๆ ของโปรเจค – เหมือนการทำสำเนาเพื่อทดลองแก้ไขโดยไม่กระทบต่อต้นฉบับ โดยทั่ว ๆ ไป เราจะมี Branch ดังนี้

• main branch (version หลัก ก่อนมีการเพิ่ม หรือแก้ไข เหมือนไฟล์ต้นฉบับ)
• feature / development branch (version ปรับปรุง)

สามารถเลือกใช้ Integration อื่น ๆ นอกเหนือจากที่ Bolt.new ให้มา

การมี Project ใน GitHub หมายความว่าคุณสามารถนำเว็บไซต์ไป Deploy กับ Service อื่นๆ ได้ ไม่จำเป็นต้องใช้เฉพาะ Netlify ที่ Bolt รองรับ เช่น การ Deploy ผ่าน Vercel หรือ Cloudflare

ไม่ผูกติดกับ Platfrom Bolt.new เพียงอย่างเดียว

เมื่อ Project ถูกเก็บอยู่ใน GitHub แล้ว เราสามารถเชื่อมต่อการทำงาน หรือส่งต่อให้คนอื่นไปพัฒนาต่อยอดจากเราได้อีก

ข้อจำกัดของ GitHub Integration ใน Bolt.new (ส่วนเสริม)

GitHub Integration ใน Bolt.new ถูกออกแบบมาโดยลดทอนฟีเจอร์บางส่วนออกไป เพื่อให้เน้นใช้งานง่าย และมีเครื่องมือเท่าที่จำเป็นทำให้มีข้อจำกัดดังนี้

GitHub Integration ใช้ฟีเจอร์ Git ได้ไม่เต็มที่

เราไม่สามารถใช้งาน Git ใน Bolt.new ได้เลย แต่เราสามารถใช้งาน GitHub ได้บางส่วนใน Bolt.new หากต้องการใช้งานเต็มรูปแบบต้องใช้งานและทำงานผ่าน GitHub โดยตรงเอง โดยมีฟีเจอร์ดังนี้

• Create GitHub repository ได้
• Create branch ใน GitHub ได้
• Switch branch ผ่าน Bolt.new ได้เลย
• Sync code ให้ระหว่าง Bolt.new กับ GitHub

GitHub Integration เมื่อมีการเชื่อมต่อไปแล้ว ทุกครั้งที่มีการแก้ไขจะไปอัปเดตให้ใน GitHub เสมอ

โดยปกติแล้วการแก้ไขโค้ดจะไม่ถูกบันทึกไว้ใน GitHub ทันทีต้องมี Process อื่น ๆ ตามมาเพื่อให้มั่นใจได้ว่าการเปลี่ยนแปลงที่ถูกบันทึกไปนั้น ถูกเก็บประวัติไว้อย่างเป็นระบบไม่เหมือนใน GitHub Integration ของ Bolt.new ที่จะมีการอัปเดต Sourcecode ใน GitHub ทุกครั้งที่มีการกดบันทึกไฟล์

กรณีที่ Sourcecode ใน Bolt.new กับใน GitHub ไม่ตรงกัน (Conflict) ระบบจะเชื่อ Bolt.new เสมอ

“Bolt resolves any conflicts by accepting the Bolt changes and overwriting the changes on GitHub.” นั่นหมายความว่า Project ไหนใน GitHub ใช้ Bolt.new อยู่ควรแก้ไข และทำงานใน Bolt.new เป็นหลัก ไม่งั้นหากระบบมี Conflict (ระบบไม่รู้ว่าควรเชื่อการแก้ไขแบบ A หรือ B) ระบบจะเชื่อการแก้ไขใน Bolt.new เสมอ

แหล่งอ้างอิงอื่น ๆ

• รายละเอียดเกี่ยวกับ GitHub integration ของ Bolt.new
• เรียนรู้เกี่ยวกับ GitHub เพิ่มเติมที่ Github มันคืออะไร มันคือยังไง แล้วใช้ทำไม? (ดูจบบรรลุ) 👨‍💻💯

การจัดการ Project Bolt.new โดยใช้ GitHub

ในส่วนนี้ เราจะเน้นอธิบายการจัดการ Project โดยใช้ GitHub ในการทำงาน โดยจำลองเป็นสถาณการณ์ว่า คุณกำลังจะสร้างฟีเจอร์ Login ใน Bolt.new ซึ่งหากทำงานกับ GitHub จะมีขั้นตอนดังนี้

1. สร้าง Project ใน Bolt.new และเชื่อมต่อ GitHub เรียบร้อย และมี branch หลักชื่อ main
2. สร้าง Branch ใหม่ เพื่อเริ่มพัฒนาต่อ (ชื่อ Branch feature/login)
3. เปิด Request เพื่อขอรวม (merge)เข้าไปใน branch หลัก (main)
4. เมื่อรวมเสร็จแล้ว ตัว Project จะมีฟีเจอร์ใหม่
5. หากมีปัญหาสามารถยกเลิก (revert) การรวม branch ได้
6. การแก้ไขทุกอย่างใน Bolt.new และ GitHub จะ sync กันแบบ realtime

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

• Bolt.new account 
  สมัครเข้าใช้งานที่นี่ (ฟรี) ที่ https://bolt.new/
• GitHub account
  สมัครเข้าใช้งานที่นี่ (ฟรี) ที่ https://github.com/

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

สร้าง หรือเข้าไปที่ Project ใน Bolt.new

เปิดใช้งาน GitHub Integration ใน Bolt.new

เปิดใช้งาน GitHub Integration โดยขั้นตอนนี้ควรจะมีการสมัคร GitHub ไว้แล้ว ซึ่งมีรายละเอียดดังนี้

• กดเชื่อมต่อ GitHub Integration
• เลือก GitHub account
• กดยอมรับ Authorize access ให้ Bolt.new เข้าไปสร้างหรือแก้ไข Project ใน GitHub ได้

สร้าง Project / Repository ใน GitHub

หลังจากเชื่อมต่อกับ GitHub กับ Bolt.new แล้ว เราจะสามารถสร้าง Project ใน GitHub โดยการตั้งชื่อ (เมื่อตั้งชื่อแล้วจะไม่สามารถแก้ไขภายหลังได้ และห้ามซ้ำกับชื่ออื่นที่เคยใช้) โดยมีรายละเอียดดังนี้

• ตั้งชื่อ Project ใน GitHub
• เมื่อสร้าง Project เรียบร้อยแล้ว ตรง GitHub Integration จะมี Menu ใหม่ให้ใช้งาน

ในตอนนี้เราได้ทำการสร้าง Project ใน GitHub แล้ว เราสามารถเข้าไปดู Project ของเราที่สร้างจาก Bolt.new ได้ผ่านการกดปุ่ม Go to repository

เมื่อกดเข้าไปใน Project ใน GitHub แล้ว จะเห็น Project ของเรา ซึ่งมี URLแบบนี้ (https://github.com/<USERNAME>/<PROJECT_NAME>/)

ดูประวัติการเปลี่ยนแปลงของ Project ผ่าน GitHub

หากเราไม่ได้ใช้ฟีเจอร์ Branch เลย เราจะมี Branch เดียวคือ main

เมื่อเชื่อมต่อกับ GitHub เรียบร้อยแล้ว ทุกครั้งที่มีการแก้ไขไฟล์ ไม่ว่าจะเป็นการเพิ่ม แก้ไข หรือลบไฟล์ใน Bolt.new ระบบจะไปอัปเดตกับใน GitHub ให้อัติโนมัติใน Branch หลัก (main) โดยเราสามารถดูประวัติการแก้ไข ผ่านตรง Commit history ซึ่งจะแสดงผลเป็นแถบด้านบน

Commits history เปรียบเสมือนประวัติการแก้ไข แสดงผลออกมาในรูปแบบ Timeline ซึ่งเราสามารถกดเข้าไปดูทีละอันเพื่อเช็คว่าเราแก้ไขอะไรไปบ้างในแต่ละครั้ง

สร้าง Branch ใน Project ของ GitHub

เนื่องจาก GitHub ไม่ได้เปิดให้เราสามารถ Restore version ได้ตรง ๆ ใน Project แต่เราสามารถแยก Version ออกมาเอง และทำการ Restore ภายหลังได้ผ่านการใช้ Branch ใน GitHub

เราจะไม่รวมการพัฒนา หรือแก้ไขทุกอย่างไว้ใน Branch เดียวกันเช่น ตอนนี้อยากแก้ไขสีหน้า Login ,ปรับการแสดงผลหน้า Landing page เราจะใช้วิธีสร้างมา 2 Branch แทน ในกรณีนี้คือ
1. feat/change-button-login
2. feat/adjust-landing-page

การที่เราแยกการแก้ไข หรือพัฒนาเพิ่มเป็น Branch ย่อย ๆ แทนที่จะรวมเป็น Branch เดียว ทำให้เรา Revert การแก้ไขได้ง่าย หากต้องการ Revert ของแค่บางอย่าง ก็ Revert จาก Branch ได้เลย (สามารถทำได้บน GitHub)

การสร้าง Branch ใหม่ ใช้ในกรณีที่เราต้องการแก้ไข หรือพัฒนาเพิ่มเติม เราจะสร้างสำเนาแยกออกมา โดยการสร้าง Branch ควรตั้งชื่อ Branch ตามชื่อสิ่งที่ต้องการทำ เช่น feat/login, fix/cannot-signup

การรวม Branch ย่อยเข้าไปใน Version หลักของ GitHub ผ่าน Pull request

เมื่อเราได้ทำการแก้ไขใน Branch ย่อย จนพอใจแล้ว และได้ทดสอบจนมั่นใจประมาณนึงแล้วว่า ระบบใหม่ที่เพิ่มเข้าไปใช้งานได้ และไม่ทำให้ระบบเดิมพัง เราถึงจะค่อยรวม (Merge) version ที่เราแก้ไขเข้าไปรวมกับระบบเดิม ผ่านการทำ Pull request และ Merge pull request

โดยเมื่อมีการสร้าง Branch ใหม่ ระบบจะมี Banner สีเหลืองให้เราสามารถกด Compare & Pull request ได้

Pull request คือการขอเพิ่มฟีเจอร์นี้เข้าไปใน Branch หลัก (main) ซึ่งการจะเพิ่มเข้าไป จะใช้ Pull request ในการสื่อสาร ในการเขียนอธิบายว่า ได้ทำการแก้ไขอะไรไปบ้าง อาจจะแนบรูปเพิ่มเติม หรือให้คนอื่นช่วยดูโค้ดที่เราแก้ไขก็ได้

อ่านแนวทางการเขียน Pull request ที่ดี

เมื่อทำการแก้ไข และทดสอบจนมั่นใจแล้วใน Branch ใหม่ เราจะทำการเปิด Pull request เพื่อนำสิ่งที่แก้ไขไปรวมกับของเดิมใน Branch หลัก

โดยหลังจากรวมแล้ว เราสามารถ Delete branch ย่อยทิ้งไปได้ หรือจะ Revert การแก้ไขได้เช่นกัน

การย้อนกลับการแก้ไขผ่านการ Revert pull request

เมื่อได้ทำการ Merge pull request ไปแล้ว สังเกตในเมนู Pull request จะอยู่ใน Closed หรือ Merged

ตัว GitHub เปิดโอกาสให้เรา revert การเปลี่ยนแปลงได้อีก หาก Merge pull request ไปแล้ว ผ่านการกดปุ่ม Revert ซึ่งต้องทำการเปิด Pull request อีกรอบเพื่อ Revert กลับมา

อ่านรายละเอียดฉบับเต็มได้ที่ Reverting a pull request

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

ยังไม่มี

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

ปัญหา main and feature/xyz are entirely different commit histories ตอนเปิด Pull Request เมื่อใช้ GitHub integration ใน Bolt.new เกิดจากอะไร ?

ปัญหานี้เกิดจาก Bug ของ Bolt.new เองที่ไม่ได้ Sync ข้อมูลก่อนสร้าง Branch ใหม่ ทำให้ Branch หลักกับ Branch ย่อยไม่ได้มีประวัติการแก้ไขร่วมกัน (ในครั้งแรก) ซึ่งสามารถป้องกันไม่ให้เกิดปัญหาได้โดย

• ลอง Edit, Save ไฟล์ ใน Branch main ก่อนรอบนึง ค่อยสร้าง Branch แยกออกมา
• รอจน Bolt.new sync Project ใน GitHub ให้เรียบร้อยก่อน (จะมีสัญลักษณ์วงกลมสีเขียว) ค่อยสร้าง Branch ใหม่

อ้างอิงจาก Discord community

ต่อยอดด้วยการระบบ Deployment ใน GitHub

เราสามารถต่อยอดการทำ Deployment ให้มีประสิทธิภาพมากขึ้นได้ ผ่านการใช้ GitHub Action อย่างเช่น

• การทำระบบ Auto Deployment ใน Netlify / Vercel ผ่าน GitHub
  ระบบนี้จะทำให้ระบบ Deploy เว็บไซต์อัติโนมัติ เมื่อมีการเปลี่ยนแปลงไปที่ Branch main
• การทำระบบ Preview Deployment ใน Netlify / Vercel ผ่าน GitHub
  ระบบนี้จะสามารถทำให้เราสามารถ Deploy เว็บไซต์ได้หลาย ๆ เวอร์ชั่นพร้อม ๆ กัน เรียก Branch deployment

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

ยังไม่มี

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

July 16, 2025July 25, 2025Vibe Coding 8

[Workshop] AI สร้าง Sale Page พร้อม Stripe Payment (QR code, Credit Card) แบบไม่เขียนโค้ด ด้วย Bolt.new

Workshop ใช้ Bolt.new สร้าง Sale page พร้อมระบบรับเงินผ่าน Stripe (QR Code + Credit Card) ได้ในไม่กี่นาทีด้วยการ Prompt คำสั่งให้ AI ว่าต้องการอะไร ระบบก็จะสร้างและ Deploy ให้ใช้งานได้ทันที

June 2, 2025July 3, 2025Vibe Coding 28

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

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

April 13, 2025June 3, 2025Vibe Coding 46

[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

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