Додавання статичного сайту

ServBay — це потужний локальний інструмент для веб-розробки, що підтримує різні мови програмування та бази даних. Окрім динамічних сайтів, ServBay ідеально підходить для хостингу та тестування статичних сайтів, таких як прості веб-сторінки чи фронтенд-додатки на HTML, CSS і JavaScript.

У цій статті ви дізнаєтеся, як додати й налаштувати статичний сайт у ServBay.

Огляд

Статичний сайт складається з файлів, що видаються веб-сервером напряму, без виконання серверних скриптів (наприклад, PHP, Node.js, Python тощо). Ці сайти зазвичай містять HTML-сторінки, CSS-стилі, JavaScript-файли, зображення, шрифти та інші ресурси.

Хостинг статичного сайту локально за допомогою ServBay дозволяє зручно розробляти, налагоджувати та тестувати проєкти, особливо коли потрібно імітувати справжнє доменне ім’я, перевірити HTTPS-з'єднання або протестувати крос-доменний доступ (CORS).

Сфери застосування

Розробка й тестування фронтенд-проєктів (HTML/CSS/JS).
Хостинг статичних сайтів-документацій чи блогів.
Тестування поведінки різних веб-серверів (Caddy/Nginx) щодо роботи з статичними ресурсами.
Моделювання справжнього доменного імені та HTTPS-дій на локальній машині.
Тестування збірок фронтенд-фреймворків (React, Vue, Angular).

Необхідні умови

Ви вже встановили та запускаєте ServBay на macOS.
Ви маєте всі файли статичного сайту для розгортання.

Послідовність дій

Виконайте наступні кроки, щоб додати свій статичний сайт у ServBay:

Крок 1: Підготуйте файли вашого сайту

Переконайтеся, що всі файли вашого сайту (наприклад, index.html, style.css, script.js тощо) зберігаються в окремій папці.

Рекомендується створити каталог сайту у стандартній кореневій директорії ServBay /Applications/ServBay/www — це допоможе підтримувати порядок. Наприклад, для сайту my-static-site створіть папку з такою ж назвою у /Applications/ServBay/www/ та скопіюйте туди всі файли.

bash

# Створення демонстраційного каталогу через термінал
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Створення простого index.html
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад статичного сайту на ServBay</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>Вітаємо! Статичний сайт на ServBay успішно налаштовано!</h1>
    <p>Ви переглядаєте цю локальну сторінку через ServBay.</p>
</body>
</html>' > index.html

# Тепер ваша структура файлів схожа на таку:
# /Applications/ServBay/www/servbay-static-demo/index.html

Крок 2: Додайте сайт у ServBay

Запустіть додаток ServBay.
У лівому меню відкрийте розділ Сайти (зверніть увагу: у старих версіях це може бути "Хости", у нових — "Сайти").
У нижній частині списку сайтів натисніть кнопку Додати — відкриється вікно налаштувань.

Крок 3: Налаштуйте параметри сайту

У відкритому вікні вкажіть або виберіть наступну інформацію:

Домен (Domain): Введіть домен, за яким хочете відкривати сайт локально. Рекомендується використовувати домени з суфіксом .servbay.demo, наприклад, static.servbay.demo або my-static-site.servbay.demo. ServBay самостійно налаштовує локальну розвʼязку таких доменів — редагувати файл hosts не потрібно.
- Пояснення: Завдяки доменам .servbay.demo уникаєте конфлікту з реальними онлайн-доменами, а вбудований DNS-resolver ServBay гарантує, що вони "показують" саме на ваш комп’ютер.
Шлях (Path): Натисніть на іконку папки справа та виберіть директорію з вашими файлами зі створеного в Кроці 1 каталогу, наприклад, /Applications/ServBay/www/servbay-static-demo/.
- Пояснення: Шлях — це коренева папка (Document Root) для файлів вашого сайту, яку використовуватиме сервер (Caddy або Nginx). Після відкриття http://static.servbay.demo/ сервер спочатку шукатиме тут файл index.html або інший стартовий файл. Переконайтеся, що вибраний каталог містить весь сайт, а не окремий файл (index.html).
Порт (Port): Залиште за замовчуванням. HTTP — порт 80, HTTPS — порт 443. За необхідності можна вказати інший порт.
Веб-сервер (Web Server): Оберіть сервер, який хочете використати. Для статичних сайтів гарно підходять Caddy та Nginx.
- Caddy: Проста конфігурація, підтримка HTTP/2 і автоматичне налаштування HTTPS (разом із ServBay User CA). Це рекомендований варіант за замовчуванням.
- Nginx: Відзначається високою продуктивністю, гнучкістю та широко використовується в продакшені.
- Оберіть один із цих варіантів.
Версія PHP (PHP Version): Для статичного сайту PHP не потрібен. Виберіть None.
Версія Node.js (Node.js Version): Для статичного сайту не потрібен. Виберіть None.
Версія Python (Python Version): Для статичного сайту не потрібен. Виберіть None.
Версія Go (Go Version): Для статичного сайту не потрібен. Виберіть None.
Версія Java (Java Version): Для статичного сайту не потрібен. Виберіть None.
SSL: Щоб відкрити сайт локально через HTTPS, відмітьте цю опцію. ServBay автоматично створить і довірить локальний SSL-сертифікат за допомогою ServBay User CA, що зручно для тестування захищених з’єднань.
CORS: Якщо сайт потребує крос-доменного доступу (напр., ви завантажуєте шрифти чи API з іншого локального домену), активуйте цю опцію й додайте налаштування. ServBay дозволяє гнучко налаштувати CORS-заголовки.

