Surge.sh: быстрое развертывание статических сайтов

Иллюстрация с логотипом Surge.sh

Быстрые ссылки

Первый запуск
Использование собственного домена
Управление HTTPS-перенаправлениями
Настройка сайта
Автоматизация развертываний Surge
Рекомендации по безопасности
Отладка и распространённые ошибки
Сводка

Первый запуск

Предположим, что у вас уже есть папка с файлами сайта. Если нет — создайте пустую папку и добавьте простейший файл:

index.html

Surge распространяется как JavaScript-приложение через npm. Убедитесь, что на машине установлен Node.js, затем установите Surge глобально:

npm install --global surge

Установка с флагом –global позволяет запускать команду surge из любой папки, даже если в рабочем каталоге нет package.json. Без --global пакет установится как зависимость проекта, что удобно для фиксации версии Surge для конкретного сайта.

Перейдите в каталог вашего сайта и выполните команду surge. CLI задаст серию интерактивных вопросов: сначала email для создания аккаунта Surge, затем путь к файлам (по умолчанию текущая папка) и домен. По умолчанию будет предложен случайный поддомен .surge.sh.

Вы можете выбрать собственный поддомен или указать свой домен — для этого см. раздел «Использование собственного домена». После указания домена нажмите Enter: CLI загрузит файлы и отобразит прогресс в терминале. Откройте свой домен в браузере, чтобы увидеть сайт в сети.

Изменения публикуются повторным запуском surge — содержимое каталога синхронизируется с живым сайтом.

По умолчанию загружаются все файлы из папки. Чтобы исключить пути, добавьте файл .surgeignore с синтаксисом, аналогичным .gitignore. Surge автоматически пропускает многие служебные каталоги и файлы, создаваемые Git, npm и другими инструментами.

Скриншот развертывания статического сайта с помощью Surge.sh

Использование собственного домена

Surge поддерживает кастомные домены через запись CNAME и не взимает за это дополнительной платы в базовом тарифе. В панели управления регистратора добавьте запись CNAME для нужного хоста и укажите na-west1.surge.sh в качестве цели. При деплое укажите ваш домен в ответе на подсказку или передайте его через флаг --domain.

Вы можете сохранить домен в проекте, создав файл CNAME в корне с одной строкой — вашим доменом:

surge --domain example.com

echo "example.com" > CNAME

Совет: если вы постоянно деплоите в CI, файл CNAME гарантирует, что каждый автоматический деплой будет использовать тот же домен.

Управление HTTPS-перенаправлениями

Surge автоматически поддерживает HTTPS, однако HTTP→HTTPS перенаправление не включено по умолчанию. Чтобы принудить HTTPS для всего трафика, явно деплойте на https-версию домена:

surge --domain https://example.com

Важно: при использовании собственного домена для полной гибкости HTTPS (например, предоставление собственного сертификата) потребуется подписка Surge Plus и загрузка сертификата.

По умолчанию поведение перенаправления между корректным доменом и поддоменом с www таково: www.example.com будет перенаправлен на example.com. Чтобы наоборот переадресовывать на www.example.com, явно включите www в домене при деплое:

surge --domain https://www.example.com

Настройка сайта

Surge предоставляет набор простых конфигурационных файлов, которые добавляют функциональность без дополнительного сервера.

404-страница: создайте 404.html — Surge будет отдавать её при отсутствии совпадения URI.
Защита паролем: создайте файл AUTH со списком логин:пароль. При доступе сайт запросит HTTP Basic Authentication.

cloudsavvy:howtogeek

Роутинг и редиректы: создайте ROUTER и укажите правила, например:

301 /moved-page /new-link

Surge поддерживает коды 301 и 307 в первой колонке. Последняя колонка — относительная ссылка внутри сайта или абсолютная ссылка на внешний домен, например https://www.google.com.

CORS: создайте файл CORS. Укажите *, чтобы разрешить запросы с любых источников, или перечислите разрешённые домены по одному на строку.

Замечание: файлы AUTH и ROUTER доступны в платной подписке Surge Plus.

Автоматизация развертываний Surge

Surge управляется текстовыми файлами и терминальными командами, поэтому легко интегрируется в CI/CD. Для безвводного деплоя используйте API-токены.

На локальной машине выполните вход в Surge и получите токен:

surge token

В CI установите переменные окружения SURGE_LOGIN (email) и SURGE_TOKEN (API-токен). Затем запустите деплой неинтерактивно, передав путь к проекту и домен:

surge --project $PWD --domain example.com

Пример интеграции в GitHub Actions (фрагмент):

- name: Install Surge
  run: npm install --global surge

- name: Deploy to Surge
  env:
    SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
    SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
  run: surge --project ./public --domain example.com

Важно: храните токены в защищённых секретах CI, а не в репозитории.

Отладка и распространённые ошибки

