Получить профессию в Skypro
Решение проблемы с относительными путями в GitHub Pages
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для корректной работы с GitHub Pages используйте относительные URL, начинающиеся с корня. Относительные ссылки записывайте в формате /имя-репозитория/ для правильной связи файлов между собой.
Вот пример для репозитория с названием my-repo:
<!-- Адрес изображения -->
<img src="/my-repo/images/logo.png" alt="Логотип">
<!-- Ссылка на CSS-файл -->
.url('/my-repo/styles/main.css');Не забывайте заменять /имя-репозитория/ на название своего проекта.
Jekyll: спутник в мире URL
Если вы используете Jekyll, установите в _config.yml параметр baseurl на /имя-проекта. Это обеспечит стабильность путей как в локальной среде, так и при публикации.
baseurl: "/my-project" # Ключевое слово моего проекта: Мой Проект!Для того чтобы работать в локальном режиме с Jekyll, воспользуйтесь следующей командой:
jekyll serve --baseurl=""Так вы сможете иметь одинаковые условия для локальной и опубликованной версии сайта.
Тег <base> указывает путь
Тег <base>, добавленный в раздел HTML <head>, поможет в правильном присвоении путей:
<head>
<!-- Моя стартовая точка -->
<base href="/my-repo/">
</head>Этот тег идеально сочетается с {{ site.baseurl }} при использовании Jekyll.
Визуализация
Взглянем на работу с относительными и абсолютными путями, представив их как ориентиры в городе:
Ваш сайт на GitHub Pages (🖥️) — это как район с домами (🏡🏡🏡):
- **Абсолютный путь**: Аналог GPS-координат (🌐).
- **Относительный путь**: Совет хорошего соседа, который подскажет путь к ближайшему дому (🚶♂️→🏡).Ваш дом (🏠): index.html
Дом соседа (🏡): about.html- Относительные пути: По подсказкам соседей (🚶♂️→🏡) вы наверняка доберетесь до нужного места.
- Попробуйте избегать пересечения с главными магистралями (🛣️). С ними встречаются только сложности.
Решение проблем с GitHub Pages
Эффективный способ избежать проблем на GitHub Pages — отказаться от абсолютных путей. Важно также грамотно организовать структуру каталогов, чтобы навигация по вашему сайту была интуитивной.
Принципы кэширования GitHub Pages предусматривают, что обновления могут занять до 15 минут. Имейте это в виду.
Учимся на примерах: Bootstrap и плагины
Изучайте, как организованы ссылки в известных фреймворках, например, в Twitter Bootstrap, которые адаптированы под разные условия.
Также обратите внимание на плагин Jekyll Relative Links. Он упрощает преобразование относительных ссылок в Markdown документах в постоянные ссылки.
Предварительный просмотр перед публикацией
Перед публикацией проверяйте вносимые изменения на локальном сервере — это идеальная подготовка к запуску ваших страниц в режиме GitHub Pages.
Не забывайте: ваши страницы могут быть опубликованы прямо из главной ветки.
Полезные материалы
- Документация GitHub Pages – GitHub Docs – Введение в работу с GitHub Pages и ознакомление со структурой.
- HTML File Paths – Объясняется разница между относительными и абсолютными путями в HTML.
- Статические файлы | Jekyll – Инструкция по работе со статическими файлами в Jekyll на GitHub Pages.
- Напоминание о файлах и путях | CSS-Tricks – Освежите знания об управлении путями активов в веб-проектах.
- <base>: The Document Base URL Element – HTML | MDN – Значение HTML элемента
<base>и его влияние на относительные пути. - Stack Overflow Discussion: Relative URLs on GitHub Pages – Советы и рекомендации по работе с относительными URL на GitHub Pages.