GitHub Pages теперь использует настраиваемые рабочие процессы GitHub Action для сборки и развертывания кода, чтобы разработчики могли контролировать свои авторские рамки и развертывание. GitHub Pages — это мощный вариант для хранения статического контента по следующим причинам:
- Это бесплатно.
- Это упрощает совместную работу. Любой может открыть запрос на обновление сайта.
- Ваш репозиторий синхронизируется с любыми изменениями, которые вы внесли на сайт.
- Хотя GitHub Pages поставляется с доменным именем по умолчанию, например,
https://YOUR_USER_NAME.github.io/, он поддерживает пользовательские домены. - Он использует настраиваемые рабочие процессы GitHub Action для сборки и развертывания.
Давайте узнаем, как размещать статические сайты, созданные с помощью HTML, на GitHub Pages!
После создания и хранения HTML в репозитории перейдите на вкладку настроек этого репозитория.
Нажмите Pages на левой боковой панели
В разделе сборка и развертывание выберите GitHub Actions
Это предложит вам несколько рабочих процессов на основе кода в вашем хранилище. Вы можете выбрать Static HTML.
Нажав кнопку configure, вы попадете в готовый рабочий процесс. Не стесняйтесь просмотреть YAML, подправить его в соответствии с вашими предпочтениями и зафиксировать код.
Через несколько секунд ваш Action начнет выполняться. Оно сгенерирует URL и в случае успеха развернет ваш статический сайт на GitHub Pages.
Перейдите по URL-адресу yourusername.github.io/your_repo_name, чтобы посмотреть на ваш живой сайт!
- Проблемы: работа с путями к активам
- Пример
- blackgirlbytes / blackgyalbites
- шаблон меню ресторана без прикосновений, размещенный на GitHub Pages
- blackgyalbites
- Шаблон для бесконтактных меню и статических страниц, построенных с помощью любого фреймворка на GitHub Pages
- Сайт, построенный на HTML & CSS для отображения меню ресторана, когда пользователи сканируют QR-код.
- Powered By GitHub Pages
- Дизайн и разработка
- Узнать больше
Проблемы: работа с путями к активам
Когда я впервые опубликовал свой сайт на GitHub Pages, я был озадачен и удивлен тем, что не смог увидеть ни изображений, ни PDF-файлов, хотя они присутствовали на локальном хостинге сайта. Это произошло потому, что GitHub Pages по-разному обрабатывает пути.
Например, если у меня PDF находится по такому относительному пути: assets/pdfs/menu-food.pdf, то после размещения на GitHub Pages новый путь будет обновлен до {"ИМЯ РЕПОЗИТОРА"}/assets/pdfs/menu-food.pdf.
Пример
Вот пример репозитория, который я создал с помощью этого метода
blackgirlbytes / blackgyalbites
blackgirlbytes / blackgyalbites шаблон меню ресторана без прикосновений, размещенный на GitHub Pages
blackgyalbites
Шаблон для бесконтактных меню и статических страниц, построенных с помощью любого фреймворка на GitHub Pages
Сайт, построенный на HTML & CSS для отображения меню ресторана, когда пользователи сканируют QR-код.
Powered By GitHub Pages
Это демонстрация, показывающая разработчикам, что они могут создавать и размещать статические веб-сайты, используя любой фреймворк. Посмотрите другие примеры фреймворков, размещенных на GitHub Pages:
- HTML и CSS
- Next.js и Tailwind CSS
- Astro
Живой сайт: https://blackgirlbytes.github.io/blackgyalbites
Дизайн и разработка
Все дизайны и элементы являются открытым исходным кодом и доступны бесплатно для любого использования.
Принадлежит Ризель Скарлетт (@blackgirlbytes)
Дизайн разработан The Holistic Technologist
Иллюстрации Cuoc Doi Prints
Не стесняйтесь, копируйте, настраивайте и используйте в любых целях. Этот проект полностью с открытым исходным кодом и под лицензией MIT.
Шаблон дизайна меню: Canva
Загрузить активы и элементы дизайна: Google Drive
Узнать больше
- Посмотрите доклад Томми Берда об использовании GitHub Pages с Actions для развертывания сайтов Hugo за считанные секунды.
- Репозиторий и ReadMe для Deploy Pages
- Анонс изменений от GitHub
- Официальное сообщение в блоге GitHub
Посмотрите на YouTube этот замечательный ролик Кедаша, демонстрирующий, как использовать настроенный рабочий процесс для развертывания генератора статических сайтов на GitHub Pages!
Мне бы хотелось услышать ваши мысли о новых настраиваемых рабочих процессах для развертывания на GitHub Pages. Комментируйте ниже! Следите за GitHub и за мной на DEV, чтобы получать больше материалов, подобных этому!