- บัญชี Claude ที่สามารถใช้งาน Claude Code on the web
- มีบัญชี GitHub ที่ต้องการเชื่อมต่อกับ Claude Code
- Repository บน GitHub ที่คุณเป็นเจ้าของหรือมีสิทธิ์ Admin หากเป็น Repository ของ Organization อาจต้องให้ Owner อนุมัติก่อน
1. เชื่อมต่อ GitHub กับ Claude Code
หลังจาก Login Claude แล้ว ให้เข้าใช้งาน Claude Code on the web ผ่าน https://claude.ai/code
หากยังไม่ได้เชื่อมต่อ GitHub ระบบจะแสดงหน้า Code with Claude anywhere ให้คลิก Connect to GitHub
ระบบจะพาไปยัง GitHub เพื่อขออนุญาตให้แอป Claude by Anthropic เข้าถึงบัญชี
ตรวจสอบว่าเป็นบัญชีที่ต้องการใช้งาน จากนั้นคลิก Authorize
2. เลือกและอนุญาต Repository
ที่หน้า Claude Code คลิก Select repository… แล้วดำเนินการตามสถานะที่แสดง- พบ Repository ที่ต้องการในรายการ เลือก Repository นั้น แล้วข้ามไปหัวข้อที่ 3
- แสดงข้อความ No repositories available คลิก Install the Claude GitHub App เพื่อกำหนด Repository ที่ Claude Code ใช้งานได้
- มี Repository ในรายการ แต่ไม่พบตัวที่ต้องการ คลิก Troubleshoot GitHub connection เพื่อตรวจสอบการเชื่อมต่อและสิทธิ์ของ Repository
ระบบจะเปิด GitHub ให้กำหนด Repository ที่อนุญาต โดยมีตัวเลือก 2 แบบ
- All repositories ให้สิทธิ์ทุก Repository ในบัญชี รวมถึง Repository ที่สร้างใหม่ในอนาคต
- Only select repositories ให้สิทธิ์เฉพาะ Repository ที่เลือก (แนะนำ เพราะจำกัดขอบเขตการเข้าถึงได้)
เลือก Only select repositories เลือก Repository ที่ต้องการ
แล้วคลิก Install & Authorize
3. ตรวจสอบ Environment, Repository และ Branch
กลับไปที่หน้า Claude Code แล้วตรวจสอบว่าเลือก Environment, Repository และ Branch ถูกต้องก่อนเริ่มงาน
- Environment: สภาพแวดล้อมที่ Claude Code ใช้ทำงาน คู่มือนี้ใช้ค่าเริ่มต้น
- Repository: โปรเจกต์บน GitHub ที่ต้องการให้ Claude Code ทำงาน
- Branch: จุดเริ่มต้นของงาน ค่าเริ่มต้นคือ Default Branch ของ Repository โดย Claude Code จะสร้าง Branch แยกสำหรับแก้ไขโค้ด
ใช้กำหนดสภาพแวดล้อมการทำงานของ Claude Code มีผลกับทุก session ที่ใช้ environment นั้น และใช้ค่าเริ่มต้นได้
สามารถตั้งค่าเพิ่มเติมได้ตามความต้องการของโปรเจกต์ที่ Environment > Cloud > Add cloud environment…
-
Network access: ระดับการเชื่อมต่ออินเทอร์เน็ต
หากเลือก Limited สามารถระบุโดเมนที่อนุญาตและเปิดใช้ package managers ได้ -
Setup script: Bash script สำหรับเตรียมสภาพแวดล้อมก่อนเริ่มแต่ละ session
เช่น
npm install -
Environment variables: ตัวแปรในรูปแบบ .env
เช่น
NODE_ENV=production
ผู้ที่ใช้ environment นี้สามารถมองเห็นค่าที่กำหนดได้ จึงไม่ควรใส่ข้อมูลลับหรือ credentials
4. สั่งงาน Claude Code
ระบุรายละเอียดงานแล้วกด Send หรือ Enter เพื่อเริ่มการทำงาน
วิเคราะห์โครงสร้างโปรเจกต์และอธิบายหน้าที่ของแต่ละโฟลเดอร์สร้างหน้าแนะนำสินค้าด้วย HTML, CSS และ JavaScript มีรูปสินค้า รายละเอียด ราคา และปุ่มติดต่อสั่งซื้อ พร้อมรองรับการแสดงผลบนมือถือเพิ่มฟอร์มติดต่อพร้อมตรวจสอบรูปแบบอีเมลและแจ้งเตือนเมื่อกรอกข้อมูลไม่ครบ โดยไม่เปลี่ยนดีไซน์เดิมตรวจสอบช่องโหว่ด้านความปลอดภัยของเว็บไซต์ พร้อมแนะนำวิธีแก้ไข
5. ตรวจสอบการเปลี่ยนแปลงและสร้าง Pull Request
เมื่อ Claude Code ทำงานเสร็จ ให้อ่านข้อความสรุปผลก่อน จากนั้นคลิกส่วนแสดงการเปลี่ยนแปลงเพื่อเปิด Diff บรรทัดสีเขียวคือส่วนที่เพิ่ม บรรทัดสีแดงคือส่วนที่ลบ และตรวจสอบ Source Code ที่ถูกเพิ่ม แก้ไข หรือลบ
เมื่อสร้าง Pull Request สำเร็จ Claude Code จะแสดงหมายเลข Pull Request ใน Session คลิกหมายเลขนั้นเพื่อเปิดบน GitHub
6. ตรวจสอบและ Merge Pull Request
ที่หน้า Pull Request บน GitHub ให้ตรวจสอบก่อน Merge ดังนี้
- แท็บ Files changed ตรวจว่าไฟล์ที่ถูกแก้ไขถูกต้องและครบถ้วน
- แท็บ Checks หาก Repository มีการตั้งค่า CI หรือการทดสอบอัตโนมัติ ควรรอให้ผ่านทั้งหมดก่อน
- ข้อความ No conflicts with base branch หมายถึงไม่มี Merge Conflict แต่ควรตรวจสอบ CI Checks, Approval และ Branch Protection Rules ก่อน Merge หากมี Conflict ให้สั่ง Claude Code ช่วยแก้ไข หรือคลิก Resolve conflicts (หากใช้งานได้) บน GitHub ก่อน Merge
เมื่อตรวจสอบเรียบร้อยแล้ว คลิก Merge pull request
@claude ตามด้วยคำสั่งในช่อง Add a comment
ด้านล่างของหน้า Pull Request เช่น
@claude review this PR
นอกจากนี้ยังพิมพ์ @claude ในคอมเมนต์ของ Issue ได้ด้วย เช่น
@claude fix this issue
เพื่อให้ Claude ช่วยแก้ไขปัญหาและสร้าง Pull Request
- Create a merge commit เก็บประวัติ Commit ทั้งหมด
- Squash and merge รวมทุก Commit เป็น Commit เดียว
- Rebase and merge นำ Commit ไปต่อท้าย Branch ปลายทางโดยไม่สร้าง Merge commit
ระบบจะแสดงฟอร์มยืนยันการ Merge
- ตรวจสอบ Commit message ซึ่งเป็นหัวข้อของ Commit ที่จะบันทึกในประวัติ แก้ไขได้หากต้องการ
- ตรวจสอบ Extended description ซึ่งเป็นคำอธิบายเพิ่มเติมของการเปลี่ยนแปลง
- คลิก Confirm merge
ระบบจะแจ้งว่า Pull Request ถูก Merge เข้าสู่ Branch ปลายทาง (เช่น main) เรียบร้อยแล้ว แนะนำให้คลิก Delete branch เพื่อลบ Branch ที่ไม่ใช้แล้ว ช่วยให้ Repository เป็นระเบียบ
7. นำ Source Code ขึ้น Hosting
หลังจากแก้ไขและ Merge โค้ดเรียบร้อยแล้ว หากต้องการนำ Source Code จาก GitHub ไป Deploy บน Hosting สามารถศึกษาเพิ่มเติมได้จากบทความต่อไปนี้
ยกเลิกการเชื่อมต่อ GitHub
หากต้องการเปลี่ยน Repository ที่อนุญาตหรือยกเลิกการเชื่อมต่อ ให้ทำบน GitHub ดังนี้
- ไปที่หน้าจัดการ GitHub Apps ตามประเภทบัญชี
- บัญชีส่วนตัว: Settings > Applications > Installed GitHub Apps
- Organization: Your organizations > Settings > GitHub Apps
- คลิก Configure ที่ Claude
- เลือกดำเนินการตามต้องการ
- เปลี่ยน Repository: เพิ่มหรือลบ Repository ที่อนุญาต แล้วคลิก Save
- ยกเลิกทั้งหมด: คลิก Uninstall เพื่อถอนการติดตั้ง App
หากต้องการถอนสิทธิ์การยืนยันตัวตนด้วย ให้ไปที่ Settings > Applications > Authorized GitHub Apps แล้วคลิก Revoke ที่ Claude by Anthropic
หากคุณต้องการนำเว็บไซต์ที่พัฒนาด้วย Claude Code และ GitHub ขึ้นใช้งานจริง
Web Hosting จาก hostatom รองรับการจัดการเว็บไซต์และ Deploy Source Code จาก GitHub
ช่วยให้ขั้นตอนพัฒนาและนำเว็บไซต์ขึ้นใช้งานสะดวกยิ่งขึ้น
ดูรายละเอียด Web Hosting