Внешний CSS не применяется к моим страницам GitHub Страница 404

#html #css #github #github-pages

#HTML #css #github #github-страницы

Вопрос:

У меня есть страница с ошибкой 404 для моего сайта Github pages, которая использует внешний CSS и изображения, подобные этому:

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 Error - Page not found</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@800amp;display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <link rel='stylesheet' href='./site.css'>
    <link rel="icon" href="./images/icons/icon.ico">
</head>
  

Он отлично работает с моим сайтом GitHub pages, когда URL-адрес содержит только одно имя пути. Например:
введите описание изображения здесь

Однако, когда имя пути превышает одно имя пути, CSS не применяется: введите описание изображения здесь

Моя структура каталогов выглядит так:

 root.
│   404.html
│   index.html
│   site.css
│
├───images
│   │   file1.png
│   │   file2.png
│   │   file3.jpg
│   │   file4.png
│   │   file5.jpg
│   │
│   └───icons
│           file6.png
│           file7.ico
│           file8.png
│           file9.png
│           file10.png
│
This is all that's important
  

Был бы очень признателен за любую помощь!

Ответ №1:

Используйте абсолютный путь вместо относительного.

Вы используете относительный путь ( ./site.css ) вместо абсолютного пути ( /site.css ). При использовании ./site.css он говорит, что в этом каталоге используйте CSS сайта относительно URL. Когда вы добавляете второй каталог, который вы запрашиваете /blah/site.css . Просто удалите точку ( /site.css ), чтобы всегда ссылаться на файл CSS корневого каталога.