0Pricing
Linux Server Deployment & SSH Mastery · Pelajaran

Menghosting Situs Web Statis

Konfigurasikan server web pilihan Anda untuk menyajikan berkas HTML, CSS, dan JavaScript statis sehingga situs web pertama Anda dapat diakses.

Menghosting Situs Web Statis adalah pelajaran Linux Server Deployment & SSH Mastery gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Linux Server Deployment & SSH Mastery, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Linux Server Deployment & SSH Mastery mencakup 4 pelajaran total.

Apa Itu Website Statis?

Selamat datang! Dalam pelajaran ini, kita akan mempelajari cara membuat website sederhana Anda tersedia secara online.

Website statis tersusun dari file seperti HTML, CSS, dan JavaScript yang dikirimkan ke peramban pengguna persis seperti saat disimpan di server.

  • Tidak ada pemrosesan di sisi server (seperti PHP atau Python).
  • Cepat, aman, dan mudah di-host.
  • Sempurna untuk portofolio, blog, atau situs informasi sederhana.

Membuat File HTML Pertama Anda

Mari kita buat file index.html yang sangat sederhana. File ini akan menjadi halaman utama website statis kita.

Biasanya, Anda membuat file ini di server. Misalnya, dengan menggunakan penyunting teks seperti nano atau 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>

Menambahkan CSS dan JavaScript

File HTML kita merujuk ke style.css dan script.js. Mari kita buat keduanya juga untuk melengkapi situs dasar kita.

File-file ini akan berada di direktori yang sama dengan 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!');
});

Menyiapkan Direktori Web Anda

Kita memerlukan tempat khusus di server untuk menyimpan file website ini. Lokasi yang umum adalah di dalam /var/www/.

Pertama, buat direktori untuk website Anda. Kemudian, salin file index.html, style.css, dan script.js ke dalamnya.

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: Dasar-Dasar Blok Server

Nginx menggunakan blok server (mirip dengan Virtual Host milik Apache) untuk menentukan konfigurasi bagi website tertentu.

Setiap blok server mendengarkan permintaan pada sebuah port (seperti 80 untuk HTTP) dan merespons berdasarkan nama domain.

  • Biasanya ditemukan di /etc/nginx/sites-available/.
  • Diaktifkan dengan membuat tautan simbolis ke /etc/nginx/sites-enabled/.

Nginx: Direktif Root & Index

Di dalam blok server, dua direktif penting memberi tahu Nginx tempat menemukan file Anda:

  • root: Menentukan jalur absolut ke file website Anda. Di sinilah Nginx akan mencari konten.
  • index: Menentukan file default yang harus disajikan Nginx ketika sebuah direktori diminta (misalnya, saat seseorang mengunjungi yourdomain.com/, Nginx akan mencari index.html).

Nginx: Konfigurasi Lengkap Situs Statis

Berikut konfigurasi blok server Nginx lengkap untuk situs statis kita. Simpan sebagai /etc/nginx/sites-available/mywebsite.conf.

Ingatlah untuk mengganti your_domain.com dengan domain sebenarnya atau alamat IP server Anda.

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: Padanan Virtual Host

Jika Anda menggunakan Apache, konsepnya serupa dengan Virtual Host. Anda akan membuat file konfigurasi (misalnya, /etc/apache2/sites-available/mywebsite.conf).

Direktif utamanya adalah DocumentRoot (seperti root milik Nginx) dan DirectoryIndex (seperti index milik 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>

Mengaktifkan & Memuat Ulang Server

Setelah membuat file konfigurasi, Anda perlu mengaktifkannya dan memuat ulang server web agar perubahan diterapkan.

  • Untuk Nginx: Buat tautan simbolis dan muat ulang.
  • Untuk Apache: Aktifkan situs dan muat ulang.
# 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

Menguji Website Langsung Anda

Bagus! Website statis Anda sekarang seharusnya dapat diakses.

Buka peramban web Anda dan kunjungi alamat IP server atau nama domain yang telah Anda konfigurasi.

Anda seharusnya melihat pesan "Hello CoddyKit!"!

Pemeriksaan Singkat: Direktif Nginx

Perhatikan cuplikan blok server Nginx berikut:

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

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

Jika pengguna mengunjungi http://example.com/, file mana yang akan pertama kali coba disajikan oleh Nginx?

Ringkasan: Meng-host Situs Statis

Anda telah berhasil mempelajari cara meng-host website statis!

Materi yang telah kita bahas:

  • Membuat file HTML, CSS, dan JS dasar.
  • Menyiapkan direktori khusus untuk konten website.
  • Mengonfigurasi blok server Nginx (atau Virtual Host Apache) menggunakan root/DocumentRoot dan index/DirectoryIndex.
  • Mengaktifkan dan memuat ulang server web.
  • Menguji website langsung di peramban.

Selanjutnya, kita akan mempelajari cara mengonfigurasi virtual host untuk meng-host beberapa website di satu server!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menghosting Situs Web Statis” gratis?

Ya — teks lengkap “Menghosting Situs Web Statis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Linux Server Deployment & SSH Mastery, upgrade ke CoddyKit PRO. Kursus Linux Server Deployment & SSH Mastery mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menghosting Situs Web Statis”?

Konfigurasikan server web pilihan Anda untuk menyajikan berkas HTML, CSS, dan JavaScript statis sehingga situs web pertama Anda dapat diakses. Kamu berlatih Linux Server Deployment & SSH Mastery dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Linux Server Deployment & SSH Mastery?

Tidak diperlukan pengalaman sebelumnya. Linux Server Deployment & SSH Mastery di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Menghosting Situs Web Statis” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Linux Server Deployment & SSH Mastery ini?

Ya. Setiap pelajaran Linux Server Deployment & SSH Mastery menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Memasang Nginx/Apache
  2. Menghosting Situs Web Statis
  3. Konfigurasi Dasar Host Virtual
  4. Mengaktifkan HTTPS dengan Let's Encrypt
← Kembali ke Linux Server Deployment & SSH Mastery