ดีพลอยเว็บไซต์และเว็บแอปจาก Google AI Studio

เชื่อมต่อ Google AI Studio กับ GitHub

เปิดเว็บไซต์หรือเว็บแอปที่คุณสร้างไว้แล้ว

เปิด Google AI Studio

https://aistudio.google.com

Your app in Google AI Studio Settings GitHub

ใช้ครั้งแรก? กด "Sign in to GitHub to continue" กด "Install & Authorize" เมื่อระบบถาม

Settings คือไอคอนรูปเฟืองที่มุมขวาบน เชื่อมต่อ GitHub แล้วใช่ไหม? ไปที่งานถัดไปได้เลย

สร้างบัญชี GitHub

Only if you don't have one yet.

https://github.com/signup

สร้าง repository และบันทึก

repository คือโฟลเดอร์ของโปรเจกต์คุณบน GitHub และ Hostinger จะอ่านโปรเจกต์จากที่นี่

กด "Create new repository" ใส่ชื่อ repository ส่วนคำอธิบายจะใส่หรือไม่ก็ได้ เลือก Private กด "Create GitHub repository" กด "Push changes to GitHub" รอจนสถานะขึ้นว่า "GitHub & Google AI Studio are currently in sync"

ข้อความนี้ยืนยันว่าบันทึกโปรเจกต์ของคุณแล้ว

รับโฮสติ้ง Hostinger

คุณต้องใช้แพ็กเกจ Hostinger ที่มี Web Apps มีอยู่แล้วใช่ไหม? เปิดบัญชีของคุณแล้วไปที่ขั้นตอนถัดไป

รับโฮสติ้ง Web App ของ Hostinger

เลือกแพ็กเกจที่มี Node.js Web Apps

USED IN TUTORIAL

สร้าง Web App และนำเข้าโปรเจกต์ของคุณ

Hostinger Websites Create website Web App

เลือกโดเมนของคุณ หรือใช้โดเมนชั่วคราวเพื่อเริ่มต้น เลือก Import your Git repository เลือก Continue with GitHub และอนุญาต Hostinger หากระบบถาม เลือก repository ที่คุณบันทึกไว้ในขั้นตอนที่ 1

Hostinger อาจแสดงขั้นตอนเหล่านี้เป็นคำถามจากผู้ช่วยแทนแบบฟอร์ม แต่ตัวเลือกยังเหมือนเดิม

ตรวจสอบการตั้งค่าบิลด์

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

ไม่แน่ใจเรื่องการตั้งค่าบิลด์ใช่ไหม?

ไม่บังคับ วางพรอมต์นี้ในโปรเจกต์ Google AI Studio ของคุณ แล้วเทียบคำตอบกับสิ่งที่ Hostinger เลือก พรอมต์นี้แค่อ่านไฟล์ของคุณเท่านั้น

Check this project's deployment settings for Hostinger. This is a read-only check. I am deploying this project to Hostinger as a Web App, imported from GitHub. Hostinger has already suggested build settings, and I want to confirm them against the real project. Inspect the actual project files: package.json, the lockfile, the build configuration and any server file. Do not guess from the preview or from how the app looks. Rules: - Do NOT change, create or delete any file. - Do NOT print the value of any API key or secret. Keep two things separate: - FRONTEND TOOLING: what builds the pages, for example Vite. - SERVER RUNTIME: whether a Node.js server must keep running in production, for example an Express server that serves the app or calls an API. If the project has a Node.js server that must keep running, the Hostinger framework preset should match that server, even when the pages are built with Vite. If there is no server, the preset should match the frontend build tool. Reply in this short format, as plain text and not JSON: Framework preset to choose in Hostinger: Needs a running Node.js backend: Yes or No, with a one-line reason Root directory: only if the app is not at the repository root Package manager: Build command: or "none needed" Server entry file: or "none" Node.js version: only if the project states one, otherwise "not specified" Mismatch to fix: anything that would break on Hostinger, or "none found" If you cannot verify a line from the files, write "not sure" instead of guessing.

เพิ่มตัวแปรสภาพแวดล้อม

ไม่มีตัวแปรแสดงอยู่ใช่ไหม? ข้ามขั้นตอนนี้ได้เลย

ตรวจสอบตัวแปรสภาพแวดล้อมที่ Hostinger ตรวจพบ ใส่ค่าที่โปรเจกต์ของคุณต้องใช้ กด Continue

