Linux Server Deployment & SSH Mastery · Урок

Размещение статических веб-сайтов

Настройте выбранный веб-сервер для обслуживания статических файлов HTML, CSS и JavaScript, сделав свой первый веб-сайт доступным.

«Размещение статических веб-сайтов» — бесплатный урок Linux Server Deployment & SSH Mastery на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Linux Server Deployment & SSH Mastery, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Linux Server Deployment & SSH Mastery содержит 4 уроков всего.

Что такое статические website

Добро пожаловать! В этом уроке мы узнаем, как разместить простой website в интернете.

Статический website состоит из таких файлов, как HTML, CSS и JavaScript, которые передаются браузеру пользователя точно в том виде, в каком они хранятся на сервере.

Обработка на стороне сервера отсутствует (например, с помощью PHP или Python).
Быстрый, безопасный и простой в размещении.
Отлично подходит для портфолио, блогов и простых информационных сайтов.

Создание первого файла HTML

Создадим очень простой файл index.html. Он будет главной страницей нашего статического website.

Обычно этот файл создают на сервере, например с помощью текстового редактора 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!');
});

Настройка веб-каталога

Нам нужно выделить на сервере место для хранения этих файлов website. Обычно для этого используют каталог внутри /var/www/.

Сначала создайте каталог для website. Затем скопируйте в него файлы 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 использует серверные блоки (аналог виртуальных хостов Apache) для задания конфигурации отдельных website.

Каждый серверный блок принимает запросы на определённом порте (например, на порте 80 для HTTP) и отвечает на них в зависимости от имени домена.

Обычно находятся в /etc/nginx/sites-available/.
Активируются созданием символической ссылки в /etc/nginx/sites-enabled/.

Nginx: директивы root и index

Внутри серверного блока две важные директивы указывают Nginx, где искать Ваши файлы:

root: задаёт абсолютный путь к файлам website. Именно здесь 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: аналог виртуального хоста

Если Вы используете Apache, концепция похожа: применяются виртуальные хосты. Вам потребуется создать файл конфигурации (например, /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

Проверка работающего website

Отличная работа! Теперь Ваш статический website должен быть доступен.

Откройте веб-браузер и перейдите по 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 попытается передать первым?

Итоги: размещение статических сайтов

Вы успешно научились размещать статический website!

Мы рассмотрели:

Создание базовых файлов HTML, CSS и JS.
Настройку отдельного каталога для содержимого website.
Настройку серверных блоков Nginx (или виртуальных хостов Apache) с использованием root/DocumentRoot и index/DirectoryIndex.
Активацию и перезагрузку веб-сервера.
Проверку работающего website в браузере.

Далее мы рассмотрим настройку виртуальных хостов для размещения нескольких website на одном сервере!

Часто задаваемые вопросы

Урок «Размещение статических веб-сайтов» бесплатный?

Да — полный текст урока «Размещение статических веб-сайтов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Linux Server Deployment & SSH Mastery, подпишись на CoddyKit PRO. Курс Linux Server Deployment & SSH Mastery содержит 4 уроков всего.

Чему я научусь в уроке «Размещение статических веб-сайтов»?

Настройте выбранный веб-сервер для обслуживания статических файлов HTML, CSS и JavaScript, сделав свой первый веб-сайт доступным. Ты практикуешь Linux Server Deployment & SSH Mastery с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 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 — локальная установка не требуется.

Все уроки этого курса

← Назад к Linux Server Deployment & SSH Mastery