问题
I am quite new to Jekyll & webdesign in general. So far I have followed the regular instructions on how to build a new page with jekyll. It all sounds fairly simple in theory. But in practice I experience issues that are just not explained in the theory.
Below I try to be as descriptive as possible:
Directory structure:
├── _includes
│ ├── footer.html
│ ├── head.html
│ ├── header.html
│ └── scripts.html
├── _layouts
│ └── default.html
├── _site
│ └── ...
│
├── css
│ └── style.css
├── fonts
│ └── ...
├── img
│ └── ...
├── js
│ └── ...
│
├──_config.yml
│
├──_gitignore.txt
│
├── CNAME
│
├── index.html
│
└── new_page.md
What I did so far?
1) <link href="css/style.css" rel="stylesheet"> added to head.html: chek!
Structure <head>:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ site.description }}">
<meta name="author" content="{{ site.author }}">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
</head>
2) default.html in _layouts folder: chek!
Structure default.html:
<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
{% include header.html %}
{{ content }}
{% include footer.html %}
{% include scripts.html %}
</body>
</html>
3) index.html in rootdirectory: chek! (homepage is working fine!)
4) new_page.md in rootdirectory: chek! (css is not rendering!)
tryed new_page.html: not working either :(
5) YAML front matter in new_page.md: chek!
6) layout in YAML front matter links to default: chek!
7) When I inspect the new_page url: http://127.0.0.1:4000/boilerplate/about/ I notice the <head> is fully structured with link to css.stylesheet.
Structure _config.yml:
# ----------------------- #
# Main Configs #
# ----------------------- #
url: http://werkbaar.net
baseurl: /boilerplate/
title: WerkBaAr
email: aline@werkbaar.net
author: aline
description: > # ""
copyright:
credits: 'Credits: '
port: 4000
# ----------------------- #
# Jekyll & Plugins #
# ----------------------- #
plugins:
# - jekyll-seo-tag
# - jekyll-sitemap
# Build settings
markdown: kramdown
permalink: pretty
# ----------------------- #
# 3rd Party Settings #
# ----------------------- #
social:
- title: twitter
url:
- title: github
url:
- title: linkedin
url:
Link to Repo: https://github.com/bomengeduld/boilerplate/tree/gh-pages Link to actual website: werkbaar.net
回答1:
The issue is in how you are including the CSS files in your head.html include. Lines #12 and #15:
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
They are using a relative path, which means that when you go to a page that is in a sub-folder of your site, like werkbaar.net/about/, the browser expects the css files to be located at werkbaar.net/about/css/bootstrap.min.css and werkbaar.net/about/css/style.css respectively.
An easy way to fix this, is to start with a / when declaring your CSS files, so that you tell the browser to start from the root of your website.
e.g.
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">
来源：https://stackoverflow.com/questions/47113656/new-jekyll-page-not-rendering-default-css-stylesheet-only-index-html-works-f