Как и почему я перевел свой блог с GitHub Pages на Netlify


Оглавление

  • Чего не хватало GitHub Pages
  • Войти в Netlify
  • Как я перешел на Netlify
    • Создайте учетную запись Netlify
    • Импорт вашего сайта
    • Изменение URL веб-сайта и пользовательских доменов
    • Настройка предварительного просмотра развертывания
  • Возможности, которые я добавлю в будущем
    • Работа с формами
    • Сплит-тестирование
    • CDN/git LFS
  • Слишком хорошо, чтобы быть бесплатным?

Мой блог теперь развернут на Netlify! На днях я потратил чуть больше часа на перенос его с GitHub Pages на Netlify.

GitHub Pages — это отличное решение для развертывания статических веб-сайтов. Но на нем было сложно реализовать некоторые функции, которые я хотел иметь в своем блоге.

Поэтому, поддавшись импульсу и оттягивая завершение статьи в блоге, я перевел сайт на Netlify!

Чего не хватало GitHub Pages

GitHub Pages был моим основным решением для развертывания статических сайтов в течение последних трех лет. И он работал как шарм, даже если был бесплатным.

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

Есть способы настроить это, но даже если я сделаю это, у людей/рецензентов не будет возможности оставлять отзывы на моем статичном сайте.

Я также использовал много перенаправлений на стороне клиента, что нежелательно, в отличие от перенаправлений на стороне сервера. GitHub Pages не предоставляет возможности настройки перенаправления на стороне сервера. Поэтому мне пришлось использовать эти халтурные Jekyll-перенаправления на поддомене. Это работает, но могло бы быть и лучше.

Вводим Netlify

В Netlify есть предварительный просмотр развертывания. Поэтому, когда вы делаете запрос на внесение изменений в производственную ветку, Netlify создаст сайт для вас и покажет предварительный просмотр того, как будут выглядеть изменения.

Функция предварительного просмотра развертывания в Netlify

С сайта github.com/navendu-pottekkat

Знаете, для чего это лучше всего подходит? Предварительный просмотр черновых записей в блоге!

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

Netlify также улучшает возможности непрерывной интеграции.

Проверки CI, выполняемые Netlify

С сайта github.com/navendu-pottekkat

Netlify позволяет настраивать параметры сборки через пользовательский интерфейс Netlify или конфигурационный файл (netlify.toml). Это дает вам гораздо больше контроля, чем те немногие опции конфигурации, которые предоставляет GitHub Pages.

Приборная панель Netlify для сайта navendu.me

Я добавил Plugin и для линтинга ссылок, и это сломало CI, потому что было много битых ссылок. Задача на другой день.

С Netlify настройка перенаправления так же проста, как добавление двух строк в ваш конфигурационный файл. У вас также есть возможность настроить правильный код статуса. Вот это здорово.

Netlify также имеет службу DNS, поддерживает хранение больших носителей (Git LFS), имеет функции раздельного тестирования и отката, и многое другое. Но сейчас для меня это только «приятные возможности». Я не буду использовать их в ближайшее время.

Возможно, я воспользуюсь ими в ближайшее время.

Как я перешел на Netlify

Процесс был довольно простым. Мне потребовалось чуть больше часа, чтобы все настроить и протестировать.

В описанных ниже шагах у меня была следующая настройка:

  • Блог Hugo, опубликованный на GitHub Pages.
  • Пользовательский домен, зарегистрированный на Hostgator (также мой DNS-сервис).

Вы всегда можете обратиться к официальной документации Netlify, если у вас другая настройка.

Создание учетной записи Netlify

Во-первых, вы должны создать учетную запись Netlify, если у вас ее нет.

Создайте свою учетную запись Netlify

Вы также используете GitHub для всего?

Импортируйте свой сайт

Теперь вы можете добавить свой сайт в Netlify. У вас должен быть код вашего сайта на провайдере Git. Если у вас его нет, сейчас самое время git push ваш код.

  1. Нажмите на «Добавить новый сайт» и «Импортировать проект».

    Импорт вашего сайта

  2. Выберите Git-провайдера, у которого находится код вашего сайта.

    Выберите провайдера

  3. Выберите репозиторий из Git-провайдера после предоставления доступа к Netlify.

    Выберите репозиторий для развертывания

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

    Настройки сборки для моего сайта Hugo

    --gc очищает старые ресурсы, --minify уменьшает размер файлов, а папка public является местом, куда Hugo выводит сборку.

