Jekyll : Using links to internal markdown files - html

md file with a link to Folder/file.md
When jekyll generates the index the link to the file is still folder/file.md and so doesn't connect to the generated file.html. Can jekyll replace links in markdown with their corresponding html files?
I really want to to maintain my folder structure (7 or so subfolders, each with 3 markdown files).

The answer since December 2016 is to use the jekyll-relative-links plugin.
It is a white-listed plugin if you are hosting on GitHub pages so you probably already have it.
If you are not using GitHub pages you will need the following installation instructions (from the README):
1.Add the following to your site's Gemfile:
gem 'jekyll-relative-links'
2.Add the following to your site's config file:
gems:
- jekyll-relative-links

The tag you're looking for is {% link %} and it arrived in 2016.
If you had {% link _funkyCollection/banjo.md %} it would generate the right path to the output file funkyCollection/banjo.html, or funkyCollection/banjo/index.html, or whatever, wherever it ends up being.

This is what I did to solve this problem with jekyll 3.8.5.
For link in root directory: /file.md
---
layout: page
title: Root File
permalink: /file/
---
This file is in root directory.
For link in subdirectory: /folder/file.md
---
layout: page
title: SubDir File
permalink: /folder/file/
---
This file is in sub-directory.
Now to link these file:
[Root File]({{site.baseurl}}/file/))
[Sub Dir File]({{site.baseurl}}/folder/file/)
Hope this helps someone.

i've written a simple plugin to solve this. put this in _plugins/, and make links refer to the *.md files (so github rendering linking works); if you build it with jekyll (when you are able to run plugins) the links are changed to *.html. since github doesn't run plugins, this isn't applied.
module ChangeLocalMdLinksToHtml
class Generator < Jekyll::Generator
def generate(site)
site.pages.each { |p| rewrite_links(site, p) }
end
def rewrite_links(site, page)
page.content = page.content.gsub(/(\[[^\]]*\]\([^:\)]*)\.md\)/, '\1.html)')
end
end
end
it's not perfect (i'm sure you could fool the regex) but it has been good enough for my purpose.

A Folder/file.md page will result in creation of a _site/Folder/file.html page.
So when your link to this page it's [Link to page]({{site.baseurl}}/Folder/file.html) not [Link to page]({{site.baseurl}}/Folder/file.md).
Jekyll will never rewrite file.md to file.html in url. So you have to set your links targets yourself to the resulting page.url which is usually a html file but can be css, je, json, ...
If you use permalink: /folder/folder/ in any file.md, it will generate a /folder/folder/index.html file which can be reached with [Link to page]({{site.baseurl}}/folder/folder/)

I've run into this and written a basic Jekyll/Kramdown plugin. It's less likely to break than the regular expression approach.
As long as your link doesn't start with http:// or something like it, and ends with .md, it will convert links to their lowercased and hyphenated names.
Of course, you could always modify the behavior to fit your needs.

Related

Jekyll not rendering templated page

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.

Jekyll does not create html page from markdown file

I'm new to Jekyll and build a webpage using the TeXt Theme. I downloaded all files and created a local Jekyll website which runs successfully. The project folder contains the folders
_data
_includes
_layouts
_posts
_sass
_site
assets
docker
docs
screenshots
test
tools
The rest of the files in the folder are _config.yml, index.html, etc.
Now let's say I want to create a new page "Bio" that appears as an entry or name in the navigation bar at the top of the website like "about" or "archive".
I create a .md-file in the main project folder (i.e. where index.html lies) and specify in the front matter the layout - in the case of TeXt it is
layout: page
Also, in the _data folder I open the navigation.yml and append under "header" a new title called "Bio", i.e.
header:
title: Bio
url: /Bio.html
This is completely analogue to the about-page that is in the navigation bar and works properly.
But when I do it like this with Bio I get a 404 error and Jekyll is not able to find the site.
I searched all folders of the project and found that Jekyll does not create the necessary.html-file Bio.html on the basis of Bio.md. It just moves Bio.md into _site.
Hence, the url given in the navigation.yml cannot be found and I get the error. How do I get Jekyll to create the Bio.html?
If Bio.md is just copied, that means that Jekyll thinks it's a static file.
You're certainly missing a correct Front matter.
Your Bio.md should look like :
---
layout: page
title: Bio
---
## Content here
...
If problem persists, please add a repository url to help debug.
I figured out the answer myself. It is the notorious UTF-8 BOM issue with Jekyll. The file Bio.md was written in Notepad which uses BOM by default. Using ANSI instead solved the problem entirely without changing anything at the previous front matter.

