Host Static Website บน Hosting ง่ายๆ

Host Static Website บน Shared Hosting อัพโหลด HTML CSS JS

Static Website คืออะไร ทำไมถึงน่าใช้

Static Website คือเว็บที่ประกอบด้วยไฟล์ HTML, CSS, และ JavaScript ล้วนๆ ไม่มี Server-Side Processing ไม่มี Database และไม่ต้องรัน PHP หรือ Python ทุกไฟล์ถูกส่งตรงจาก Hosting ไปยัง Browser ของผู้เยี่ยมชม

เมื่อเปรียบกับ WordPress:

เร็วกว่ามาก — ไม่มี Database Query ทุก Page Load ส่ง HTML สำเร็จรูปทันที
ปลอดภัยกว่า — ไม่มีช่องโหว่จาก Plugin หรือ CMS Database ที่แฮกเกอร์เจาะ
ค่าใช้จ่ายต่ำกว่า — ใช้ Hosting แบบถูกที่สุดก็เพียงพอ
บำรุงรักษาน้อย — ไม่ต้องอัพเดท Plugin หรือ Core

เหมาะสำหรับ: Landing Page, Portfolio, โบรชัวร์ออนไลน์, เว็บข้อมูลที่ไม่เปลี่ยนบ่อย, Documentation Site

เตรียมไฟล์ HTML/CSS/JS

โครงสร้างไฟล์พื้นฐานของ Static Website ควรเป็นดังนี้:

public_html/
├── index.html          ← หน้าหลัก
├── about.html
├── contact.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
│   ├── hero.jpg
│   └── logo.png
└── .htaccess           ← Config ต่างๆ

ต้องมีไฟล์ index.html ใน Root Directory เพราะ Web Server จะโหลดไฟล์นี้โดยอัตโนมัติเมื่อผู้เยี่ยมชมเข้ามาที่โดเมน

Upload ผ่าน FTP หรือ File Manager

วิธีที่ 1: File Manager ใน cPanel

Login cPanel → เข้า File Manager
ไปที่ public_html
กด Upload แล้วเลือกไฟล์ทั้งหมด หรือ Drag & Drop
รอให้ Upload เสร็จ แล้วกด Reload

วิธีที่ 2: FTP Client (FileZilla)

# เชื่อมต่อ FTP
Host: ftp.yourdomain.com
Username: yourftpuser
Password: yourpassword
Port: 21

# โฟลเดอร์ปลายทาง
/public_html/

ลาก Folder ทั้งหมดจาก Local ไป public_html บน Remote แล้วรอให้ Upload เสร็จ

ตั้งค่า SSL และ Force HTTPS

ไปที่ cPanel → SSL/TLS → AutoSSL แล้วเปิดใช้งาน Let's Encrypt Certificate ฟรี จากนั้นสร้างไฟล์ .htaccess ใน public_html พร้อมบังคับ HTTPS:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Custom Error Pages

สร้างหน้า Error แบบ Custom เพื่อประสบการณ์ผู้ใช้ที่ดีขึ้น เพิ่มใน .htaccess:

ErrorDocument 404 /404.html
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html

Cache Control Headers ใน .htaccess

ตั้งค่า Browser Cache เพื่อให้เว็บโหลดเร็วขึ้นสำหรับผู้ที่เคยเข้าชมแล้ว:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg  "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/png  "access plus 1 month"
  ExpiresByType image/webp "access plus 1 month"
  ExpiresByType text/css   "access plus 1 week"
  ExpiresByType application/javascript "access plus 1 week"
  ExpiresByType text/html  "access plus 1 hour"
</IfModule>

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

ตรวจสอบว่า Static Website ทำงานถูกต้อง

# ทดสอบว่าเว็บเปิดได้และ Redirect HTTPS
curl -I http://yourdomain.com

# ตรวจสอบ Response Headers และ Cache-Control
curl -I https://yourdomain.com/css/style.css

# วัด Load Time
curl -o /dev/null -s -w "Time: %{time_total}s\n" https://yourdomain.com

# ตรวจสอบ SSL Certificate
curl -vI https://yourdomain.com 2>&1 | grep -E "SSL|expire"

Tip: ใช้ Google PageSpeed Insights หรือ GTmetrix วัดคะแนน Static Website ของคุณ ปกติ Static Site ได้คะแนน 90+ โดยไม่ต้องทำอะไรเพิ่ม

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

Error: เปิดเว็บแล้วเจอ "403 Forbidden"

ปัญหานี้เกิดเมื่อไม่มีไฟล์ index.html ใน Directory หรือ Permission ของไฟล์ไม่ถูกต้อง ให้ตรวจสอบว่า index.html อยู่ใน public_html และ Permission เป็น 644 (ไฟล์) และ 755 (โฟลเดอร์)

CSS หรือ JS โหลดไม่ขึ้น (404 Not Found)

ตรวจสอบ Path ที่ใช้ใน HTML ว่าถูกต้องหรือไม่ ควรใช้ Relative Path เช่น ./css/style.css หรือ Absolute Path จาก Root เช่น /css/style.css แทนการใช้ Full URL

ไฟล์ที่ Upload มีชื่อพิมพ์ใหญ่แต่ Link พิมพ์เล็ก

Linux Server (cPanel ส่วนใหญ่) Case-Sensitive สำหรับชื่อไฟล์ ไฟล์ Image.jpg และ image.jpg คือคนละไฟล์ ควรใช้ตัวพิมพ์เล็กสำหรับชื่อไฟล์ทั้งหมดเพื่อป้องกันปัญหา

คำถามที่พบบ่อย

Q: Static Website ทำ SEO ได้ไหม?

A: ได้ดีมาก เพราะ Google สามารถ Crawl HTML ธรรมดาได้เร็วและง่าย ขอแค่ใส่ Title, Meta Description, Canonical Tag และ JSON-LD Schema ก็เพียงพอสำหรับ SEO พื้นฐาน

Q: Static Website รับข้อมูลจาก Form ได้ไหม?

A: ได้ แต่ต้องใช้บริการภายนอก เช่น Formspree, Netlify Forms, หรือ EmailJS ซึ่งรับ Submit ผ่าน JavaScript แล้วส่ง Email มาให้คุณ โดยไม่ต้องมี Server-Side Code

Q: อัพเดทเนื้อหาบ่อยๆ บน Static Website ลำบากไหม?

A: ลำบากกว่า CMS เล็กน้อยถ้าทำเอง แต่ถ้าใช้ Static Site Generator เช่น Hugo หรือ Jekyll จะสะดวกมาก หรือถ้าเนื้อหาไม่ได้เปลี่ยนบ่อย การแก้ HTML โดยตรงก็ทำได้ไม่ยาก