Мой Последнее приключение мигрировал мой сайт Crufty Jekyll в Гэтсби. Раньше я развернул свой сайт Jekyll вручную, создавая его локально и подталкивая созданный статический контент в GH-Pages ветвь на GitHub. С моим новым сайтом, я решил, что пришло время оставить мои старые пути и настроить автоматический трубопровод для развертывания моего сайта на страницы GitHub.
Почему страницы GitHub?
Я всегда использовал страницы GitHub для размещения моего блога, потому что он легкий и легко интегрируется с GitHub. Он прост, бесплатно и предоставляет бесплатные вкусности, такие как обеспечение соблюдения HTTPS по умолчанию, а также поддерживает добавление пользовательского домена.
Развертывание локально
Прежде чем автоматизировать развертывание моего нового сайта Gatsby, я научился развернуть его на месте. Для этого я добавил запись в сценарии тег в Package.json который создает готовую к производству сборку для моего сайта Gatsby.
"scripts": {
...
"build": "gatsby build",
}
NPM Run Build Создает сайт и помещает сгенерированные активы в папку под названием public Анкет Копирование этого public Папка на любой HTTP -сервер будет развернуть мой сайт на этот сервер.
Я запустил HTTP -сервер, используя http-server служить активам в 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
Развертывание вручную на страницы GitHub
Настройка страниц GitHub
У меня уже были установлены страницы GitHub с тех пор, как я использовал их для своего сайта Jekyll, но я пройду шаги здесь для полноты.
Я направился на страницу настроек репозитория моего GitHub и прокрутил вниз до GitHub Pages раздел.
Я не хотел, чтобы файлы, сгенерированные процессом сборки Gatsby, загромождены мои Мастер ветка Итак, я выбрал GH-Pages ветвь в качестве исходной ветви для моего сайта GitHub Pages. Любой статический сайт, который я выдвинул в эту филиал, будет опубликован по адресу Deborah-digges.github.io Анкет Мне также понравился тот факт, что Применение https был включен по умолчанию. Вся безопасность!
Развертывание вручную
Я развернул сайт вручную на страницы GitHub, создав сайт локально и наталкивая только public папка в GH-Pages ветвь на GitHub.
Это требовало довольно неловкой последовательности команд.
git checkout -b gh-pages gatsby build # Temporarily move the public folder mv public /tmp # Remove all other files rm -r * # Move the contents of the public folder back to the root of the directory cp -r /tmp/public/* . git commit -m "Release new version of blog" git push origin gh-pages
Это глоток, и это легко пойти, и случайно подавить весь ваш компьютер такими командами, как rm -r * Анкет Хорошо, что GH-Pages Пакет существует, чтобы спасти нас от себя.
Я добавил зависимость в свой проект, чтобы дать ему вращение.
yarn add gh-pages
Позволить GH-Pages Знаю, где находился мой репозиторий, я добавил Домашняя страница собственность в Package.json Анкет
{
...
"homepage": "deborah-digges.github.io",
...
}
Я добавил еще один сценарий развернуть к моему Package.json который делает сборка а затем толкает public папка в GH-Pages ветвь моего хранилища на GitHub.
"scripts": {
"build": "gatsby build",
"deploy": "npm run build && gh-pages -d public",
}
И вуаля! Я смог развернуть свой сайт вручную с моего компьютера, используя NPM запустить развертывание сценарий Мой сайт тогда работал в deborah-digges.github.io
✨ Неверно развертывание с Travis CI
Большой! Я развернул свой сайт Gatsby! Тем не менее, я не хотел бы развертывать сайт вручную с моего ноутбука в пятницу днем.
Я решил Непрерывное развертывание Мой сайт, чтобы каждый новый коммит был автоматически развернут на моем сайте GitHub Pages. Это было захватывающе, но я обошел важный шаг, который провел автоматизированные тесты для моего сайта, чтобы гарантировать, что плохой коммит не обрушил весь мой блог. Однако я решил жить опасно И сохраните тестирование моего сайта Gatsby для будущего сообщения в блоге.
Подписываясь
Я зарегистрировался на Трэвис CI Веб -сайт с моей учетной записью GitHub и согласился обмениваться моими данными GitHub с Travis.
Включение репозитория
Затем я направился к Репозитории страница и включены сборки для Deborah-digges.github.io репозиторий.
Добавление файла travis.yml
Я добавил travis.yml Задайте корень моего репозитория, чтобы сообщить Трэвису, что делать на каждом коммите Мастер Анкет
language: node_js
before_script:
- npm install -g gatsby-cli
node_js:
- "10"
script: git config --global user.email $GH_EMAIL 2> /dev/null &&
git config --global user.name $GH_USERNAME 2> /dev/null &&
git remote set-url origin "https://${GH_USERNAME}:${GH_TOKEN}@github.com/deborah-digges/deborah-digges.github.io.git" 2> /dev/null &&
yarn install && yarn run deploy 2> /dev/null
Скрипт управляет пряжа пробежать развертывание Шаг, который я ранее использовал для развертывания своего сайта на местном уровне. Он делает несколько дополнительных шагов, чтобы дать Трэвису CI правильный доступ, чтобы подтолкнуть мой репозиторий GitHub.
Он говорит git Клиент установил на Travis CI, кто я есть.
git config --global user.name $GH_USERNAME git config --global user.email $GH_EMAIL
Чтобы обеспечить доступ к сценарию к моему репозиторию GitHub, я встроил свой Github токен переменная среды в удаленном URL.
git remote set-url origin "https://${GH_USERNAME}:${GH_TOKEN}@github.com/deborah-digges/
Откуда взялись эти переменные среды?
Настройка переменных среды Travis
Я направился в настройки репозитория и сделал следующие переменные среды доступными для моего сценария.
Мне потребовалось несколько попыток сделать это правильно, но я с гордостью могу сказать, что мой сайт теперь постоянно развернут на страницах GitHub на каждом коммите мастер ветвь моего репозитория.
Это была большая работа, и в моем стремлении найти более простое решение, я буду исследовать, используя действие GitHub для постоянного развертывания моего сайта. Следите за обновлениями для более опасной жизни!
Оригинал: «https://dev.to/deborahdigges/gatsby-up-running-creating-a-cd-pipeline-2p7m»