Customize Jekyll remote theme for GitHub Pages

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.

Can you change the root directory in jekyll

I've been trying to change the root directory of my jekyll site to another folder but I can't seem to find a way to do this and was wondering if it's possible?
What I want is for all of my html pages to be in a folder named _pages, and for my website to load index.html from this folder. Currently I can only get this working by changing the baseurl and accessing the website by www.domain.com/pages/index.hmtl. Can I have it so the html files remain in this folder, and have jekyll render the site so that I can access index.html from www.domain.com/ ?
Thank you
In your _config.yml file you'll need to include the directory where your HTML pages live like this:
include: [_pages]
In your _pages/index.html file include a permalink in the frontmatter like this:
---
permalink: /
---
Run your Jekyll build command again. If I understand your question correctly, this will output your homepage without needing to have or adjust your baseurl.

Jekyll: All HTML files in /folder, now forced rendering through /folder/page/. How to change?

So I've tried looking here:
http://jekyllrb.com/docs/permalinks/
and here:
Show pages under one folder in Jekyll?
But this doesn't seem to resolve my issues.
So here is the situation:
Initially, I had all my Jekyll *.html files living in the /root folder of where I am running Jekyll, this was a bit messy, as there was over 30 *.html files, but when I did this:
jekyll build
jekyll serve
I would get the site propagating to: http://0.0.0.0:4000/
I now moved all the *.html files to a folder called /html (within the project root). When running:
jekyll build
jekyll serve
My site no longer renders at: http://0.0.0.0:4000/
But it renders at: http://0.0.0.0:4000/html/
I would like to remove the /html part of the URL, but as the above 2 links show, there was no previous question related to this.
Can anybody suggest how I can remove the /html part from my URLs?
Okay, so initially your folder structure looked like this, correct?
/_layouts/default.html
/css/whatever.css
/index.html
Now to your question:
Do you want to move the HTML files and nothing else to the html subfolder?
In other words, do you want to do this?
/_layouts/default.html
/css/whatever.css
/html/index.html
If yes, read David Jaqcuel's answer.
If not, continue reading my answer :-)
Or is it just that you don't want all your source files cluttering up your root folder?
If yes, you could move everything into the html subfolder, like this:
/html/_layouts/default.html
/html/css/whatever.css
/html/index.html
Then you need to tell Jekyll that the html folder is the root folder for the site's source files.
To do so, you need to add the following line to the config file (or create the file if it doesn't exist yet):
source: html
Important: the config file needs to be in the root folder of your project, even if you move your source files into a subfolder!!
Then all your source files are in the html subfolder, but the generated site will look like this:
/_layouts/default.html
/css/whatever.css
/index.html
In other words, the URL will still be http://0.0.0.0:4000/.
If you want to see an example, you can look at the source code of my blog:
I'm doing exactly the same there, only that the folder with the source files is called src.
By default, for pages in /html, Jekyll will generate a page like /html/page.html and so on.
I think you cannot add a permalink front matter default for a folder, you'll be obliged to set a permalink for each page you put in /html.
eg : for html/page.hmtl, you'll have to set :
---
permalink: page.html
---
This is the way without plugin. Otherwise, you can do it with a Generator plugin that will take all your pages in /html and change the all the target permalink.