คู่มือ Deploy เว็บไซต์จาก AI
ขึ้นเว็บจริงได้ง่าย ๆ

🤔 Plesk คืออะไร?

Plesk คือ "ห้องควบคุมของเว็บไซต์" ที่ทำให้คุณจัดการเว็บได้ง่าย ๆ โดยไม่ต้องเป็นโปรแกรมเมอร์

✨ ทำอะไรได้บ้างใน Plesk?

📦 สิ่งที่ต้องเตรียมก่อนเริ่ม

💰 ค่าใช้จ่ายโดยประมาณ

• Hosting + Plesk = 100–500 บาท/เดือน
• Domain = 300–800 บาท/ปี

🌟 ทำไมต้องเลือก Hostatom?

📦 แพ็คเกจที่แนะนำสำหรับมือใหม่

🛒 ขั้นตอนการสมัครใช้งาน (ง่ายมาก!)

🌐 การตั้งค่า Domain (ถ้าใช้ Domain ที่มีอยู่แล้ว)

กรณีซื้อ Domain จากที่อื่น (เช่น GoDaddy, Niagahoster) ต้องตั้งค่า Nameserver ให้ชี้มาที่ Hostatom

ns1.hostatom.com
ns2.hostatom.com

🔑 ขั้นตอนการ Login (3 ขั้นตอน)

https://your-domain.com:8443
หรือ
https://123.456.78.90:8443

🗺️ ทำความเข้าใจหน้า Dashboard

Dashboard = ห้องนั่งเล่นของบ้าน เห็นภาพรวมทั้งหมด

➕ เพิ่ม Domain ใหม่

⚙️ เครื่องมือสำคัญของแต่ละ Domain

คืออะไร? เว็บที่ไม่ต้อง "ทำงาน" บนเซิร์ฟเวอร์ เหมือนเอาโบรชัวร์ไปแปะบนอินเทอร์เน็ต แค่เปิดดูได้เลย

🎯 เหมาะกับ: Landing Page, Portfolio, โบรชัวร์ออนไลน์, เว็บแนะนำธุรกิจ

🗂️ ไฟล์ที่มักได้จาก AI

📤 ขั้นตอนการ Deploy (5 ขั้นตอน)

httpdocs/
├── index.html  ← ตรงนี้เลย!
├── style.css
└── script.js

httpdocs/
└── myproject/  ← ซ้อนอีกชั้น!
    └── index.html

🔧 แก้ไขปัญหาที่พบบ่อย

สาเหตุ: ไม่มีไฟล์ index.html ใน httpdocs หรือชื่อผิด

1. เช็คว่ามี index.html หรือไม่
2. ถ้าชื่ออื่น → Rename เป็น index.html
3. ถ้าอยู่ในโฟลเดอร์ซ้อน → ย้ายออกมา

สาเหตุ: Path (ที่อยู่ไฟล์) ในโค้ด HTML ผิด

<link href="/assets/style.css">

<link href="./style.css">

สาเหตุ: Path รูปผิด หรือไฟล์รูปไม่มีจริง

<img src="/assets/images/logo.png">

<img src="./images/logo.png">

คลิกขวา httpdocs → Change Permissions → ตั้ง 755 → ติ๊ก "Apply to subdirectories"

คืออะไร? เว็บที่ "ต้องทำงาน" บนเซิร์ฟเวอร์ตลอดเวลา มี "สมอง" ทำงานอยู่ข้างหลัง เหมือนมีพนักงานคอยรับ-ส่งข้อมูล 24 ชั่วโมง

🎯 เหมาะกับ: Web Application (Login, CRUD), API, Dashboard, Chat App, ระบบจอง

🗂️ ไฟล์ที่มักได้จาก AI

📤 ขั้นตอนการ Deploy (7 ขั้นตอน)

app.listen(3000, () => {
  console.log('port 3000');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`port ${PORT}`);
});

📄 ตัวอย่าง server.js ที่ทำงานบน Plesk