Крок 4: Збережіть налаштування та застосуйте зміни

Після введення всіх параметрів натисніть кнопку Зберегти внизу вікна.
Поверніться до списку сайтів в інтерфейсі ServBay, де ви побачите щойно доданий сайт.
Натисніть кнопку Застосувати зміни у верхній частині сторінки.
- Пояснення: Цим ви оновлюєте конфігурації веб-сервера (Caddy або Nginx), і новий сайт стане доступним. Без цього кроку тільки-но доданий сайт працювати не буде!

Перевірка налаштувань

Після застосування змін відкрийте веб-браузер і введіть вибраний домен (наприклад, http://static.servbay.demo або https://static.servbay.demo, якщо ввімкнений SSL).

Якщо все зроблено правильно — побачите контент вашого сайту, наприклад, тестову сторінку index.html, яку створили у прикладі.

Зверніть увагу

Перевіряйте, чи в полі шлях вказано кореневу папку сайту.
Після додавання, видалення чи змін у конфігураціях сайтів не забудьте натиснути Застосувати зміни.
Для статичних сайтів оптимально виставляти серверні мови (PHP, Node.js тощо) як None — це економить ресурси і зменшує ризики.
У разі виникнення труднощів з доступом переконайтеся, що ServBay запущено, сервер (Caddy/Nginx) працює, а в браузері прописано точний домен, як налаштовано в ServBay.

Часті питання (FAQ)

Пит.: Чому при спробі доступу до сайту пише “неможливо знайти сайт” або “сервер не знайдено”?

Відповідь:

Перевірте, що програма ServBay запущена.
Переконайтеся, що натиснули Застосувати зміни після конфігурації.
Перевірте, що введений у браузері домен повністю збігається з налаштованим у ServBay (включаючи протокол — http:// чи https://).
Переконайтеся, що шлях вказує на правильний каталог з файлами сайту.
Ознайомтеся з логами ServBay — можливо, знайдете додаткову інформацію про помилку.

Пит.: Чому замість моєї index.html відкривається список файлів у каталозі?

Відповідь: Зазвичай це означає, що у корені сайту немає стартового файлу (наприклад, index.html). Перевірте наявність файлу з такою самою назвою (враховуючи регістр і розширення).

Пит.: Чи можна налаштувати HTTPS для статичного сайту?

Відповідь: Так, достатньо відмітити пункт SSL у налаштуваннях сайту. ServBay автоматично створить і довірить SSL-сертифікат для вашого локального домену, що дозволить користуватися HTTPS.

Підсумок

Завдяки ServBay ви зможете легко додавати й адмініструвати статичні файли на локальній машині — від простих HTML-сторінок до повноцінного фронтенду. Зручний менеджмент сайтів, локальна доменна ідентифікація та підтримка SSL у ServBay забезпечать результативну розробку й тестування сучасних веб-інтерфейсів.

Додавання статичного сайту ​

Огляд ​

Сфери застосування ​

Необхідні умови ​

Послідовність дій ​

Крок 1: Підготуйте файли вашого сайту ​

Крок 2: Додайте сайт у ServBay ​

Крок 3: Налаштуйте параметри сайту ​

Крок 4: Збережіть налаштування та застосуйте зміни ​

Перевірка налаштувань ​

Зверніть увагу ​

Часті питання (FAQ) ​

Підсумок ​