Публикация результатов верстки на gp-pages

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

Github-pages — сервис, предоставляемый github.com. Среди прочего, он позволяет организовать бесплатный хостинг статичных файлов (с некоторыми ограничениями).

В вашем репозитории есть разделение на папку исходников (src/) и папку сборки (build/). В последней хранится результат вашей работы, который можно показать заказчику с gh-pages.

Как это работает

Вы запускаете gulp-задачу, которая берет содержимое папки build/ и помещает его в ветку gh-pages, после чего отправляет эту ветку в репозиторий текущего проекта на github.com и через пару минут содержимое ветки можно посмотреть на https://вашНик.github.io/названиеРепозитория/.

Как добавить задачу публикации на gh-pages

Все манипуляции делать с чистым git-статусом, чтобы добавление задачи публикации попало в отдельный коммит.

Шаг 1. Установить пакет для публикации: npm i gh-pages -D.

Шаг 2. В верхней части gulpfile.js добавить подключение пакета gh-pages и модуля path.

const ghPages = require('gh-pages');
const path = require('path');

Шаг 3. Добавить задачу:

function deploy(cb) {
  ghPages.publish(path.join(process.cwd(), './build'), cb);
}
exports.deploy = deploy;

Шаг 4. На странице своего репозитория перейти в «Settings», найти блок «GitHub Pages», скопировать ссылку на gh-pages, вернуться на главную страницу вашего репозитория и добавить ссылку в блок описания репозитория.

Как использовать

npx gulp deploy

В вашем репозитории по команде npm start запускается gulp. Задача не указывается, так что выполнится задача по умолчанию (с именем default). Нужно указать имя задачи: npm start deploy.

После занятия, на котором мы добавляем удобные алиасы, у вас появляется алиас s, запускающий npm start. Если это уже сделано, запуск задачи делается совсем коротко: s deploy.

Между успешной отправкой содержимого ветки gh-pages в ваш репозиторий и реальным появлением её содержимого на GitHub Pages проходит несколько (редко более 1-2) минут.

При любых проблемах в течение курса обратитесь к вашему наставнику или лично ко мне.