Учебник по размещению вашего статического сайта на Netlify

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

Я веду свой блог наNetlify.

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

Поскольку этот блог работает наХьюго, который является генератором статических сайтов, мне не нужно много работать, чтобы переместить блог на новый хостинг. Все, что мне нужно, это что-то, что может обслуживать файлы HTML, что есть практически на любом хостинге на планете.

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

Netlify Logo

Представляем Netlify

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

Во-первых,бесплатный план очень щедрыйдля бесплатных или коммерческих проектов со 100 ГБ бесплатной ежемесячной пропускной способности и для статического сайта с несколькими изображениями здесь и там - это много места!

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

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

Конечно, они поддерживают собственный домен и HTTPS.

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

Нетлифай и Хьюго

Я использую Hugo и локально запускаю сервер с помощью встроенного инструментаhugo server, который обрабатывает перестройку всего HTML каждый раз, когда я вношу изменения, и запускает HTTP-сервер на порту1313по умолчанию.

Чтобы создать статический сайт, мне нужно запуститьhugo, и это создает серию файлов вpublic/папка.

Я использовал этот метод в Firebase: я запустилhugoдля создания файлов, затемfirebase deploy, настроен на то, чтобы подтолкнуть мойpublic/содержимое папки на серверы Google.

Однако в случае Netlify я связал его со своим частным репозиторием GitHub, в котором размещен сайт, и каждый раз, когда я нажимаю на главную ветку, ту, с которой я сказал Netlify для синхронизации, Netlify инициирует новое развертывание, и изменения вступают в силу. в считанные секунды.

Dashboard

СОВЕТ: если вы используете Hugo на Netlify, убедитесь, что вы установили HUGO_VERSION вnetlify.tomlдо последней стабильной версии Hugo, поскольку версия по умолчанию может быть старой и (на момент написания) не поддерживает недавние функции, такие как пакеты сообщений.Вот мой файл конфигурации netlify.toml.

Если вы думаете, что в этом нет ничего нового, вы правы, поскольку это несложно реализовать на вашем собственном сервере (я делаю это на других сайтах, не размещенных на Netlify), но вот кое-что новое: вы можете предварительно просмотреть любой GitHub (или GitLab , или BitBucket) ветвь / PR по отдельному URL-адресу, при этом ваш основной сайт работает и работает со «стабильным» контентом.

Еще одна интересная функция - это возможность выполнять A / B-тестирование в двух разных ветках Git.

Расширенная функциональность, предлагаемая Netlify для статических сайтов

Статические сайты имеют очевидное ограничение, заключающееся в невозможности выполнять какие-либо серверные операции, подобные тем, которые вы ожидаете, например, от традиционной CMS.

Это преимущество (меньше проблем с безопасностью), но также ограничение функциональности, которую вы можете реализовать.

В блоге нет ничего сложного, возможно, вы захотите добавить комментарии, и это можно сделать с помощью таких сервисов, как Disqus или другие.

Или, может быть, вы хотите добавить форму и делаете это путем встраивания форм, созданных в сторонних приложениях, таких как Wufoo или Google Forms.

Netlify предоставляет набор инструментов для обработкиФормы, аутентифицировать пользователей и даже развертывать и управлятьЛямбда-функции.

Необходимо защитить сайт паролем перед его запуском? ✅

Нужно справитьсяCORS? ✅

Требуется 301 редирект? ✅

Нужен предварительный рендеринг для вашего SPA? ✅

Я лишь слегка коснулся того, что вы можете делать с Netlify, не обращаясь к сторонним службам, и надеюсь, что дал вам повод попробовать его.

Предварительный просмотр веток

Интеграция GitHub отлично работает с запросами на извлечение.

Каждый раз, когда вы отправляете Pull Request, Netlify развертывает эту ветку по определенному URL-адресу, которым вы можете поделиться со своей командой или кому угодно.

Здесь я сделал Pull Request для предварительного просмотра сообщения в блоге, не делая его доступным в моем общедоступном блоге:

GitHub Pull Request

Netlify немедленно подобрал его и автоматически развернул 🎉

The deployed preview

Щелчок по ссылке указывает на специальный URL-адрес, который позволяет предварительно просмотреть PR-версию сайта.


Дополнительные руководства по услугам: