ดีพลอยโปรเจกต์ Claude Code ขึ้น Hostinger อย่างปลอดภัย

ลงชื่อเข้าใช้ด้วย GitHub

VS Code Sign In Continue with GitHub

สร้าง repository

GitHub New Repository

ตั้งชื่อ repository ให้ชัดเจน เลือก Private ไม่ต้องติ๊ก README, license และ .gitignore สร้าง repository คัดลอก URL แบบ HTTPS

ทดสอบบนเครื่องอย่างรวดเร็ว

ดาวน์โหลด Node.js

ติดตั้ง Node.js เฉพาะเมื่อยังใช้ npm ไม่ได้

https://nodejs.org/en

npm install

npm run dev

เปิด URL บนเครื่องและตรวจสอบว่าโปรเจกต์ทำงานถูกต้อง

ใช้พรอมต์เผยแพร่แบบปลอดภัย

ดาวน์โหลด Git

ติดตั้ง Git เฉพาะเมื่อยังไม่มี

https://git-scm.com/

พรอมต์ push ขึ้น GitHub อย่างปลอดภัย

ใส่ URL ของ GitHub repository ด้านล่าง แล้วใช้พรอมต์ที่ปรับแต่งแล้วใน Claude Code

I already created an empty GitHub repository. GitHub repository URL: {{GITHUB_REPOSITORY_URL}} Please prepare and push this local project to that GitHub repository. Rules: - Do not change the app code, UI, design, routes, database logic, backend logic, Supabase logic, or functionality. - Only handle Git and GitHub publishing. - Check Git status, branch, remotes, .gitignore, and tracked files first. - Make sure .env and .env.local are not committed. - Make sure generated files like node_modules, dist, dist-ssr, *.tsbuildinfo, .DS_Store, and log files are ignored. - If unnecessary files are already tracked, remove them from Git tracking only. Do not delete real project files. - Use main for a new repository, unless an existing branch should be preserved. - Connect this project to the GitHub repository URL. - Create a clean commit if needed. - Push the project to GitHub. If the push fails, diagnose and fix only the Git/GitHub setup. Do not change app functionality. Before any destructive action, explain what you found and what you plan to do.

URL ของ GitHub repository

https://github.com/username/repository-name.git

เปิด Hostinger

เปิด Hostinger

เริ่มตั้งค่าโฮสติ้งสำหรับขั้นตอนนี้

RECOMMENDED

https://www.hostg.xyz/SHJTL

สร้างเว็บแอป Node.js

Hostinger Websites Add Website Node.js Web App

นำเข้า GitHub repository ของคุณ

เพิ่มตัวแปรสภาพแวดล้อมหากจำเป็น

ถาม Claude Code ว่าโปรเจกต์ของคุณต้องใช้ตัวแปรสภาพแวดล้อมใดบ้าง แล้วเพิ่มเฉพาะค่าเหล่านั้นใน Hostinger

ตัวแปร Supabase ที่ใช้ในบทเรียนนี้

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY

VITE_SUPABASE_URL

URL ของโปรเจกต์

VITE_SUPABASE_ANON_KEY

คีย์ anon (สาธารณะ)

รับค่าเหล่านี้จาก Supabase

เปิดการตั้งค่า API

https://supabase.com/dashboard/project/_/settings/api

เปิดเว็บไซต์ที่ใช้งานจริงของคุณ

ทดสอบหน้าหลัก ๆ และตรวจสอบว่าฟีเจอร์ของโปรเจกต์ทำงานถูกต้องเมื่อออนไลน์

เผยแพร่การอัปเดตในอนาคต

แก้ไขด้วย Claude Code ทดสอบการแก้ไขบนเครื่อง ตรวจดูไฟล์ใน Source Control คอมมิตพร้อมข้อความสั้น ๆ ซิงก์การเปลี่ยนแปลงขึ้น GitHub

Hostinger จะดีพลอยเวอร์ชันล่าสุดใหม่โดยอัตโนมัติ

ทิ้งการเปลี่ยนแปลงบนเครื่องที่ไม่ต้องการ

VS Code Source Control Modified File Discard Changes

VS Code Source Control More Actions Changes Discard All Changes

ใช้ตัวเลือกเหล่านี้ก่อนคอมมิตหรือซิงก์การเปลี่ยนแปลงเท่านั้น