const express = require('express');
const app = express();

// ⭐ สำคัญ! ใช้ PORT จาก Plesk
const PORT = process.env.PORT || 3000;

app.use(express.json());
app.use(express.static('public'));

app.get('/', (req, res) => {
  res.send('Hello from Node.js on Plesk! 🚀');
});

app.get('/api/test', (req, res) => {
  res.json({ message: 'API Working!', timestamp: new Date() });
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

🔧 แก้ไขปัญหาที่พบบ่อย

ดู Logs ในหน้า Node.js Settings → อ่าน Error ล่าสุด

คืออะไร? WordPress = ระบบสร้างเว็บที่ง่ายที่สุด (40% ของเว็บทั่วโลก). Elementor = เครื่องมือออกแบบแบบ "ลาก-วาง". Sale Page = หน้าเดียวสำหรับขายสินค้า/บริการ

🎯 เหมาะกับ: Sale Page, Landing Page, Promotion Page, Event Page, Product Launch

📋 3 ส่วนหลัก

🏗️ ส่วนที่ 1: เตรียม WordPress + Elementor

📥 ส่วนที่ 2: Import Template

วิธีที่ 1: Import ผ่าน Dashboard (แนะนำมือใหม่!)

วิธีที่ 2: Import ผ่าน Editor

🎨 ส่วนที่ 3: ปรับแต่งและเผยแพร่

• แก้ Text: คลิกที่ข้อความ → พิมพ์ใหม่ (บันทึกอัตโนมัติ)
• แก้รูป: คลิกรูป → Choose Image → Upload Files → เลือกรูป
• แก้ Button: คลิกปุ่ม → แก้ Text + Link
• แก้สี: คลิก Element → Style → เลือกสีใหม่

📱 เช็ค Mobile: ล่างซ้าย → 📱 Mobile → ดูว่าสวยไหม

🎬 Publish: Preview → ตรวจสอบ → คลิก "Publish" → เว็บเผยแพร่แล้ว! 🎉

🔧 แก้ไขปัญหาที่พบบ่อย

Elementor → Settings → Advanced → เปิด "Enable Elementor Template Upload" = Yes → Save → ลอง Upload ใหม่

1. Elementor → Settings → Features → เปิด Flexbox Container + Grid Container
2. Elementor → Tools → "Regenerate CSS" → คลิก "Regenerate Files"
3. Refresh หน้าเว็บ

Media → Add New → อัพโหลดรูpr → Edit with Elementor → คลิกรูป → Choose Image → เลือกรูปใหม่ → Update

คืออะไร? เว็บแอพที่ต้อง "Build" ก่อน Deploy เหมือนทำอาหาร: ปรุงให้สุกก่อน ค่อยเสิร์ฟ

🎯 เหมาะกับ: SPA, Web App ซับซ้อน, Interactive Dashboard, เว็บที่ต้องเร็ว

🏗️ ขั้นตอน Build

สำหรับ React

cd C:\Users\YourName\my-react-app
npm install          # ครั้งแรกเท่านั้น
npm run build        # Build โปรเจค → สร้างโฟลเดอร์ "build"

สำหรับ Vue.js

cd C:\Users\YourName\my-vue-app
npm install
npm run build        # Build → สร้างโฟลเดอร์ "dist"

📤 Upload ไปที่ Plesk

🔧 แก้ไขปัญหาที่พบบ่อย

React: เปิด package.json → เพิ่ม "homepage": "." → Build ใหม่ → Upload ทับ
Vue: เปิด vue.config.js → ใส่ publicPath: './' → Build ใหม่

// React: เปลี่ยน BrowserRouter เป็น HashRouter
import { HashRouter } from 'react-router-dom';
<HashRouter><App /></HashRouter>

// Vue: เปลี่ยน history เป็น createWebHashHistory()
const router = createRouter({
  history: createWebHashHistory(),
  routes: [...]
})

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

คืออะไร? PHP = ภาษาโปรแกรมสำหรับทำเว็บ ทำงานบน Server มักมี Database (MySQL) ไปด้วย

🎯 เหมาะกับ: เว็บธุรกิจทั่วไป, CMS, ระบบสมาชิก, E-commerce, ระบบจอง

🗂️ ไฟล์ที่มักได้จาก AI

🏗️ 4 ขั้นตอนหลัก

// ตัวอย่าง config.php
$db_host = "localhost";
$db_name = "myapp_db";       // ชื่อ DB ที่สร้าง
$db_user = "myapp_user";     // Username
$db_pass = "รหัสผ่านที่ตั้ง"; // Password

🔧 แก้ไขปัญหาที่พบบ่อย

<!-- เพิ่มบรรทัดนี้ด้านบนสุดของ index.php -->
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>

Refresh เว็บ → จะเห็น Error Message → แก้ไขตาม Error

เช็ค config.php ว่า db_host = localhost, db_name/user/pass ตรงกับที่สร้างใน Plesk ไหม

📋 Laravel Framework — ขั้นตอนพิเศษ

🔒 SSL คืออะไร? ทำไมต้องมี?

SSL = ใบรับรอง "ความปลอดภัย" — ทำให้เว็บมี 🔒 HTTPS

🎁 Let's Encrypt = SSL ฟรี!

✅ ฟรี 100% | ✅ ติดตั้งง่าย กดปุ่มเดียว | ✅ ต่ออายุอัตโนมัติ | ✅ Browser ทุกตัวรองรับ

📋 ขั้นตอนการติดตั้ง (5 ขั้นตอน)

🧪 ทดสอบ SSL

• เปิด https://your-domain.com → ต้องเห็น 🔒
• เปิด http://your-domain.com → ต้องเด้งไป https:// อัตโนมัติ
• เช็คเพิ่มเติม: https://www.ssllabs.com/ssltest/ → เป้าหมาย Grade A

🔧 แก้ปัญหา SSL

หาไฟล์ http:// ในโค้ด → เปลี่ยนเป็น https:// หรือใช้ // (Protocol-relative)

Plesk → SSL/TLS → ลบ Certificate เก่า → ติดตั้ง Let's Encrypt ใหม่ → เปิด Auto-renewal
Let's Encrypt หมดอายุทุก 90 วัน, Plesk ต่ออายุให้อัตโนมัติ

เช็ค DNS ที่ https://dnschecker.org ว่า Domain ชี้ IP ถูกหรือยัง → อาจต้องรอ DNS Propagate 4–24 ชม.

ใช้ Checklist นี้ทุกครั้งหลัง Deploy เสร็จ! เป้าหมาย ผ่าน 90% ขึ้นไป = พร้อมเปิดตัว

📄 A. เนื้อหาและการทำงาน

• เว็บเปิดได้ที่ Domain หลัก + www
• หน้าทั้งหมดแสดงปกติ
• เนื้อหาถูกต้อง รูปแสดงครบ Logo ถูก
• ลิงก์ Navigation, CTA, Social, Footer ทำงาน

🎨 B. การออกแบบและ UX

• ดูสวยบน Desktop
• ดูสวยบน Mobile 📱 (สำคัญมาก!)
• ดูสวยบน Tablet (ถ้าเว็บธุรกิจ)

⚡ C. Performance

• เว็บโหลดเร็ว (< 3 วินาที) — ทดสอบที่ pagespeed.web.dev เป้า > 80
• รูปบีบอัดแล้ว (< 200KB/รูป)
• ไม่มี JS Error (เปิด Console F12)

🔒 D. ความปลอดภัย

• มี SSL/HTTPS 🔒
• Redirect HTTP → HTTPS
• ไม่มี Mixed Content
• Form มี CSRF Protection (ถ้ามี Form)

📱 E. ฟังก์ชันการทำงาน

• Form ส่งได้ (Contact, Newsletter)
• ระบบ Login/Logout/Register ทำงาน (ถ้ามี)
• Database บันทึก/แก้ไข/ลบ ได้

🔍 F. SEO & Marketing

• Title แต่ละหน้าไม่เหมือนกัน
• Meta Description มีครบ
• Favicon แสดงCorrectly
• Google Analytics ติดตั้ง (ถ้าต้องการ)

🌐 G. Browser & อุปกรণ์

• Chrome
• Safari (สำคัญ iPhone)
• Firefox
• Edge

📊 H. เครื่องมือทดสอบออนไลน์

📝 I. เอกสาร

• เก็บข้อมูล Login ไว้ปลอดภัย (Plesk, WP, DB, FTP)
• มี Backup ไฟล์ต้นฉบับ
• มีเอกสาร คู่มือ สำหรับลูกค้า (ถ้าจ้างคนทำ)

💾 ทำไมต้อง Backup?

ปัญหาเกิด → กด Restore
→ กลับมาใน 10 นาที! ✨

ปัญหาเกิด → ต้องทำใหม่ทั้งหมด
→ เสียเวลาหลายวัน 😭

📦 สิ่งที่ต้อง Backup

1. ไฟล์เว็บไซต์ — ทุกอย่างใน httpdocs
2. ฐานข้อมูล (Database) — ตาราง + ข้อมูล
3. การตั้งค่า — .htaccess, config.php, .env

🔧 วิธี Backup

วิธีที่ 1: Backup Manager (แนะนำ!)

วิธีที่ 2: File Manager (Manual — แค่ Files)

เข้า File Manager → เลือก httpdocs → คลิกขวา → Archive → Download .zip

วิธีที่ 3: phpMyAdmin (Manual — แค่ Database)

phpMyAdmin → แท็บ "Export" → Quick → Format: SQL → Go → บันทึก .sql ไว้

🔄 วิธี Restore

Backup Manager: เลือก Backup → "Restore" → ☑️ Files + Database → OK → รอ 2–10 นาที ✅

File Manager: Upload Backup.zip → Extract → Overwrite existing files → OK

phpMyAdmin: SQL → DROP DATABASE myapp_db; CREATE DATABASE myapp_db; → Import ไฟล์ .sql

⏰ Auto Backup

Backup Manager → "Schedule" → Frequency: Daily/Weekly → Time: 3:00 AM → Retention: 7 วัน → OK ✅

❌ 404 Not Found

หมายความว่า: Server หาไฟล์ที่ขอไม่เจอ

1. ไม่มี index.html/index.php → เч็ค httpdocs, Rename ไฟล์ หรือย้ายออกมา
2. URL สะกดผิด → เช็ค Typo
3. ลิงก์เสีย → แก้ลิงก์ ใช้ brokenlinkcheck.com
4. Clean URL ไม่ทำงาน → สร้าง .htaccess พร้อม RewriteEngine

❌ 500 Internal Server Error

หมายความว่า: Server เกิด Error ภายใน (เหมือนเครื่องจักรพัง)

1. Syntax Error ใน PHP → ดู Error Log (Plesk → Logs → Error Log) → แก้โค้ดตาม Error
2. .htaccess ผิด → เปลี่ยนชื่อเป็น .htaccess.bak → Refresh → ถ้าใช้ได้ = ปัญหาอยู่ที่ .htaccess
3. PHP Memory เต็ม → เพิ่มใน .htaccess: php_value memory_limit 256M
4. Permission ผิด → โฟลเดอร์ = 755, ไฟล์ = 644
5. PHP Version ไม่รองรับ → Plesk → PHP Settings → เลือก Version ที่เหมาะ

❌ 403 Forbidden

หมายความว่า: Server ไม่ให้เข้าถึง (เหมือนป้าย "ห้ามเข้า")

• เปลี่ยน Permission → 755 (โฟลเดอร์), 644 (ไฟล์)
• เช็ค .htaccess ว่ามี Deny from all ไหม → ลบออก
• เช็คว่ามี index.html / index.php หรือไม่

❌ Domain ไม่ชี้ (DNS_PROBE_FINISHED_NXDOMAIN)

หมายความว่า: Domain ยังไม่ชี้มาที่ Server

1. DNS ยังไม่ Propagate → รอ 4–48 ชั่วโมง เช็คที่ dnschecker.org
2. Nameserver ผิด → เข้าเว็บซื้อ Domain → เปลี่ยนเป็น ns1/ns2.hostatom.com
3. A Record ผิด → DNS Settings → เพิ่ม A Record ชี้ IP Server
4. Domain หมดอายุ → Renew Domain

❌ Connection Failed

Access denied for user / Could not connect to database

• เช็ค config.php: db_host = localhost, db_name/user/pass ตรงกับใน Plesk ไหม
• เช็คว่า User มี Access หรือยัง
• ลอง Reset รหัสผ่าน DB User
• รหัสผ่านมี Special Characters (' " $) → เปลี่ยนใหม่

❌ Import Database ไม่สำเร็จ

Import timed out / SQL Error

• ไฟล์ .sql ใหญ่เกิน → เพิ่ม Timeout: max_execution_time = 600 หรือใช้ SSH
• Character Encoding ผิด → เปิดใน Notepad++ → Convert to UTF-8 → Import ใหม่
• SQL Syntax Error → อ่าน Error → หาบรรทัดผิด → แก้

❌ Database Size เกินขีดจำกัด

Disk quota exceeded

• ลบข้อมูลไม่จำเป็น (Logs, Cache, Temporary)
• Optimize: OPTIMIZE TABLE table_name;
• Upgrade แพ็คเกจ Hosting

❌ Application Error / Cannot Start

Application failed to start / is not running

• เช็ค Node.js Settings → Application startup file ถูกหรือเปล่า
• เช็คโค้ดใช้ process.env.PORT หรือไม่
• ดู Logs → อ่าน Error → แก้ตาม Error

❌ Module Not Found

Cannot find module 'express'

• Node.js Settings → คลิก "NPM Install" → รอ → Restart App
• เช็ค package.json มี dependencies ครบไหม

❌ Port Conflict / EADDRINUSE

listen EADDRINUSE: address already in use :::3000

// ต้องมีบรรทัดนี้!
const PORT = process.env.PORT || 3000;
app.listen(PORT);

Save → Restart App

❌ Template Import ไม่สำเร็จ

File type not allowed / Upload failed

• เปิด Template Upload: Elementor → Settings → Advanced → Enable = Yes → Save
• เพิ่มขนาดอัพโหลด: php_value upload_max_filesize 64M ใน .htaccess

❌ หน้าว่างเปล่าหลัง Import

• เปิด Container: Elementor → Settings → Features → ☑️ Flexbox + Grid
• Regenerate CSS: Elementor → Tools → Regenerate Files
• Clear Cache → Refresh (Ctrl+F5)

❌ รูปภาพไม่แสดง

• Media → Add New → อัพโหลดรูปใหม่
• Edit with Elementor → คลิกรูป → Choose Image → เลือกรูปใหม่
• ติดตั้ง "Regenerate Thumbnails" plugin → Tools → Regenerate All

📊 ตารางสรุป — แก้ปัญหาเร็ว

💡 เทคนิคแก้ปัญหาทั่วไป

1. อ่าน Error Message ให้ดี — ไม่ต้องตื่นตระหนก
2. เช็ค Logs เสมอ — Plesk Logs, Console (F12), Node.js Logs
3. ลอง Disable Plugin — ปิดทีละอัน ดูตัวไหนเป็นสาเหตุ
4. Backup ก่อนแก้ไข — แก้ผิด → Restore ได้เลย
5. ค้นหาใน Google — Copy Error → Paste → มักมีคนเจอเดียวกัน
6. ถาม Community — Stack Overflow, Facebook Groups, Plesk Forum
7. ติดต่อ Support — Hostatom Support + แนบ Screenshot