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

Статический сайт (сайты-визитки, блоги, каталоги товаров, онлайн-документация к программным продуктам и техническим устройствам) представляет собой набор файлов (HTML, JS, графика, шрифты), размещенных на сервере. Страницы таких сайтов можно создавать и редактировать в любом текстовом редакторе.

Наше облачное хранилище представляет собой в том числе и удобную площадку для статических сайтов со следующими преимуществами:

  • указание индексного файла;

  • указание страницы ошибки;

  • листинг директории (plain и JSON) c возможностью задания собственного CSS;

  • просмотр статистики по запросам;

  • управление заголовками для кэширования;

  • создание страниц, на которых пользователи могут загрузить на сайт свои файлы;

  • организация просмотра изображений в виде фотогалереи;

  • прикрепление доменов второго уровня;

  • низкая стоимость использования — от 1 рубля в месяц.

Облачное хранилище Selectel также представляет собой удобную площадку для хостинга SPA. Процедура размещения SPA аналогична процедуре размещения статических сайтов.

Размещение сайта

Шаг 1: создаем публичный контейнер

Открываем панель управления под своей учетной записью.

Выберем в главном меню раздел Облачное хранилище.

image

Создаем публичный контейнер по кнопке Новый контейнер.

Шаг 2: настраиваем специальные страницы

Далее надо настроить специальные страницы — индексный файл и файл ошибки.

Перейдите на вкладку Настройки контейнера и выберите соответствующий пункт:

image

Откроется окно настройки специальных страниц:

image

В поле Индексный файл указываем путь к файлу «index.html», который будет загружаться при обращении пользователя напрямую к какой-либо директории.

Путь к индексному файлу может быть абсолютным и относительным (без символа / в начале):

  • Абсолютный путь указывает на строго определенное расположение файла, вне зависимости от текущей рабочей папки или других обстоятельств и всегда начинается с корневого контейнера.

  • Относительный путь прописывается не с корневого каталога, а с конца, то есть сначала система будет искать файл «index.html» в ближайшей к концу пути папке, если в ней такого файла нет, то будет пользователю будет отдан соответствующий файл из корневого каталога.

Создадим в текстовом редакторе файл и напишем в нем, например, следующий текст:

<html>
 <body>
   <h1>Hello, world!</h1>
 </body> 
</html>

Затем сохраним его под именем «index.html».

Загрузим его в контейнер, а затем выберем в качестве индексного.

Если мы введем в строку браузера адрес типа «http://xxxxx.selcdn.ru/site/», то увидим индексную страницу с текстом «Hello, world!», сохраненным нами в соответствующем файле.

В поле Ошибка 404 прописываем путь к файлу, который будет отдан пользователю в случае, если тот запросит несуществующую страницу.

Создадим в текстовом редакторе файл с текстом «Page not found» и сохраним его под именем «error.html».