Проблема: сайт не обновляется после деплоя. Возможные причины:
- Локально изменён не тот каталог — проверьте путь, передаваемый в surge.
- Кэш браузера — откройте страницу в режиме инкогнито или очистите кэш.
- Отключён файл CNAME или неверно указаны DNS-записи для собственного домена.
Проблема: HTTP остаётся доступным, но вы хотите HTTPS. Решение:
- Деплойте с указанием https://... в флаге --domain.
- Для собственного сертификата оформите Surge Plus и загрузите сертификат.
Проблема: редиректы не срабатывают. Решение:
- Проверьте формат файла ROUTER и наличия соответствующих правил.
- Убедитесь, что используете допустимые коды (301 или 307).
Проблема: авторизация не работает. Решение:
- Проверьте содержимое файла AUTH и формат login:password.
- Убедитесь, что используете Surge Plus, если ожидаете платную функциональность.

Чеклисты по ролям

Разделённые задачи упрощают работу команд при использовании Surge.

Разработчик:

Установить Node.js и surge глобально
[ ] Подготовить index.html и сборку в public (если используется сборщик)
[ ] Добавить .surgeignore
[ ] Протестировать локально и запустить surge

DevOps/Инженер CI:

[ ] Сгенерировать и сохранить SURGE_TOKEN в секретах CI
Настроить шаг деплоя в pipeline
Убедиться, что DNS-записи указывают на na-west1.surge.sh

Владелец продукта/менеджер:

Проверить HTTPS и политику перенаправлений
Утвердить список публичных URL и стратегию CORS
[ ] Решить, нужно ли включать AUTH для тестовых окружений

Шаблоны команд и быстрый справочник

Базовый деплой из каталога проекта:

surge

Деплой со статическим указанием домена:

surge --domain example.com

Деплой в CI (пример):

surge --project $PWD --domain example.com

Добавление участника к сайту:

surge --add user@example.com

Получение API-токена на локальной машине:

surge token

Факто-бокс

Тип сервиса: хостинг статических сайтов, терминальный интерфейс.
Базовая версия: бесплатна, подходит для большинства коротких сайтов и прототипов.
Платные функции: Surge Plus — поддержка пользовательских SSL-сертификатов, AUTH, ROUTER и расширённый контроль.
Поддержка CI: полная, через SURGE_TOKEN и переменные окружения.

Критерии приёмки

Сайт доступен по указанному домену и корректно отдает index.html.
HTTPS включён и перенаправление HTTP→HTTPS настроено для публичных сайтов.
При необходимости: файл CNAME присутствует; если нужен редирект — правило в ROUTER проверено.
CI деплой проходит без интерактивных подсказок при наличии SURGE_TOKEN и SURGE_LOGIN в секретах.

Мини-методология развертывания (быстрый SOP)

Соберите финальную версию сайта в каталоге (например, ./public).
Добавьте .surgeignore и, при необходимости, файлы CNAME/404/AUTH/ROUTER/CORS.
Локально протестируйте сайт и выполните surge для первого деплоя.
Получите surge token и сохраните его в секретах CI.
Настройте шаг деплоя в CI: surge --project ./public --domain example.com.
Проверяйте лог и корректность HTTPS/редиректов после каждого деплоя.

Отдельные случаи и альтернативы

Когда Surge подходит:

Быстрая публикация прототипов и документации.
Сайты, которыми удобно управлять из терминала и через Git-пайплайны.

Когда стоит рассмотреть альтернативы:

Нужна серверная логика (лучше выбрать серверный хостинг или PaaS).
Требуются сложные правила кеширования и CDN-оптимизации на уровне edge — тогда стоит рассмотреть специализированные сервисы CDN/edge.
Для корпоративного использования с управлением сертификатами через централизованные PKI — у некоторых провайдеров корпоративные функции шире.

Сводка

Surge позволяет быстро и просто публиковать статические сайты через терминал. Базовая версия бесплатна; Surge Plus добавляет аутентификацию, ручные редиректы и гибкие HTTPS-настройки. Интеграция в CI осуществляется через API-токен и переменные окружения, что делает Surge удобным решением для автоматических деплоев.

Для команд: используйте шаблоны CNAME и .surgeignore, храните токены в секретах CI и пробуйте включать HTTPS для публичных сайтов. Surge экономит время разработчиков за счёт простого терминального интерфейса и минимальной конфигурации.

FAQ

Q: Нужно ли платить за использование Surge для простых сайтов?
A: Нет — базовый хостинг статических сайтов бесплатен. Платные функции включают Surge Plus.

Q: Как автоматизировать деплой в CI без интерактивных подсказок?
A: Сгенерируйте SURGE_TOKEN локально и сохраните его в секретах CI вместе с SURGE_LOGIN, затем используйте surge --project $PWD --domain example.com.

Q: Как заставить сайт всегда использовать HTTPS?
A: Деплойте на https://your-domain при помощи --domain.

Q: Можно ли хранить секреты в репозитории?
A: Нет — храните SURGE_TOKEN только в защищённых секретах CI или менеджере секретов.