I am using Jekyll to create a website on GitHub Pages. I have a _config.yml file with the following contents (this is the entire file):
theme: jekyll-theme-leap-day
collections:
tutorials:
output: true
I have a few dozen pages in my root folder, and a _tutorials folder which contains about 10 more pages. If it matters, all of my pages are MarkDown (.md extension).
All pages in my root have the proper styling (one of GitHub's built-in themes "Leap Day"). However, all of my subpages have a white background and are left-justified - it seems the theme is not applying there.
The only front matter in any of my pages is where I either specify the title: or (both in the pages in the root and subfolders).
Is there some setting I have to place in my _config.yml to tell the pages in _tutorial to use the same theme as the pages in my root folder? Do I need to put some Front Matter on each page to have it use the theme?
I tried adding the theme explicitly under the tutorials: section in my _config.yml but my tutorial pages still didn't use the theme.
Each theme comes with a specific set of layouts, chances are that your posts aren't using any of the new layout themes, so you need to check if them have a layout key in front natter specifying which layout to use, and change it to make your posts use a specific layout, or define a default layout to use when no layout key is present in posts adding a default value in _config.yml.
Update
Add the default layout to all of your pages in _config.yml:
defaults:
- scope:
path: ""
values:
layout: default
That should fix the issue.
Related
I would like all posts and pages on my Jekyll site to have the same link structure: example.com/my-title, regardless of the directory structure I use to store my files.
Looking at the documentation it seems like I should be able to implement this by putting the following line in my _config.yml:
permalink: /:title.
This almost works. All posts (in the _posts/ directory) get the correct URL. And all pages in my site's home directory also get the correct url. However, pages that are in subdirectories still have the directory path prefixed to the url. For example, if I have a page pages/cats/my-cat.md the URL is example.com/pages/cats/my-cat, instead of what I want (example.com/my-cat). If I set the permalink for that page directly in the front matter as /my-cat I get the desired outcome, but I'd rather not do this on every page.
Is it possible to remove the path from all page URLs?
I see a number of other questions about Jekyll permalinks but nothing that addresses this exactly. This answer from 2013 says that pages will "always remain relative path" but that's fairly old, and also seemed like a throwaway assertion rather than an evidence-backed claim.
You can use Jekyll defaults to apply fallback front matter for files based on a type and/or path. It has the same effect as setting the front matter inside each file. Here's how you could apply that permalink to all pages:
_config.yml:
defaults:
- scope:
path: ''
type: pages
values:
permalink: /:title
It's also a great way to set other common fields, e.g. layout.
Official documentation for further details: https://jekyllrb.com/docs/configuration/front-matter-defaults/
I'm running Jekyll 4.0.0 and Bundler version 1.17.2. As this time of posting, it is the latest version of both Jekyll and Bundler.
I have a template called default, which I use to standardize the appearance of navbar, footer, and location of content being displayed.
The directory structure of my website is as follows:
_data: a folder of yml data files for listings of open source projects I worked on
_includes: a folder containing footer and navbar html files
_layouts: a folder containing liquid templated layout files. This is where "default.html" layout file is located.
_posts: a directory of blog posts that I want rendered by Jekyll
CNAME img: image files index.html credits.html
lib: a directory that hosts all of my CSS, fonts, JavaScript files
logo.ico
opensource: a folder containing layouts related to open source
What I'm having trouble with is adding the credits.html page. Using index.html as a template (since index.html renders perfectly), I have the following meta data pasted at the top of credits.html:
---
title: <my name>
layout: default
description: <my description>
---
Under that are all the HTML related to the contents section of the page. When I test my website locally and on github pages, I noticed Jekyll gives me a 404 not found error. I know this is not true because the moment I put credits.html inside another folder (ie: /credits/credits.html) the page renders fine with the url localhost:4000/credits/credits.
I do have permalink set as "pretty" for the entire static website.
Does anyone know why I can't seem to render the credits page? The index page seems to work just fine. I've tried digging through the documentation, but I can't seem to figure out what is affecting that one page.
** EDIT **
I discovered that if I go to localhost:4000/credits/, the page renders perfectly. This is definitely a permalink issue. Can someone point me in the right direction of how I can fix this issue?
I solved the issue!
The reason is because I had permalink enabled in the global configuration file "_config.yml". Inside that file, I had permalink: pretty set. This is why localhost:4000/credits/ worked but not localhost:4000/credits.html.
To resolve this issue, I removed that setting from the global config file. I also realized at the same time that permalink was not necessary for my use case.
For anyone who is in this situation but requires permalink for other sections of your website, set permalink per template file via front matter instead.
I'm new to using Jekyll theme for GitHub page. I was able to successfully customize a local theme following Customizing your Jekyll theme's CSS but I couldn't find any documentation about what to do if the theme is remote.
Here is what I tried. First, I started with a clean GitHub page and followed step 4 in Adding a Jekyll theme in your site's _config.yml file to opt-in my theme that's forked from GitHub's default theme
_config.yml:
github: [metadata]
encoding: UTF-8
kramdown:
input: GFM
hard_wrap: false
future: true
jailed: false
- theme: jekyll-theme-primer
+ remote_theme: chuanqisun/primer
gfm_quirks: paragraph_end
At this point, everything just works out-of-the-box. But when I add
---
---
#import "{{ site.theme }}";
in /assets/css/style.scss, GitHub Page complaints that site.theme doesn't exist.
So I also tried
---
---
#import "{{ site.remote_theme }}";
but the import still failed.
Does anyone know if it is possible to customize a remote theme? I know that I can just make customization in my forked repository but some customization are specific to one site and I want to store that in my site's repo. This way I can share the theme with multiple sites without enforcing one site's customization to the rest of the sites. Thanks!
For anyone in a similar situation, here is what worked for me, using the Minimal mistakes theme as a remote theme.
It has no assets/css/style.scss, but an assets/css/main.scss that then imports all the partial files under _sass. Trying to import main or empty brackets as the official docs suggest, doesn't work. The way to go is to copy the main theme's file and then customize it.
So in this case I created a local copy of assets/css/main.scss and appended the desired css changes. That was enough. If a theme doesn't have one central file tying everything together, you might need to copy more files, but that's it.
In my site settings, I have the default
baseurl: ""
My site is a blog and my domain name already includes the word blog (blog.example.com), but when I add posts to my site they end up with the path /blog/yyyy-mm-dd/title-here.
How can I get them to be put in /yyyy-mm-dd/title-here instead (without the initial /blog path)?
I am using GitHub pages to serve my site, so I cannot use mod_rewrite.
The baseurlsetting is not relevant for this.
Adding permalink: :year/:month/:day/:title to _config.yml gives the desired permalink style.
I am trying to use Github Pages and Jekyll for the first time. I created a repo and followed the instructions to set it up.
I am having trouble getting the default layout to work. A layout file: _layouts/default.html exists in the repository and my _config.yml looks like:
defaults:
-
scope:
path: ''
values:
layout: 'default'
Even with the setting above, the pages are not getting the default layout applied. See the Github Repositry and My github page that currently shows:
Look in _config.yml, why is default layout not being applied??
Without any layout.
What am I missing?
All your pages must have a front matter (event empty) if you want Jekyll to parse them.
Without a front matter, your pages are just copied like static files.
So, your index.html must be :
---
---
Look in _config.yml, why is default layout not being applied ?
default layout is them applied.