Secret ที่คุณบันทึกไว้ใน Google AI Studio จะไม่ถูกคัดลอกไปที่ Hostinger จึงต้องใส่อีกครั้งที่นี่ หากโปรเจกต์ใช้ Gemini API ให้สร้างคีย์ในหน้านี้:

เปิด Google AI Studio

API keys page

https://aistudio.google.com/apikey

สำคัญ

ใส่ API key ใน Hostinger เท่านั้น ห้ามใส่คีย์ส่วนตัวในตัวแปรที่ขึ้นต้นด้วย VITE_ และห้ามอัปโหลดไฟล์ .env ที่มีคีย์จริงขึ้น GitHub

ไม่แน่ใจว่าโปรเจกต์ต้องใช้ตัวแปรอะไรบ้าง?

หาตัวแปรที่โปรเจกต์ของฉันต้องใช้

วางพรอมต์นี้ในโปรเจกต์ Google AI Studio ของคุณ จะได้รายชื่อตัวแปรที่โค้ดอ่านจริง โดยไม่เปลี่ยนแปลงอะไร

List the environment variables this project needs on Hostinger. This is a read-only check. Search the real source code for process.env and import.meta.env, and read any example environment file. Do not guess and do not invent names. Rules: - Do NOT change, create or delete any file. - Report variable NAMES only. Never print a value. - Do not suggest several names for the same key. Report the one name the code reads. For each variable, give one line: NAME, what it is for, Required or Optional, read on the SERVER or in BROWSER code Do not list variables the hosting platform normally sets by itself, such as NODE_ENV or PORT, unless the code cannot work without a value I must enter. Then add one last line: Private key exposed in browser code: Yes or No Answer Yes if a private key, such as a Gemini API key, is read through a VITE_ variable or otherwise ends up in code that runs in the browser.

ย้ายคีย์ส่วนตัวออกจากโค้ดฝั่งเบราว์เซอร์

ใช้เฉพาะเมื่อการตรวจด้านบนบอกว่ามีคีย์ส่วนตัวเปิดเผยอยู่ในโค้ดฝั่งเบราว์เซอร์ ตัวแปรที่ขึ้นต้นด้วย VITE_ จะถูกฝังลงในหน้าเว็บที่ใครก็อ่านได้

A private API key in this project is read in browser code. Move it to the server so visitors can never see it. First confirm it from the real files: show me the file and line where browser code reads the key, without printing the key's value. If you cannot find one, stop and tell me. Do not change anything. If it is confirmed, make the smallest change that fixes it, and keep the design and every feature exactly as they are: - Call the API from a server route. Use the Node.js server the project already has. Add a minimal one only if there is none. - Read the key on the server from an environment variable that does NOT start with VITE_. - Make the browser code call my own server route instead of the API directly. - Remove the key from every file that is sent to the browser. Rules: - Never print the key's value. - Do not add a .env file with real keys to the repository. - Do not change unrelated code. When you finish, tell me: - the files you changed - the exact variable name to add in Hostinger - whether the project now needs a running Node.js server, so I can check the framework Hostinger selected

ดีพลอย

ตรวจสอบการตั้งค่าขั้นสุดท้าย กด Deploy รอให้บิลด์เสร็จ เปิดเว็บที่ใช้งานจริง

ถ้าบิลด์ล้มเหลว

คัดลอกข้อผิดพลาดที่ Hostinger แสดง วางลงในพรอมต์นี้ แล้วรันในโปรเจกต์ Google AI Studio ของคุณ จากนั้นบันทึกการแก้ไขไปที่ GitHub หรือเปลี่ยนการตั้งค่าใน Hostinger แล้วดีพลอยใหม่

แก้การดีพลอยที่ล้มเหลว

หาสาเหตุจริงจากข้อผิดพลาดของคุณ แล้วแก้เฉพาะจุดนั้น

My project failed to deploy on Hostinger. I deployed it as a Web App imported from GitHub. Here is the exact error from Hostinger's build log: [PASTE THE ERROR HERE] Here is what Hostinger selected: Framework: [PASTE IT HERE] Other build settings, if you can see them: [PASTE THEM HERE, OR DELETE THIS LINE] Find the real cause from this error and the actual project files: package.json, the build configuration and any server file. Do not try random changes, and do not invent a cause the error and the files do not support. If the error is not enough to be sure, tell me what else to copy from Hostinger. - If a Hostinger setting is wrong, tell me exactly which setting to change and to what. Do not change code for that. - If the code or configuration is wrong, fix only that. Keep the design and features the same. - Do not upgrade unrelated packages. - If the log contains a key or password, do not repeat it. Never print the value of an API key or secret. Reply with: Cause: What you changed, or which Hostinger setting to change: What I should do next:

