0Pricing
Linux Server Deployment & SSH Mastery · บทเรียน

การโฮสต์เว็บไซต์แบบสแตติก

ตั้งค่าเว็บเซิร์ฟเวอร์ที่เลือกให้ให้บริการไฟล์ HTML, CSS และ JavaScript แบบสแตติก เพื่อให้เว็บไซต์แรกของคุณเข้าถึงได้

การโฮสต์เว็บไซต์แบบสแตติก เป็นบทเรียน Linux Server Deployment & SSH Mastery ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Linux Server Deployment & SSH Mastery และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Linux Server Deployment & SSH Mastery มีบทเรียนทั้งหมด 4 บทเรียน

เว็บไซต์แบบคงที่คืออะไร

ยินดีต้อนรับ ในบทเรียนนี้ เราจะเรียนรู้วิธีนำเว็บไซต์แบบง่ายของคุณขึ้นออนไลน์

เว็บไซต์แบบคงที่ ประกอบด้วยไฟล์อย่าง HTML, CSS และ JavaScript ซึ่งส่งไปยังเบราว์เซอร์ของผู้ใช้ในรูปแบบเดียวกับที่จัดเก็บไว้บนเซิร์ฟเวอร์

  • ไม่มีการประมวลผลฝั่งเซิร์ฟเวอร์ (เช่น PHP หรือ Python)
  • ทำงานรวดเร็ว ปลอดภัย และโฮสต์ได้ง่าย
  • เหมาะอย่างยิ่งสำหรับแฟ้มผลงาน บล็อก หรือเว็บไซต์ให้ข้อมูลแบบง่าย

สร้างไฟล์ HTML ไฟล์แรกของคุณ

มาสร้างไฟล์ index.html ที่เรียบง่ายมากกัน ไฟล์นี้จะเป็นหน้าหลักของเว็บไซต์แบบคงที่ของเรา

โดยทั่วไปคุณจะสร้างไฟล์นี้บนเซิร์ฟเวอร์ เช่น ใช้โปรแกรมแก้ไขข้อความอย่าง nano หรือ vim

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

เพิ่ม CSS และ JavaScript

ไฟล์ HTML ของเราอ้างอิง style.css และ script.js มาสร้างไฟล์ทั้งสองนี้ด้วย เพื่อให้เว็บไซต์พื้นฐานของเราเสร็จสมบูรณ์

ไฟล์เหล่านี้จะอยู่ในไดเรกทอรีเดียวกับ index.html

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

ตั้งค่าไดเรกทอรีเว็บของคุณ

เราต้องมีตำแหน่งเฉพาะบนเซิร์ฟเวอร์สำหรับจัดเก็บไฟล์เว็บไซต์เหล่านี้ ตำแหน่งที่ใช้กันทั่วไปคือภายใน /var/www/

ขั้นแรก ให้สร้างไดเรกทอรีสำหรับเว็บไซต์ของคุณ จากนั้นคัดลอกไฟล์ index.html, style.css และ script.js ลงในไดเรกทอรีนั้น

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx: พื้นฐานบล็อกเซิร์ฟเวอร์

Nginx ใช้บล็อกเซิร์ฟเวอร์ (แนวคิดคล้ายกับ Virtual Hosts ของ Apache) เพื่อกำหนดการตั้งค่าสำหรับเว็บไซต์แต่ละแห่ง

บล็อกเซิร์ฟเวอร์แต่ละบล็อกจะรอรับคำขอที่พอร์ตหนึ่ง (เช่น 80 สำหรับ HTTP) และตอบกลับตามชื่อโดเมน

  • โดยทั่วไปจะอยู่ใน /etc/nginx/sites-available/
  • เปิดใช้งานโดยสร้างลิงก์สัญลักษณ์ไปยัง /etc/nginx/sites-enabled/

Nginx: คำสั่ง root และ index

ภายในบล็อกเซิร์ฟเวอร์ มีคำสั่งสำคัญสองคำสั่งที่บอก Nginx ว่าจะค้นหาไฟล์ของคุณที่ใด:

  • root: ระบุพาธแบบสัมบูรณ์ไปยังไฟล์เว็บไซต์ของคุณ ซึ่งเป็นตำแหน่งที่ Nginx จะใช้ค้นหาเนื้อหา
  • index: กำหนดไฟล์เริ่มต้นที่ Nginx ควรส่งเมื่อมีการร้องขอไดเรกทอรี (เช่น เมื่อมีผู้เข้าชม yourdomain.com/ Nginx จะค้นหา index.html)

Nginx: การกำหนดค่าเว็บไซต์แบบคงที่ทั้งหมด