И вуаля! Netlify автоматически создаст ваше первое развертывание. Теперь вы сможете увидеть производственный URL вашего сайта.

Производственный URL вашего сайта

Этот скриншот взят из документации Netlify.

Этот URL является уникальным; вы можете изменить его на yoursitename.netlify.app или ваш пользовательский домен.

Изменение URL сайта и пользовательских доменов

Вы можете изменить URL вашего сайта на любой уникальный. После изменения он станет адресом вашего сайта.

  1. На странице «Обзор сайта» перейдите в раздел «Настройки домена».

  2. Нажмите на «Опции» рядом с именем сайта и нажмите «Редактировать имя сайта».

    Отредактируйте созданное имя сайта

    kung-fu-panda-23 — классное название.

  3. Измените имя сайта и сохраните.

Примечание: Если вы используете этот URL, вам может понадобиться изменить baseURL в вашем конфигурационном файле Hugo, чтобы все ссылки работали.

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

  1. В разделе «Настройки домена» нажмите «Добавить пользовательский домен».

  2. Вы можете ввести домен, который у вас уже есть, или ввести что-то новое и купить домен. Netlify все настроит, если вы покупаете домен.

  3. Если вы используете уже принадлежащий вам домен с внешним DNS-провайдером, вы увидите предупреждение. Вы можете проигнорировать его и нажать «Добавить домен».

  4. Вы также можете установить SSL-сертификат в разделе HTTPS.

    Защитите свой сайт с помощью SSL-сертификата

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

  1. Войдите в панель управления вашего домена и откройте конфигурацию DNS. Я использую Hostgator для своего домена.
  2. Создайте запись A с вашим доменом apex и укажите ее на IP-адрес балансировщика нагрузки Netlify 75.2.60.5.
  3. Затем создайте запись CNAME для поддомена www и укажите его на адрес вашего сайта yoursitename.netlify.app.

Теперь вам нужно подождать, пока изменения распространятся, и вы получите настроенный домен.

Настройка предварительного просмотра развертывания

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

  1. Перейдите в раздел «Настройки сайта».
  2. Выберите «Build & deploy» из бокового меню, а затем «Continuous Deployment».
  3. Прокрутите вниз до «Deploy previews» и настройте его по своему усмотрению. Я включил его для всех запросов на выгрузку в мою производственную ветку, а также включил Netlify Drawer.

Вот и все. Теперь у вас есть предварительные просмотры развертывания!

Примечание: Чтобы убедиться, что предварительные просмотры развертывания показывают черновики, я обновил свой файл конфигурации Netlify (netlify.toml), чтобы изменить команду сборки для предварительных просмотров развертывания.

[context.deploy-preview]
  command = "hugo --buildFuture --buildDrafts --gc --minify -b $DEPLOY_PRIME_URL"

Здесь $DEPLOY_PRIME_URL — переменная окружения, которую устанавливает Netlify, используемая для обновления baseURL сайта.

На этом я заканчиваю свою текущую настройку. Она намного лучше, чем моя предыдущая установка с GitHub Pages, и ее было довольно легко перенести. Я определенно рекомендую Netlify для ваших статических веб-сайтов.

Функции, которые я могу добавить в будущем

Это была моя первая итерация с Netlify. У меня есть базовая установка, которая более или менее делает все, что мне нужно. Но я могу использовать и другие функции, если они окажутся полезными.

Обработка форм

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

Сплит-тестирование

А/Б тестирование постов в блоге? Да!

CDN/git LFS

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

Слишком хорошо, чтобы быть бесплатным?

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

Мое 24-часовое использование Netlify

Петиция о добавлении раздела, показывающего углеродный след в моих блогах. Получите это, люди, летающие на частных самолетах!

Но пройдет немного времени, и мне придется заплатить за эту услугу. Это не слишком большие деньги, но, видя, что альтернатива, GitHub Pages, бесплатна, я не могу перестать думать: «Может быть, мне не нужны предварительные просмотры развертывания».

Надеюсь, мне не придется писать пост под названием «Как и почему я перевел свой блог с Netlify на GitHub Pages»!

Оцените статью
devanswers.ru
Добавить комментарий