Картинки и стили не грузятся после выкладывания сайта, хотя локально всё было. В чём дело?
Локально мой сайт открывался идеально — стили, картинки на месте. Выложил на GitHub Pages — страница открывается, но без оформления и без картинок (вместо картинок битые иконки). В консоли браузера ошибки 404 на style.css и на картинки. Что я сделал не так?
2 ответа
Классическая проблема — неправильные пути к файлам. Локально многое прощается, а на хостинге пути должны быть точными. Проверь три вещи:
- Регистр букв. Linux-сервер (а GitHub Pages на нём) различает
Style.cssиstyle.css! Если в HTML написано<link href="Style.css">, а файл называетсяstyle.css— будет 404. На твоём Windows это работало, на сервере — нет. Сделай имена и ссылки одинаковыми, лучше всё маленькими буквами. - Абсолютные пути с диска. Если осталось
src="C:/Users/.../cat.png"— на сервере такого пути нет. Должно быть относительно:src="img/cat.png". - Слэш в начале пути. Если сайт лежит в подпапке
username.github.io/mysite/, то путь/style.css(со слэшем) ищет файл в корне домена, а не в твоей папке. Убери ведущий слэш:style.cssили./style.css.
Открой консоль (F12 → Console/Network), посмотри, по какому именно адресу браузер ищет файл, и сверь с реальным расположением — сразу станет видно расхождение.
Быстрый способ избежать всей этой боли заранее: ещё локально открывай сайт не двойным кликом (file://), а через локальный сервер (например, расширение Live Server в VS Code). Тогда поведение путей будет почти как на хостинге, и битые пути всплывут до деплоя, а не после.