ต่อไปนี้คือการกำหนดค่าบล็อกเซิร์ฟเวอร์ Nginx แบบสมบูรณ์สำหรับเว็บไซต์แบบคงที่ของเรา ให้บันทึกเป็น /etc/nginx/sites-available/mywebsite.conf

อย่าลืมแทนที่ your_domain.com ด้วยโดเมนจริงหรือที่อยู่ IP ของเซิร์ฟเวอร์

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Apache: เทียบเท่า Virtual Host

หากคุณใช้ Apache แนวคิดจะคล้ายกันโดยใช้ Virtual Hosts คุณจะสร้างไฟล์กำหนดค่า (เช่น /etc/apache2/sites-available/mywebsite.conf)

คำสั่งสำคัญคือ DocumentRoot (เทียบเท่ากับ root ของ Nginx) และ DirectoryIndex (เทียบเท่ากับ index ของ Nginx)

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

เปิดใช้งานและโหลดเซิร์ฟเวอร์ของคุณใหม่

หลังจากสร้างไฟล์กำหนดค่าแล้ว คุณต้องเปิดใช้งานไฟล์นั้นและโหลดเว็บเซิร์ฟเวอร์ใหม่ เพื่อให้การเปลี่ยนแปลงมีผล

  • สำหรับ Nginx: สร้างลิงก์สัญลักษณ์และโหลดใหม่
  • สำหรับ Apache: เปิดใช้งานเว็บไซต์และโหลดใหม่
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

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

ทำได้ดีมาก ตอนนี้เว็บไซต์แบบคงที่ของคุณควรเข้าถึงได้แล้ว

เปิดเบราว์เซอร์และไปยังที่อยู่ IP ของเซิร์ฟเวอร์ หรือชื่อโดเมนที่คุณกำหนดค่าไว้

คุณควรเห็นข้อความ "Hello CoddyKit!" ของคุณ

ตรวจสอบความเข้าใจอย่างรวดเร็ว: คำสั่ง Nginx

พิจารณาส่วนของบล็อกเซิร์ฟเวอร์ Nginx ต่อไปนี้:

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

หากผู้ใช้ไปยัง http://example.com/ Nginx จะพยายามส่งไฟล์ใดก่อน

ทบทวน: การโฮสต์เว็บไซต์แบบคงที่

คุณเรียนรู้วิธีโฮสต์เว็บไซต์แบบคงที่สำเร็จแล้ว

เราได้ครอบคลุมหัวข้อต่อไปนี้:

  • การสร้างไฟล์ HTML, CSS และ JS พื้นฐาน
  • การตั้งค่าไดเรกทอรีเฉพาะสำหรับเนื้อหาเว็บไซต์
  • การกำหนดค่าบล็อกเซิร์ฟเวอร์ Nginx (หรือ Virtual Hosts ของ Apache) โดยใช้ root/DocumentRoot และ index/DirectoryIndex
  • การเปิดใช้งานและโหลดเว็บเซิร์ฟเวอร์ใหม่
  • การทดสอบเว็บไซต์ที่เปิดใช้งานจริงในเบราว์เซอร์

ต่อไปเราจะสำรวจวิธีกำหนดค่าโฮสต์เสมือนเพื่อโฮสต์เว็บไซต์หลายแห่งบนเซิร์ฟเวอร์เครื่องเดียว

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

บทเรียน “การโฮสต์เว็บไซต์แบบสแตติก” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การโฮสต์เว็บไซต์แบบสแตติก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Linux Server Deployment & SSH Mastery ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Linux Server Deployment & SSH Mastery มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การโฮสต์เว็บไซต์แบบสแตติก”

ตั้งค่าเว็บเซิร์ฟเวอร์ที่เลือกให้ให้บริการไฟล์ HTML, CSS และ JavaScript แบบสแตติก เพื่อให้เว็บไซต์แรกของคุณเข้าถึงได้ คุณปฏิบัติ Linux Server Deployment & SSH Mastery ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Linux Server Deployment & SSH Mastery หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Linux Server Deployment & SSH Mastery บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การโฮสต์เว็บไซต์แบบสแตติก” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Linux Server Deployment & SSH Mastery นี้ได้ไหม

ได้ บทเรียน Linux Server Deployment & SSH Mastery ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การติดตั้ง Nginx/Apache
  2. การโฮสต์เว็บไซต์แบบสแตติก
  3. การตั้งค่าโฮสต์เสมือนเบื้องต้น
  4. การเปิดใช้ HTTPS ด้วย Let's Encrypt
← กลับไปที่ Linux Server Deployment & SSH Mastery