Styles are not rendered on my GitHub Pages.
Similar to this question. But the solution doesn't work for me. I've tried a lot of things with my _config.yaml url and base urls, but it won't work. The minima theme works fine though, somehow.
Refer to my GitHub issue (basically the same content), repository (the gh-pages branch), and the un-rendered website.
Everything seems fine on my localhost:4000 when I do Jekyll serve.
Here's my _config.yaml
# Setup
title: From Ina
tagline: ''
description: 'Hello, world! Welcome to my very first website : D'
url: http://i7t5.github.io
baseurl: ''
paginate: 5
permalink: pretty
# About/contact
author:
name: Ina Tang
url: https://github.com/I7T5
email: inatang75#outlook.com
# Gems
plugins:
- jekyll-paginate
# Custom vars
version: 0.0.1
google_analytics_id: #UA-XXXX-Y
Issue solved when I replaced the following 'absolute_url' to 'relative_url' in root/_includes/head.html
<link rel="stylesheet" href="{{ '/public/css/poole.css' | absolute_url }}">
<link rel="stylesheet" href="{{ '/public/css/syntax.css' | absolute_url }}">
<link rel="stylesheet" href="{{ '/public/css/lanyon.css' | absolute_url }}">
But I don't understand why the favicons showed up fine with absolute_url 🤔
Related
I have
<link rel="stylesheet" href="/assets/css/my_file.css">
on a simple index page
And this .css file is on _assets/css/my_file.css
But it won't be loaded when I load my page. If I try localhost:4000/assets/css/my_file.css I go to a 404 page.
in jekyll check baseurl in _config.yml
baseurl: "" # the subpath of your site, e.g. /blog
for local development use just empty string like above, then import css like this.
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">
for images:
<img src="{{ site.baseurl }}/assets/img/logo.svg" alt="logo" class="logo"/>
You'll need to create the assets/css folders in your root directory and save my_file.css in there.
Now it will show in your generated _site folder and is available at http://localhost:4000/assets/css/my_file.css
To include it in your header use
<link rel="stylesheet" href="{{ "/assets/css/my_file.css" | prepend: site.baseurl }}">
and you are good to go.
I'm configuring a Jekyll website with the Lanyon theme but the configuration on the site url,baseurl and permalinks is so unclear to me.
Thus my _config.yml uses:
url: "https://edgeoftech.github.io/"
baseurl: /blog
permalink: pretty
And my about.md page uses:
permalink: /about
When the site is served, main page is served at http://127.0.0.1:4000/blog/ and about page at http://127.0.0.1:4000/blog/about, but the ABOUT link on the website takes me to http://127.0.0.1:4000/about.
How can I configure both the link and the 'about' page to be linked to the same url?
I found your question as I was actively searching for the answer myself. I've just sorted it out with the Hyde theme, which is closely related. My _config.yml file looks very similar:
url: https://annedorko.github.io/
baseurl: "/intp/"
permalink: pretty
The trick is actually in the hard-coded URLs. There are two primary places to fix this. The first is in the sidebar.html – be sure to add the site.baseurl in front of the node.url.
<a class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}" href="{{ site.baseurl }}{{ node.url }}">{{ node.title }}</a>
You'll also need to edit all the relative links in head.html, similar to this:
<link rel="stylesheet" href="{{ site.baseurl }}public/css/poole.css">
Finally, be sure to add the updated post links on index.html:
<a href="{{ site.baseurl }}{{ post.url }}">
{{ post.title }}
</a>
This may not cover all of your scenarios as the themes are a bit different (though still based off of Poole), but should get you started in the right direction. Best of luck!
I'm a little bit new, but I was curious about changing the name of my main file in my css folder. I have the css folder, where I am importing my partials.
I initially tried to call this base.css and add the following line in my head.html (in my includes directory).
<link rel="stylesheet" href="{{ site.baseurl }}css/base.css">
However, it still would not load the appropriate main css file. Instead, I had to rename my file to main.css. there has to be a way around this but I wasn't sure and the literature wasn't that helpful.
Thanks so much! I would really appreciate any help.
Starting from Jekyll 3.3, you can use the relative_url filter to avoid adding baseurl, it should be available for GitHub Pages very soon.
<link rel="stylesheet" href={{ "/css/base.css" | relative_url }}>
You can use the prepend option instead:
<link rel="stylesheet" href="{{ "/css/base.css" | prepend: site.baseurl }}">
If you are using Github Pages then ensure that config.yaml includes the base.url variable and it points to your repository name, e.g:
baseurl : '/my-awesome-jekyll-site'
I've spent an hour and a half reading other posts about this issue and still haven't solved it. I believe the file is in the right place and the file path reference is the appropriate one. I'm testing my web application locally trying to style it up a bit and chrome dev tools is saying that the CSS file cannot be found. I'm using Python, Google App Engine and Jinja2. Check out the error for yourself if you'd like. Thanks in advance for your time and expertise!
Here are my HTML files. The second one inherits from the first one.
base.html
<!DOCTYPE html>
<html>
<head>
<title>Chores</title>
<link rel="stylesheet" href="static/style.css" type="text/css" />
</head>
<body>
<a href="/" class="main-title">
Chores
</a>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
front.html
{% extends "base.html" %}
{% block content %}
<br>
<br>
Do Chore
+ Add Chore
- Remove Chore
Chore Details
<br>
<br>
<br>
{% for chore in chores %}
{{ chore.render() | safe }}
<br><br>
{% endfor %}
{% endblock %}
My project directory is structured like...
project-name/
main.py
templates/
HTML files
static/
style.css
Here's my app.yaml...
application: chorestimemadison
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
- name: jinja2
version: latest
You're missing a handler for the static directory:
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /static
static_dir: static
- url: .*
script: main.app
Learn more about why this is necessary.
I'm betting you're having an issue with directory access. If your HTML files are under the templates folder and your templates folder is the location that's being served as http://chorestimemadison.appspot.com/, then the HTML files cannot access the static folder (or the CSS files therein) no matter what URL you use because they're not part of the web server's directory structure.
You'll have to either:
Move the static folder into the templates folder.
Change the root directory of your web server to be project-name instead of templates and change the reference to style.css to ../static/style.css.
As your css and html files are in paralel folders you first need to back off 1 directory with "../" and then type your css path like so
<link rel="stylesheet" href="../static/style.css" type="text/css" />
The way you typed, it's looking for your css in templates/static, because tempalates is your current folder (where the html executes)
Use "./" instead of "/". It helps to get the current directory.
In your case, the code should be:
<link rel="stylesheet" href="./static/style.css" type="text/css" />
I am using generator-jekyllized to build my blog and decided to host it on Github pages. After pushing it to gh-pages (to test it out, and get into the git workflow) I found all the links are broken (They're fine locally). I figured the problem was in the _config.build.yml maybe I had to change the url. But that didn't help.
In _config.yml set baseurl: /ant_blog.
Call assets with : <link rel="stylesheet" href="{{ "/css/styles.css" | prepend: site.baseurl }}"> or <link rel="stylesheet" href="{{ site.baseurl }}/css/styles.css">
Links are like this : <a href="{{ site.baseurl }}{{ page.url }}">