Размещаем VuePress HelloWold на GitHub Pages

VuePress — генератор статических сайтов. Упрощённо, вы пишите несколько файлов в Markdown, запускаете генератор и эти несколько файлов преобразуются в страницы сайта. Причем сайт не требует хостинга с возможностью выполнения скриптов, достаточно отображения статических файлов.

Рассмотрим HelloWold от установки всех приложений до деплоя сайта на GitHub Pages. Полный текст примера находится в репозитории.

Устанавливаем приложения

VuePress основан на JavaScript фрейморвке Vue поэтому для его работы нужен Node.js, установите его. Для удобной работы с зависимостями установите yarn.

Создаём проект

Создайте каталог HelloWold, зайдите в него и создайте файл 01_CreateProject.bat с текстом

Bat файл нужен вместо запуска команд вручную, так как, создавая его, решение задачи становится воспроизводимым. Это значительно повышает эффективность работы в долгосрочной перспективе.

После запуска 01_CreateProject.bat yarn создаст проект (можете не вводить никаких данных и нажимать Enter) и установит VuePress. В каталоге HelloWold появится новый файл, откройте его и добавьте в него следующий скрипт:

Должно получится примерно так:

Не пропустите запятую перед полем "scripts".

Создаём главную страницу

В каталоге HelloWold создайте каталог docs, а в нём файл Readme.md с содержанием:

Запускаем сайт

Создайте файл 02_RunProject.bat с текстом:

Запустите его. Сейчас сайт запущен локально, откройте его по адресу localhost:8080.

Выкладываем проект на GitHub Pages

Настройте доступ к GitHub по SSH и создайте новый репозиторий.

Перед загрузкой на GitHub в проект необходимо добавить настройку базового пути. Для этого создайте файл docs/.vuepress/config.js.

Замените REPO на имя вашего репозитория, слешы перед и после названия обязательны. Затем создайте файл 02_RunProject.bat с текстом:

Запустите его. Этот скрипт собирает проект, собранный проект готов к фиксации на GitHub.

Для деплоя создайте ещё один файл 04_DeployProject.bat с текстом

Только замените USENAME на имя аккаунта GitHub, а REPO на имя репозитория. Запустите файл. После успешной фиксации проект окажется в репозитории.

Теперь зайдите в настройки репоизтория и выберите ветку gh-pages в настройках GitHub Pages.

Настройка GitHub Pages в параметрах репозитория

Переходите по ссылке https://USERNAME.github.io/REPO/ и проверяйте работу сайта.

Ссылки

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *