Страницы Github предоставляют альтернативный вариант размещения страниц непосредственно из репозиториев.

GitHub Pages — это служба размещения статических сайтов, которая берет файлы HTML, CSS и JavaScript прямо из репозитория на GitHub, при необходимости запускает файлы в процессе сборки и публикует веб-сайт.

— https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages

Несмотря на то, что мы являемся службой размещения статических файлов, мы можем создавать динамические веб-приложения. В этой статье мы будем использовать Vue.js для создания приложения и его развертывания на github.

Vue (произносится /vjuː/, как и view) — это среда JavaScript для создания пользовательских интерфейсов. Он построен на основе стандартных HTML, CSS и JavaScript и предоставляет декларативную модель программирования на основе компонентов, которая помогает вам эффективно разрабатывать пользовательские интерфейсы, будь то простые или сложные.

— https://vuejs.org/guide/introduction.html#what-is-vue

Гитхаб

Страницы Github позволяют использовать три типа сайтов GitHub Pages: проект, пользователь и организация. Выбранный тип определяет имя создаваемого репозитория.

Для личного сайта имя репозитория должно соответствовать шаблону <username>.github.io.

Для веб-сайта организации необходимо создать репозиторий по шаблону <organization>.github.io. Он должен принадлежать организации.

Каждая учетная запись GitHub может иметь личный веб-сайт, и каждая организация может иметь веб-сайт типа организации. Что касается типа проекта, то такого ограничения нет.

Давайте создадим веб-сайт проектного типа. Перейдите на github и создайте новый репозиторий. Поскольку тип будет проектным, нам не нужно следовать шаблонам, описанным выше.

Для этого урока мы выберем bravecl-public в качестве имени репозитория. Этот репозиторий должен быть общедоступным.

Настроим репозиторий локально. Github предлагает быструю настройку, показанную сразу после создания репозитория. Вы можете напрямую клонировать репозиторий или воспользоваться одним из вариантов быстрой настройки.

Создайте файл index.html со следующим содержимым:

В типе проекта GitHub предлагает, чтобы файлы были в корне ветки gh-pages.

Давайте сначала зафиксируем наш файл index.html. Запустите следующие команды в терминале:

git add index.html
git commit -m "Hello world index.html"
git push -u origin main

Теперь давайте создадим ветку gh-pages и отправим ее в репозиторий. Запустите команды ниже:

git checkout -b gh-pages
git push -u origin gh-pages

Получите доступ к своему проекту на Github и перейдите в «Настройки». Перейти на страницы в левом меню.

Теперь ваш сайт размещен и опубликован на страницах github. Вы можете использовать предоставленную ссылку для доступа к нему.

Пользовательский домен

Этот шаг является необязательным.

Если у вас есть домен, вы можете его использовать. В нашем случае мы будем использовать домен test.bravecl.com вместо rodrigoatbravecl.github.io/bravecl-public/.

На странице «Настройки» › «Страницы» в разделе «Собственный домен» добавьте свой домен и нажмите «Сохранить».

Github будет жаловаться, что вам нужно настроить DNS. Нам нужно настроить запись CNAME. Имя реестра должно быть выбранным доменом, а значение должно быть <user>.github.io. В нашем случае cname должно содержать имя: test.bravecl.com. значение: rodrigoatbravecl.github.io.

Настройка DNS выходит за рамки этой статьи. Если вы настроили его правильно, вы можете протестировать его с помощью команды dig. В случае test.bravecl.com мы можем запустить:

dig test.bravecl.com cname

Вы можете включить функцию Enforce HTTPS для повышения безопасности.

Vue.js

Теперь, когда наш привет, мир работает на страницах Github, давайте создадим наш проект Vue.js.

Вам нужно будет установить nodejs, доступный на https://nodejs.org/.

Мы будем использовать Visual Studio Code в качестве IDE. Откройте папку репозитория. Запустите команду ниже в терминале, чтобы создать проект Vue.js:

git checkout master
npm init vue@latest dev

Выберите следующие параметры:

  • Добавить TypeScript? Нет
  • Добавить поддержку JSX? Нет
  • Добавить Vue Router для разработки одностраничных приложений? Да
  • Добавить Pinia для управления состоянием? Да
  • Добавить Vitest для модульного тестирования? Нет
  • Добавить Cypress как для модульного, так и для сквозного тестирования? Нет
  • Добавить ESLint для качества кода? Да
  • Добавить Prettier для форматирования кода? Да

Новый проект будет создан в папке dev. Запустите в терминале:

cd dev/
npm install

Ваш проект должен выглядеть, как показано выше. Запустите npm run dev и получите доступ к localhost:3000 в своем браузере.

Создание и развертывание

Откройте файл vite.config.js и отредактируйте его, как показано ниже. Давайте установим папку назначения /docs в корне вашего репозитория.

Если у вас не настроен личный домен, в хостинге проекта необходимо также настроить базовый путь, как показано ниже, заменив /bravecl-public/ на /<repository_name>.

Запустите npm, запустите сборку. Папка docs будет создана в корне вашего репозитория.

В терминале введите команды ниже:

cd ..
git add -A
git commit -m "Vue project creation"
git checkout gh-pages
git merge main

Приведенные выше команды объединяют проект Vue, созданный в ветке gh-pages. Перейдите на страницу конфигурации вашего репозитория на GitHub и в Source измените его на /docs. Щелкните Сохранить.

Теперь давайте обновим наш репозиторий с помощью GitHub и отправим. Если вы используете собственный домен, git pull откроет файл CNAME, созданный git, и вам потребуется ввести сообщение для слияния.

git pull
git push

Ниже обновленный сайт.