Затем укажем его в качестве файла ошибки. Если мы укажем путь в адресной строке браузера путь к заведомо несуществующей странице (например, «http://xxxxx. selcdn.ru/site/1»), то мы будем перенаправлены на указанную нами страницу ошибки, и на экране будет отображен текст «Page not found».

Также указывать ссылку на любой внешний ресурс (если, например, будет указана ссылка на сайт «http://example.com», то при ошибке 404 пользователь будет перенаправлен именно на него). 

Можно настроить сортировку выводимого списка файлов указанного каталога:

  • По имени;

  • По размеру;

  • От старых к новым;

  • От новых к старым.

По умолчанию список выводится в стандартизированной форме.

Для сортировки добавьте путь к файлу стилей с указанием CSS в поле Файл стилей листинга.

Для страниц с index.html стили CSS указываются прямо в этом html-файле. 

image

Шаг 3: прикрепляем домен

Теперь нужно прикрепить к контейнеру домен. Выбираем пункт Управление доменами:

image

Все хранимые в контейнере файлы будут доступны по имени прикрепленного домена. Если, например, к контейнеру «my_images» привязать домен «images.example.com», то все файлы из этого контейнера будут доступны по адресу «http://images.example.com».

Прежде чем прикреплять домен, нужно обязательно внести в DNS необходимые записи.

К контейнерам можно прикреплять домены второго уровня. Для этого в DNS нужно внести А-запись (для IPv6-адресов — АААА-запись), ссылающуюся на адреса, указанные в панели управления.

Шаг 4: загружаем файлы

Задав все основные настройки, поместим в контейнер файлы для будущего сайта.

Управление HTTP-заголовками

В облачном хранилище предусмотрена возможность управления http-заголовками для кэширования.

Выберем в настройках контейнера пункт HTTP-заголовки.

Обратите особое внимание на заголовки Expires и Cache-control. С помощью заголовка Expires можно установить срок, в течение которого браузер будет кэшировать данные. В поле Expires вводится дата предполагаемого истечения актуальности данных в формате » день недели, число месяц год часы: минуты: секунды GMT, например: «Tue, 31 Jan 2012 15:02:53 GMT». После указанной даты кэширование осуществляться не будет, и с сервера будут загружены обновленные данные.

Управление кэшированием веб-страниц осуществляется с помощью заголовка cache-control, который может принимать следующие значения:

  • no cache — полный запрет кэширования (используется в часто обновляемых страницах);

  • public — разрешение кэширования как локальным клиентом, так и прокси-сервером;

  • private — разрешение кэширования только локальным клиентом;

  • max-age — использовать кэшированный документ в течение заданного времени в секундах;

  • no-store — запрет на кэширование страницы, содержащей приватные данные.

Увеличение скорости работы статического сайта

Главным критерием отличной работы сайта с точки зрения пользователя является скорость загрузки компонентов. Ниже приведены советы как увеличить скорость работы статического сайта, размещенного в нашем хранилище.

Совет 1. Используйте возможности CDN

CDN хранит весь статичный контент (изображения, текстовые файлы, JS, CSS и так далее) на кэширующих серверах, разбросанных по всему миру.

При обращении к веб-странице или ее ресурсам запрос будет обработан географически ближайшим к клиенту кэширующим сервером. Использование CDN помогает увеличить скорость загрузки сайта как для стационарных, так и для мобильных устройств.

По умолчанию все данные кэшируются в CDN на 24 часа.

Очистить кэш CDN можно в любой момент. Для этого перейдите на вкладку Настройки хранилища и добавьте в форму адреса страниц, кэш которых требуется очистить.

image

Кэш будет очищен не моментально, а примерно через 15 минут после отправки формы.

Совет 2. Обратите внимание на заголовок Cache-Control

Чтобы устанавливать срок хранения в кэше браузера копии файла, оригинал которого находится в хранилище, используется заголовок Cache-Control с директивой max-age.

Благодаря этому заголовку можно достаточно сильно увеличить скорость загрузки сайта — если файл закэширован, то браузер будет мгновенно отображать контент из кэша, не делая ни одного запроса к сайту.

Время хранения файла в кэше указывается в секундах:

Cache-Control: max-age=1800

В приведенном примере оно составляет 7200 секунд (2 часа). Обычно таким способом кэшируются CSS, JS и графические файлы. Их желательно кэшировать навсегда, а при изменении содержимого изменять ссылки на них в HTML. В RFC 2616 для таких файлов рекомендуется указывать время кэширования, не превышающее 1 год:

Cache-Control: max-age=31536000

Если требуется, чтобы определенный файл не кэшировался, а всегда отдавался «свежим», для заголовка Cache-Control устанавливается следующее значение:

Cache-Control: no-cache

Оно указывает, что элемент вообще не должен кэшироваться и что клиент должен запрашивать его при каждом обращении к хранилищу (время загрузки файла в этом случае увеличится, так как придется скачать тело файла).

Для HTML-страниц предпочтительнее устанавливать для заголовка Cache-Control значение no-cache. Если нужно что-то срочно изменить на странице, а у клиента эта страница уже закэширована (современные браузеры делают это по умолчанию), то клиент может вообще не увидеть внесенных изменений.

В некоторых случаях время кэширования HTML-страниц лучше указывать исходя из частоты изменений. Например, если страница с новостями на сайте обновляется каждый час, то для max-age можно установить значение 3600 (1 час).

Значение заголовка Cache-Control (равно как и других HTTP-заголовков) в нашем хранилище можно установить через веб-интерфейс:

image