VuePress + Travis CI + Github Pages полностью автоматическая онлайн-документация

JavaScript

автор:codexu

вся идея

1. Создайте проект на Github, локально переключитесь на ветку документации, создайте проект документации (напишите документацию) через VuePress и загрузите его на Github.

2. Travis CI автоматически клонирует и устанавливает зависимости, компилирует и загружает в основную ветку Github.

3. Отобразите содержимое основной ветки в Интернете с помощью функции GitHub Pages.

Релевантная информация:

Создать проект

1. Используйте VuePress для инициализации проекта, просто скажу несколько моментов,ДокументацияНаписано очень подробно.

  • Зависимости устанавливаются в devDependencies.
  • Сценарий package.json Напишите сценарии запуска и упаковки, «serve»: «vuepress dev docs», «build»: «vuepress build docs». (По моим собственным привычкам здесь, я буду использовать его позже для непрерывной интеграции)
  • Создайте папку docs и храните здесь все документы уценки.
  • docs/.vuepress/config.js может выполнять множество настроек.

2. Используйте Github для создания проекта [имя].github.io, Например, мой документ — codexu.github.io, который связан с локальным.

Зачем использовать [имя].github.io?

Потому что в этом проекте вы можете напрямую использовать доменное имя https://[name].github.io/, которое короткое и мощное~

3. Пройтиgit checkout -b docsПерейдите в ветку docs. В ветке docs хранится исходный код документа, а в ветке master хранятся упакованные HTML и другие файлы.

Зачем использовать ветку master для хранения упакованных файлов?

Поскольку в проекте [name].github.io нет опции, вы также можете перейти на другой репозиторий, чтобы избежать этой проблемы.

4. Напишите несколько документов, выполните простую настройку, не спешите отправлять на Github.

Автоматическая упаковка и развертывание с помощью Travis CI

1. Создать в корневом каталоге.travis.ymlфайл и напишите некоторый контент:

language: node_js
node_js:
    - 10
cache: yarn
install:
    - yarn
script:
    - yarn build
after_success:
    - cd docs/.vuepress/dist
    - git init
    - git config --global user.name "${U_NAME}"
    - git config --global user.email "${U_EMAIL}"
    - git add -A
    - git commit -m 'deploy'
    - git push --quiet --force "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}
  • язык: выбор языка node_js, у нас все еще есть выбор во внешнем интерфейсе?
  • node_js: версия узла, может быть, чем выше, тем быстрее?
  • кеш: кеш пряжи, который ускоряет ваши сборки...
  • install: Установите зависимые инструменты управления пакетами, использование yarn намного быстрее, чем npm.
  • script: Установите зависимости через yarn install после того, как все будет готово.
  • after_success: После установки мы делаем упаковку и отправляем инструкции на Github.
  • переменная среды"${***}"Об этом будет сказано позже.

2. В это время можно пушиться на Github, т.к..travis.ymlTravis CI проигнорирует ваш проект и изменит ветку по умолчанию на docs.

3. Github добавляет токены личного доступа, расположенные по адресуSettings / Developer settings.

  • Примечание Не стесняйтесь заполнять, просто заполните travis-ci.
  • В дополнение к разрешениям delete_repo вы можете подключиться.

4. ВведитеTravis CI, используйте Github для входа, введитеdashboard, вы должны увидеть только что созданный проект.

5. Запустите этот проект, нажмите «Дополнительные параметры» в правом верхнем углу, нажмите «Настройка» и настройте переменные среды.

  • GH_REF: адрес проекта (github.com/[имя]/[имя].github.io.git) следует удалить.https://.
  • Gh_token: токен получается через третью часть выше.
  • P_BRANCH: ветка для загрузки, здесь мы хотим загрузить на мастер.
  • U_EMAIL: ваш адрес электронной почты Github.
  • U_NAME: ваше имя пользователя Github.

Открыть страницы GitHub

Категории