Задача

Есть приложение, сгенерированное с помощью create-react-app. Нужно развернуть его на github.io.

Проблемой является то, что Github Pages работает только со статическим кодом и Jekyll.

Решение

Разумеется, нам достаточно просто скомпилировать приложение где-нибудь в другом месте и уже потом выкладывать на github.io

Для этой задачи идеально подошел Travis CI, т.к. как выяснилось, у него есть возможность деплоя на гитхаб из коробки (не нужно изгаляться и писать сложные скрипты для этого).

Я завел два репозитория:

• Код приложения
• Репозиторий со скомпилированной версией, который и использует github.io

Как происходит ручной деплой

1. Компилируем код (yarn build)
2. В папке второго репозитория делаем git rm -r . — это удалит все файлы (кэп).
3. Копируем скомпилированный код во второй репозиторий (cp -r build/ ../compiled-app)
4. git add .
5. git commit
6. git push

.travis.yml

language: node_js
node_js:
- '9.11'

cache:
  directories:
    - "node_modules"

script:
  - yarn test
  - yarn build
  - echo my-custom-domain.ru > build/CNAME

deploy:
  provider: pages
  github-token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
  committer-from-gh: true
  skip-cleanup: true
  keep-history: true
  local-dir: build
  repo: Yourname/compiled-app
  target-branch: master
  on:
    branch: master

Пояснения:

• В разделе script можно увидеть странное echo. Это костыль нужен для сайтов с собственным доменом, т.к. github использует файл CNAME для хранения этой настройки (уж не знаю, почему). Т.к. весь текущий код репозитория будет удален, то и этот файл не сохранится.
• github-token — его нужно сгенерировать в настройках гитхаба. Подробнее здесь ^[1]. Переменную окружения нужно задать в настройках проекта на travis-ci.com
• keep-history — без этой опции репозиторий по сути будет создаваться каждый раз заново (push -f) и отследить историю будет невозможно. С ним же все будет покоммитно (примерно как я описал это в разделе "ручной деплой").
• local-dir — после того, как билд отработал, тревису нужно знать, что именно сохранять в репозиторий. Без этой опции он сохранит весь текущий код, а с ней — определенную папку. Сохранять полностью проект может быть полезно, если вы не хотите использовать два репозитория, как я, а использовать папку docs/ или отдельную ветку, не связанную с кодом.
• repo — это именно та опция, которая позволяет деплой в другой репозиторий. Не забывайте указывать владельца.
• target-branch — в какую ветку именно должен происходить пуш. По-умолчанию gh-pages, я использую master, т.к. у меня это отдельный репозиторий.

Возможные проблемы

Лично я столкнулся только с одной проблемой.

Если не используется custom domain, то сайт будет находиться по адресу yourname.github.io/projectname, и тем самым у меня ломались абсолютные пути (например, /favicon.ico). Я не стал думать над решением, т.к. у меня используется отдельный домен.

Документация

• Getting started with Travis CI ^[2]
• Деплой на github ^[3]
• Создание ключа доступа на github ^[1]

Заключение

Я обожаю github.io и давно хотел поковырять, можно ли туда деплоить компилируемые сайты кроме Jekyll. Было очень приятно обнаружить, что в travis-ci об этом уже подумали.

Еще я сегодня подумал, что возможно лучше было бы не создавать отдельный репозиторий, а просто использовать отдельную ветку. Чтобы не засорять мой список репозиториев, который и так наполнен всяким мусором. Ну, как говорится, c'est la vie

Offtop для тех, кому интересно, что именно я делал

Я играю в игру Heroes of the Storm и хотел сделать небольшое приложение, которое упростило бы для меня выбор персонажа во время драфта. Если короче: фильтр героев по их особенностям.

Вот основной репозиторий: https://github.com/Nondv/storm-picker ^[4].

Репозиторий со скомпилированным кодом: https://github.com/Nondv/storm-picker-compiled ^[5]

Автор: Дмитрий Нон

Источник ^[6]