ทดสอบเว็บที่ใช้งานจริง

เปิดเว็บที่ใช้งานจริงแล้วตรวจสอบว่าหน้าต่าง ๆ และฟีเจอร์หลักทำงานได้

หากโปรเจกต์มีฟีเจอร์ AI การลงชื่อเข้าใช้ หรือบริการที่เชื่อมต่อไว้ ให้ลองใช้ส่วนนั้นด้วย

ถ้ามีบางอย่างไม่ทำงานบนเว็บที่ใช้งานจริง

คัดลอกพรอมต์ที่ตรงกับปัญหาของคุณ แล้วรันในโปรเจกต์ Google AI Studio จากนั้นบันทึกการแก้ไขไปที่ GitHub

แก้หน้าว่างหรือหน้าขาว

บิลด์เสร็จแล้ว แต่เว็บที่ใช้งานจริงแสดงหน้าว่าง

My project deployed to Hostinger without a build error, but the live website shows a blank page. It works in the Google AI Studio preview. Find what is different in production. Check the real project files for: - errors that only happen in the production build - asset and script paths that break outside the preview, including the base path in the build configuration - a server that does not serve the built files, or serves them from the wrong folder - a server that listens on a fixed port instead of the port the hosting gives it - code that needs an environment variable which is missing in production If I paste errors from the browser console below, start from them: [PASTE ANY BROWSER CONSOLE ERRORS HERE, OR DELETE THIS LINE] Base the fix on what you find in the files and the errors, not on guesses. If you cannot tell the cause, say what else I should copy for you. Keep the design and features exactly the same, and never print the value of an API key or secret. Reply with: Cause: What you changed, or which Hostinger setting to change: What I should do next:

แก้ฟีเจอร์ AI การลงชื่อเข้าใช้ หรือฟีเจอร์อื่น

เว็บไซต์โหลดได้ แต่มีฟีเจอร์หนึ่งไม่ทำงาน

My project is live on Hostinger and the pages load, but this feature does not work: [DESCRIBE THE FEATURE AND WHAT HAPPENS] Any error message I can see: [PASTE IT HERE, OR DELETE THIS LINE] It works in the Google AI Studio preview. Find why it fails in production. Check the real project files for: - the environment variables this feature reads. List their NAMES so I can confirm each one has a value in Hostinger - code that depends on Google AI Studio's own environment or secrets and has no equivalent on Hostinger - API calls that need a running Node.js server, in case the project was deployed without one - addresses that point to the preview or to localhost instead of the live domain - for sign-in or outside services: settings that must list my live domain Never ask me for the value of an API key or secret, and never print one. Never move a private key into browser code or into a VITE_ variable to make the feature work. Do not invent a cause the files and the error do not support. Keep the design and other features the same. Reply with: Cause: What you changed, or what I must set in Hostinger or in the outside service: What I should do next:

แก้ 404 ในหน้าย่อย

หน้าแรกใช้งานได้ แต่เมื่อเปิดหรือรีเฟรชหน้าอื่นกลับขึ้น 404

My project is live on Hostinger. The home page works, but opening or refreshing an inner page shows a 404 page. Inspect how this project handles routes: the router in the frontend, and the server file if there is one. - If the project runs its own Node.js server, make that server return the app's main page for routes the frontend router handles, without breaking API routes or static files. - If the project has no server, do not add one. Tell me what the hosting must do for these routes and which Hostinger setting to check. Change only what this problem needs. Keep the design and features the same. Reply with: Cause: What you changed, or which Hostinger setting to change: What I should do next:

อัปเดตเว็บไซต์ของคุณ

ทุกการอัปเดตใช้เส้นทางเดียวกัน: Google AI Studio → GitHub → Hostinger → เว็บที่ใช้งานจริง

แก้ไขเล็กน้อยใน Google AI Studio เปิด Settings แล้วไปที่ GitHub กด "Push changes to GitHub" รอจนโปรเจกต์ sync เสร็จ รอให้ Hostinger ดีพลอยอัปเดต รีเฟรชเว็บที่ใช้งานจริงแล้วตรวจสอบการเปลี่ยนแปลง

Hostinger จะดีพลอยอัปเดตให้เอง ตราบใดที่ repository บน GitHub ยังเชื่อมต่ออยู่และเปิดการดีพลอยอัตโนมัติไว้สำหรับ Web App ของคุณ