Статический хостинг – это способ размещения веб-сайтов, состоящих из HTML, CSS, JavaScript и медиафайлов, в облачных хранилищах (бакетах). Это дешевая и эффективная альтернатива традиционному веб-хостингу.
Предварительные настройки
- Должен быть создан бакет в интерфейсе ЛКК – https://console.inferit.cloud/storage . В данном примере использован test-bucket-inferit.
- Для пользователя, от имени которого создавался бакет, должен быть известен Access Key и Secret Key. Эти данные показываются при создании пользователя.
Пример простого статического сайта из 4 файлов
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой статический сайт</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<main>
<section class="content">
<p>Это пример статического сайта, размещенного в облачном хранилище.</p>
<button id="cta-button">Нажми меня</button>
<p id="message"></p>
</section>
</main>
<footer>
<p>© 2026 Мой статический сайт</p>
</footer>
<script src="script.js"></script>
</body>
</html>style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
header {
background-color: #4CAF50;
color: white;
padding: 2rem;
text-align: center;
border-radius: 8px;
margin-bottom: 2rem;
}
.content {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 1rem;
}
button:hover {
background-color: #45a049;
}
footer {
text-align: center;
padding: 1rem;
color: #666;
font-size: 0.9rem;
}script.js
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('cta-button');
const message = document.getElementById('message');
button.addEventListener('click', function() {
message.textContent = 'Вы успешно нажали кнопку! Сайт работает корректно.';
message.style.color = '#4CAF50';
});
});error.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>404 - Не найдено</title>
</head>
<body style="text-align: center; padding: 50px; font-family: Arial;">
<h1 style="color: red; font-size: 80px;">404</h1>
<h2>Страница не найдена</h2>
<p>Запрашиваемая страница не существует.</p>
<p><a href="/" style="color: blue;">Вернуться на главную</a></p>
</body>
</html>Создание хостинга для статического сайта
Настройка бакета через AWS CLI
Установка на Linux
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
sudo apt install unzip
unzip awscliv2.zip
sudo ./aws/install
aws --versionУстановка на Windows
msiexec.exe /i https://awscli.amazonaws.com/AWSCLIV2.msiНастройка утилиты
aws configure
# Ввести:
# AWS Access Key ID: YOUR_ACCESS_KEY
# AWS Secret Access Key: YOUR_SECRET_KEY
# Default region name: None
# Default output format: json
# Добавить эндпоинт в конфигурацию
aws configure set endpoint_url https://s3.inferit.cloud
# Проверить работу загрузив список бакетов
aws s3api list-bucketsПри проблемах вывести текущую конфигурацию (aws configure list) и проверить настройки файлов (~/.aws/config и ~/.aws/credentials).
Настройка бакета
Указываем политики доступа для бакета, чтобы сделать его публичным.
- Создаем файл bucket-rule-1.json и меняем имя бакета test-bucket-inferit на требуемое.
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::test-bucket-inferit/*" } ] } - Применяем конфигурацию заменив имя бакета test-bucket-inferit на требуемое. Запускать нужно в той же директории, где и сам файл лежит.
aws s3api put-bucket-policy --bucket test-bucket-inferit --policy file://bucket-rule-1.json
Загружаем файлы сайта и устанавливаем им правильные Content-Type заголовки
Для этого в терминале переходим в директорию с файлами сайта и выполняем команды заменив в них имя бакета test-bucket-inferit на нужное.
aws s3 cp index.html s3://test-bucket-inferit/ --content-type "text/html"
aws s3 cp error.html s3://test-bucket-inferit/ --content-type "text/html"
aws s3 cp style.css s3://test-bucket-inferit/ --content-type "text/css"
aws s3 cp script.js s3://test-bucket-inferit/ --content-type "application/javascript"После этого можно проверять работу сайта. Адрес для доступа будет выглядеть примерно так: https://s3.inferit.cloud/test-bucket-inferit/index.html
Результаты отображения тестового сайта показаны на скриншоте ниже.
