Jekyll on Github Страницы не отображаются CSS

Question

Я экспериментировал с Jekyll, используя Octopress для развертывания. У меня это работает отлично на localhost, но почему-то CSS не загружается, когда сайт загружается на Github Pages. Я был бы признателен за любую помощь, которая понимает, почему.

Когда я просматриваю загрузку сайта по адресу страницы Github Pages, он показывает ошибку 404 для main.css. Колонку инициатор (с помощью инструментов разработчика в Chrome BTW) указывает, что это происходит из файла index.html, на линии в HTML голове:

<link rel="stylesheet" href="/css/main.css"> 

Дерево для _site директории на моей локальной машине является:

. 
├── 2015 
│   └── 11 
│    └── 09 
│     ├── another-jekyll-blog.html 
│     ├── fifth-time-is-the-charm.html 
│     └── jekyll-and-octopress-is-this-thing-on.html 
├── about 
│   └── index.html 
├── css 
│   └── main.css 
├── feed.xml 
├── index.html 
└── jekyll 
    └── update 
     └── 2015 
      └── 11 
       └── 09 
        └── welcome-to-jekyll.html 

Это дерево соответствует именно в репозитории Github после того, как сайт был нажат (я использовал jekyll build, а затем octopress deploy).

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

[USER].github.io 
|-css 
| |-main.css 
| 
|-octo-5 
| |-(index) 

Но когда я просматривать сайт на локальном хосте, дерево сайта:

localhost:4000 
|-css 
| |-main.css 
| 
|-(index) 

Проблема явно связана с тем, как файл main.css ссылается на страницы Github. Я предполагаю, что ссылка на таблицу стилей в индексном файле не работает, потому что main.css не находится в относительном пути /css/main.css, как и ожидалось. Он работает локально, но не на сайте Github Pages. Но я не могу понять, почему, поскольку дерево сайтов кажется правильным, оно не было изменено по умолчанию по умолчанию Jekyll и является локальным и удаленным.

Для хорошей оценки, включая файл _config.yml ниже. Это, по существу, не отличается от настроек по умолчанию при установке, хотя я добавил некоторые настройки Octopress:

# Site settings 
title: Test Site 
email: your-email@domain.com 
description: > # this means to ignore newlines until "baseurl:" 
    Site description here... 
baseurl: "" # the subpath of your site, e.g. /blog 
url: "http://yourdomain.com" 
twitter_username: jekyllrb 

## --- Octopress defaults --- ## 
# Default extensions for new posts and pages 
post_ext: markdown 
page_ext: html 

# Default templates for posts and pages, found in _templates/ 
post_layout: post 
page_layout: page 

# Format titles with titlecase? 
titlecase: true 

# Change default template file (in _templates/) 
post_template: post 
page_template: page 
draft_template: draft 

Для справки, хранилище находится в открытом доступе по адресу: https://github.com/bg-scro/octo-5

Answer 1

В _config.yml установите root: /octo-5.

вызов CSS, как оригинальный octopress:

<link rel="stylesheet" href="{{ root_url }}/css/main.css"> 

Answer 2

Для моего случая (не используя octopress), Когда я проверил обработанную HTML в моем блоге на инспектировать элемент, ссылку на CSS в голову тег был такой:

'/css/main.css' 

Это, кажется, в правильно мне, потому что CSS/main.css или ./css/main.css работал на index.html. Но это сломало вещи на других страницах сообщений.

Итак, держали путь Css быть по умолчанию, но изменил корень в _config.yml, как

root:/

Теперь все работает отлично на местном и после публикации на мерзавца с этим, как корень.

Но да, в вашем случае, это то, что предыдущий ответ сказал,

root: /octo-5 

---

EDIT: Как ни странно, я работал с сохранением корня, как/и я не уверен, что произошло неправильно, но это перестало работать для внутренних страниц. Но это ниже решение работает. Примечание. В проекте по умолчанию для jekyll, baseurl и url, указанном в _config.yml, прокомментированы, поэтому поместите его в соответствии с вами.

В случае, если сайт пользователя

baseurl:/
url: http://USERNAME.github.io 

или

На сайте проекта случае

baseurl: /PROJECT 
url: http://USERNAME.github.io 

разница между Смотрите сайт пользователя и сайт проекта здесь https://help.github.com/articles/user-organization-and-project-pages/