Gatsby Up & Running: создание конвейера компакт-дисков

Моим последним приключением был перенос моего грязного сайта Jekyll на Gatsby. Раньше я развертывал свой сайт Jekyll вручную, создавая его локально и отправляя сгенерированный статический контент в ветку gh-pages на GitHub. Создав свой новый сайт, я решил, что пора оставить старые методы позади и настроить автоматизированный конвейер для развертывания моего сайта на страницах GitHub.

Почему именно GitHub Pages?

Я всегда использовал GitHub Pages для размещения своего блога, потому что он легкий и легко интегрируется с GitHub. Это просто, бесплатно и предоставляет бесплатные возможности, такие как принудительное использование HTTPS по умолчанию, а также поддерживает добавление собственного домена.

Развертывание сайта Gatsby локально

Прежде чем автоматизировать развертывание моего нового сайта Gatsby, я научился развертывать его локально. Для этого я добавил запись в тег scripts в package.json, которая создает готовую к производству сборку для моего сайта Gatsby.

"scripts": { 
  ...
  "build": "gatsby build"
}

npm run build создает сайт и помещает сгенерированные ресурсы в папку с именем public. Копирование этой public папки на любой HTTP-сервер приведет к развертыванию моего сайта на этом сервере.

Я запустил HTTP-сервер, используя http-сервер для обслуживания ресурсов в папке public, которая эффективно развернула мой сайт локально.

➜  cd public
➜  http-server
Starting up http-server, serving ./
Available on:  
http://127.0.0.1:8082  
http://10.10.10.10:8082 
http://192.168.13.12:8082

Развертывание сайта Gatsby вручную на страницах Github

Настройка страниц Github

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

Я перешел на страницу настроек своего репозитория GitHub и прокрутил страницу до раздела GitHub Pages.

Я не хотел, чтобы файлы, созданные в процессе сборки Gatsby, загромождали мою ветку master, поэтому я выбрал ветку gh-pages в качестве исходной ветки для моего сайта GitHub Pages. Любой статический сайт, который я помещаю в эту ветку, будет опубликован на deborah-digges.github.io. Еще мне понравилось, что по умолчанию Enforce HTTPS включен. Вся безопасность!

Развертывание вручную

Я развернул сайт вручную на страницах GitHub, создав сайт локально и отправив только папку public в ветку gh-pages на GitHub.

Для этого потребовалась довольно неудобная последовательность команд.

Это непросто, и легко случайно взорвать весь компьютер с помощью таких команд, как rm -r *. Хорошо, что пакет gh-pages существует, чтобы спасти нас от самих себя.

Я добавил в свой проект зависимость, чтобы дать ему шанс.

yarn add gh-pages

Чтобы gh-pages узнать, где находится мой репозиторий, я добавил свойство homepage в package.json.

{
  ...
  "homepage": "deborah-digges.github.io"
  ...
}

Я добавил еще один сценарий deploy в свой package.json, который выполняет build, а затем помещает папку public в ветвь gh-pages моего репозитория на Github.

"scripts": {
  "build": "gatsby build",
  "deploy": "npm run build && gh-pages -d public"
}

И вуаля! Мне удалось развернуть свой сайт вручную со своего компьютера с помощью сценария npm run deploy. Мой сайт тогда был запущен и работал по адресу deborah-digges.github.io

✨Непрерывно✨ Развертывание сайта Gatsby с Travis CI

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

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

Подписываясь

Я зарегистрировался на веб-сайте Travis CI, используя свою учетную запись GitHub, и согласился поделиться своими данными GitHub с Трэвисом.

Включение репозитория

Затем я перешел на страницу репозиториев и включил сборки для репозитория deborah-digges.github.io.

Добавление файла travis.yml

Я добавил travis.yml файл в корень своего репозитория, чтобы сообщить Трэвису, что делать при каждой фиксации master.

script запускает yarn run deploy шаг, который я ранее использовал для локального развертывания моего сайта. Он делает некоторые дополнительные шаги, чтобы дать Travis CI право доступа для отправки в мой репозиторий GitHub.

Он сообщает git клиенту, установленному на Travis CI, кто я.

git config --global user.name $GH_USERNAME
git config --global user.email $GH_EMAIL

Чтобы предоставить скрипту push-доступ к моему репозиторию GitHub, я встроил свою переменную среды Github Token в удаленный URL-адрес.

git remote set-url origin "https://${GH_USERNAME}:${GH_TOKEN}@github.com/deborah-digges/

Откуда взялись эти переменные среды?

Настройка переменных среды Travis

Я перешел к настройкам своего репозитория и сделал следующие переменные среды доступными для моего скрипта.

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

Это была большая работа, и в моем стремлении найти более простое решение я изучу использование GitHub Action для непрерывного развертывания моего сайта. Следите за обновлениями для более опасной жизни!

Первоначально опубликовано на https://deborah-digges.github.io.