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

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

Первый забег

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

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

npm install – глобальный всплеск

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

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

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

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

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

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

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

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

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

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

всплеск –domain example.com echo “example.com”> CNAME

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

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

всплеск –домен https://example.com

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

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

всплеск –домен https://www.example.com

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

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

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

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

CloudSavvy: Howtogeek

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

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

301 / перемещенная-страница / новая-ссылка

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

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

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

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

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

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

всплеск –project $ PWD –domain example.com

Резюме

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

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

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