Как бесплатно развернуть статические веб-сайты с помощью Surge.sh

Surge.sh — это бесплатный хостинг статических веб-сайтов, с которым вы взаимодействуете из командной строки. Это позволяет быстро и легко размещать новые сайты и приложения в Интернете вручную или в рамках процесса сборки CI. Вот как начать пользоваться сервисом.

Первый забег

Предположим, у вас уже есть каталог файлов, которые вы хотите развернуть в Интернете. Если нет, создайте новую папку, добавьте index.html и какой-нибудь простой начальный контент.

Бинарный файл Surge — это приложение JavaScript, распространяемое через npm. Прежде чем продолжить, убедитесь, что в вашей системе установлен Node.js. Начните с использования npm для установки Surge:

npm install --global surge

Глобальная установка Surge означает, что вы можете использовать команду surge где угодно, даже если в вашем рабочем каталоге отсутствует файл package.json. Отсутствие флага --global вместо этого добавит пакет в качестве зависимости от проекта, что позволит вам заблокировать версию Surge, используемую для отдельных сайтов.

Теперь измените каталог на репозиторий вашего сайта. Запустите команду surge, чтобы запустить процесс развертывания. Отобразится ряд интерактивных подсказок, начиная с вашего адреса электронной почты для настройки учетной записи Surge.

Затем подтвердите путь файловой системы к вашему проекту. По умолчанию это ваш рабочий каталог, поэтому вы обычно можете нажать клавишу возврата, чтобы продолжить.

Следующее приглашение запрашивает доменное имя. Случайный поддомен .surge.sh выбирается автоматически. Вы можете выбрать другой субдомен или один из ваших собственных доменов, указав его здесь. Если вы используете свой собственный домен, в следующих разделах объясняется, как завершить его настройку.

После того, как вы указали доменное имя, нажмите Enter, чтобы начать развертывание. Ход выполнения будет отображаться на вашем терминале, когда интерфейс командной строки Surge загружает ваши файлы и делает их доступными в Интернете. Зайдите в свой домен в браузере, чтобы увидеть свой контент вживую!

Обновления сайта применяются повторным запуском команды surge. Содержимое каталога вашего проекта будет синхронизировано с вашим работающим веб-сайтом.

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

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

Surge предлагает поддержку собственного домена с помощью записей CNAME. Это происходит без дополнительных затрат по сравнению со стандартной услугой. Добавьте запись CNAME в панель управления вашего провайдера домена. Укажите имена хостов @ и www на na-west1.surge.sh. Укажите свое доменное имя при запуске surge для развертывания вашего сайта.

Вам будет предложено указать свой домен каждый раз, когда вы запускаете команду surge. Этого можно избежать, добавив флаг --domain в команды surge. Либо создайте файл CNAME в каталоге вашего проекта. Впишите свое доменное имя в этот файл.

surge --domain example.com

echo "example.com" > CNAME

Управление переадресацией HTTPS

Surge имеет автоматическую поддержку HTTPS, но по умолчанию не обрабатывает перенаправления с HTTP на HTTPS. Явно разверните вариант https вашего домена, чтобы заставить всех посетителей использовать защищенное соединение. Включение перенаправления рекомендуется для всех общедоступных веб-сайтов.

surge --domain https://example.com

Вам нужно будет предоставить сертификат SSL, если вы используете свой собственный домен. Эта функция доступна только в рамках платного плана Surge Plus.

Surge также дает вам контроль над переадресацией с простого домена на www. По умолчанию страница www.example.com перенаправляется на example.com. Вы можете изменить это, явно включив часть www в свой домен развертывания.

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

Настройка вашего сайта

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

Страница 404 включается путем создания файла 404.html. Это все, что нужно сделать — Surge будет обслуживать файл, когда нет прямого совпадения с запрошенным URI.

Защита паролем обеспечивается файлом AUTH. Это принимает простой список имен пользователей и паролей.

cloudsavvy:howtogeek

Вам будет предложено ввести имя пользователя и пароль с использованием базовой HTTP-аутентификации каждый раз, когда вы заходите на свой сайт. Эта функция доступна только в платном плане Surge Plus.

Еще одна функция Surge Plus — правила ручной маршрутизации. Вы можете создать файл ROUTER для определения пользовательских переадресаций как внутри вашего сайта, так и за его пределами.

301 /moved-page /new-link

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

Последний файл конфигурации — CORS. Это позволяет разрешить доступ к вашему сайту из разных источников. Добавьте в файл , чтобы принимать запросы из любого источника из любого источника. Вместо этого вы можете написать отдельные домены, чтобы ограничить разрешенные источники.

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

Surge полностью контролируется текстовыми файлами и командами терминала. Его легко интегрировать в конвейеры CI для автоматического развертывания веб-сайтов при каждой фиксации.

Автоматизация Surge требует использования токенов API. Это позволяет избежать интерактивных запросов на вход в систему. Сначала войдите в Surge на своем компьютере для разработки. Запустите surge token, чтобы получить токен API.

В конвейере непрерывной интеграции задайте переменные среды SURGE_LOGIN и SURGE_TOKEN. Первый должен быть вашим адресом электронной почты, а второй — вашим токеном API. Теперь вы можете развертывать неинтерактивно, используя флаги --project и --domain:

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

Краткое содержание

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

В отличие от других претендентов, Surge полностью управляется терминалом. Это делает его идеальным для быстрых сайтов, ориентированных на разработчиков, управляемых через репозитории Git и конвейеры CI. Он исключает конфигурацию сервера, поэтому вы можете сосредоточиться на создании контента своего сайта.

Для более продвинутых вариантов использования Surge даже позволяет добавить несколько участников. Запустите surge --add user@example.com, чтобы предоставить друзьям, гостям и коллегам доступ к вашему сайту. Их можно будет развернуть, запустив surge и указав то же доменное имя, которое вы использовали.