Решение проблемы с относительными путями в GitHub Pages

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для корректной работы с GitHub Pages используйте относительные URL, начинающиеся с корня. Относительные ссылки записывайте в формате /имя-репозитория/ для правильной связи файлов между собой.

Вот пример для репозитория с названием my-repo:

HTML

Скопировать код

<!-- Адрес изображения -->
<img src="/my-repo/images/logo.png" alt="Логотип">

<!-- Ссылка на CSS-файл -->
.url('/my-repo/styles/main.css');

Не забывайте заменять /имя-репозитория/ на название своего проекта.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Jekyll: спутник в мире URL

Если вы используете Jekyll, установите в _config.yml параметр baseurl на /имя-проекта. Это обеспечит стабильность путей как в локальной среде, так и при публикации.

yaml

Скопировать код

baseurl: "/my-project" # Ключевое слово моего проекта: Мой Проект!

Для того чтобы работать в локальном режиме с Jekyll, воспользуйтесь следующей командой:

Bash

Скопировать код

jekyll serve --baseurl=""

Так вы сможете иметь одинаковые условия для локальной и опубликованной версии сайта.

Тег `<base>` указывает путь

Тег <base>, добавленный в раздел HTML <head>, поможет в правильном присвоении путей:

HTML

Скопировать код

<head>
  <!-- Моя стартовая точка -->
  <base href="/my-repo/">
</head>

Этот тег идеально сочетается с {{ site.baseurl }} при использовании Jekyll.

Визуализация

Взглянем на работу с относительными и абсолютными путями, представив их как ориентиры в городе:

Markdown

Скопировать код

Ваш сайт на GitHub Pages (🖥️) — это как район с домами (🏡🏡🏡):

- **Абсолютный путь**: Аналог GPS-координат (🌐).

- **Относительный путь**: Совет хорошего соседа, который подскажет путь к ближайшему дому (🚶‍♂️→🏡).

Markdown

Скопировать код

Ваш дом (🏠): 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.