Разместить статический сайт

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

  • указание индексного файла;
  • указание страницы ошибки;
  • листинг директории (plain и JSON) c возможностью задания собственного CSS;
  • просмотр статистики по запросам;
  • управление заголовками для кэширования;
  • создание страниц, на которых пользователи могут загрузить на сайт свои файлы;
  • организация просмотра изображений в виде фотогалереи;
  • прикрепление доменов второго уровня;
  • низкая стоимость использования — от 1 рубля в месяц.

Разместить сайт

  1. В панели управления перейдите в раздел Облачное хранилище ⟶ Хранилище.
  2. Создайте публичный контейнер.
  3. Откройте страницу контейнера вкладка Настройки контейнера.
  4. Выберите блок настройки специальных страниц. В поле Индексный файл укажите путь к файлу «index.html», который будет загружаться при обращении пользователя напрямую к какому-либо контейнеру. Путь к индексному файлу может быть абсолютным и относительным (без символа / в начале):

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

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

      Сохраните под именем «index.html». Загрузите в контейнер, а затем укажите в качестве индексного. Адрес для браузерной строки «http://xxxxx.selcdn.ru/site/».

  5. В поле Ошибка 404 пропишите путь к файлу, который будет отдан пользователю в случае, если тот запросит несуществующую страницу. Создайте в текстовом редакторе файл с текстом «Page not found» и сохраните под именем «error.html». Укажите его в качестве файла ошибки. Если в адресной строке браузера ввести путь к заведомо несуществующей странице (например, «http://xxxxx.selcdn.ru/site/1»), на экране будет отображен текст «Page not found». Можно ввести ссылку на любой внешний ресурс (если, например, будет указана ссылка на сайт «http://example.com», то при ошибке 404 пользователь будет перенаправлен именно на него). Можно настроить сортировку выводимого списка файлов указанного каталога:

    • по имени;
    • по размеру;
    • от старых к новым;
    • от новых к старым. Для сортировки добавьте путь к файлу стилей с указанием CSS в поле Файл стилей листинга. Для страниц с index.html стили CSS указываются прямо в этом html-файле.
  6. Прикрепите к контейнеру домен в блоке Управление доменами. Все хранимые в контейнере файлы будут доступны по имени прикрепленного домена. Если, например, к контейнеру «my_images» привязать домен «images.example.com», то все файлы из этого контейнера будут доступны по адресу «http://images.example.com». Прежде чем прикреплять домен, нужно обязательно внести в DNS необходимые записи. К контейнерам можно прикреплять домены второго уровня. Для этого в DNS нужно внести А-запись (для IPv6-адресов — АААА-запись), ссылающуюся на адреса, указанные в панели управления.

  7. Добавьте в контейнер файлы сайта.

Настроить http-заголовок для кэширования

Заголовок cache-control управляет кэшированием веб-страниц.

  1. В панели управления перейдите в раздел Облачное хранилище ⟶ Хранилище.
  2. Откройте страницу контейнера вкладка Настройки контейнера ⟶ карточка HTTP-заголовки.
  3. Введите одно из значений заголовка cache-control:
    • no cache — полный запрет кэширования (используется в часто обновляемых страницах);
    • public — разрешение кэширования как локальным клиентом, так и прокси-сервером;
    • private — разрешение кэширования только локальным клиентом;
    • max-age — использовать кэшированный документ в течение заданного времени в секундах;
    • no-store — запрет на кэширование страницы, содержащей приватные данные.

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

Для пользователя скорость загрузки компонентов это важный критерий качества сайта. Ниже приведены советы как увеличить скорость работы статического сайта.

Использовать возможности CDN

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

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

Настроить кэширование файлов с помощью заголовка Cache-Control

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

Время хранения файла в кэше указывается в секундах: Cache-Control: max-age=7200 В приведенном примере оно составляет 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-заголовков) в нашем хранилище можно установить в панели управления.