Используйте функции непрерывного развертывания Netlify для доставки нашего веб-сайта

Эта статья предназначена для тех, кто хочет настроить рабочий процесс J ekyll + Gulp с Netlify, чтобы использовать бесшовную интеграцию Netlify с GitHub и его функцию непрерывного развертывания (CD).

Всегда можно было настроить рабочий процесс Gulp с помощью Jekyll, а затем вручную развернуть его на Netlify - и есть множество статей, которые помогут вам с этим справиться, - но ручное развертывание обходится без компакт-диска, что, возможно, является лучшей функцией Netlify, позволяющей развертывать запускается быстрым нажатием git.

Здесь мы хотим создать блог Jekyll, который будет полностью оптимизирован - все изображения уменьшены, а таблицы стилей объединены. Gulp должен в значительной степени позаботиться обо всех оптимизациях, но написание простого сообщения в блоге не должно быть обременительной задачей, когда вам придется запускать jekyll build и gulp build каждый раз, не говоря уже о хлопотах по установке всех модулей Gulp локально. Это должно быть так же просто, как выполнить простой git push.

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

Давайте начнем

  1. Настройте новое репо на Github для проекта и свяжите репо с Netlify.
  2. Создайте gulpfile.js в корневом каталоге, где мы определим наши задачи Gulp.
  3. Сделайте npm init -y или создайте файл package.json в корневом каталоге.

"build": jekyll build && gulp build

Здесь следует отметить сценарий npm с именем build, который мы будем использовать для создания нашего веб-сайта в Netlify как часть процесса развертывания. (Двойной амперсанд между обеими задачами должен гарантировать, что задачи выполняются последовательно.)

Две основные задачи, которые необходимо выполнить:

  • jekyll build (создает сайт Jekyll внутри каталога _site)
  • gulp build (запускает магию Gulp)

Теперь перейдите к Netlify и настройкам сайта для развернутого сайта.

Перейдите на вкладку Build & deploy, чтобы отредактировать команду Build, и используйте сценарий запуска npm, который мы определили ранее.

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

Надеюсь, это поможет. Спасибо за прочтение!