I'm working through a guide for setting up Jekyll on GitHub Pages. My GitHub repo publishes to ~.github.io/hello-pages, so naturally I'm plugging {{ site.baseurl }} into anchor tags, etc. That's working great.
What isn't working is permalinks: I have to manually spell out permalink: /hello-pages/blog/:year/:month/:day/:title.html in _config.yml for any of the permalinks to work; otherwise they link to e.g. ~.github.io/blog/x/y/z instead of ~.github.io/hello-pages/blog/x/y/z like I expect.
Manually specifying baseurl: /hello-pages has no effect (I suppose GitHub's Jekyll config already does that).
Manually typing "/hello-pages" anywhere seems like quite a rigid design that I'd like to avoid. An older SO answer says that permalinks should "just work". What gives?
Edit
I am constructing the broken URLs like this:
<a href="{{ post.url }}">
I just figured out what I was doing wrong. I need to do one of the below things. Here is documentation about this: https://jekyllrb.com/docs/templates/#filters
<a href="{{ post.url | relative_url }}">
This turns the URL into a relative URL, taking the base URL into account.
<a href="{{ post.url | absolute_url }}">
Same as the above, but makes absolute URLs.
<a href="{{ post.url | prepend:site.baseurl }}">
Prepends the base URL to the permalink.
Related
Is it possible to change the target URL when clicking on the value title defined in _config.yml ?
To define the context, I have my static HTML website hosted on GitHub, it's a one page website. I have on the same repository the Jekyll blog accessible on mysite.github.com/blog.
When I click on the header title, the Jekyll blog redirect me to / which is my website and I would like to be redirected in /blog.
What is the simpliest method ?
You need to rewrite the header.html of the minima theme template. The goal is to change the target of the link in the header.
To do that :
Create a folder _includes and a file header.html inside
Copy and paste the original code for the official repository
https://raw.githubusercontent.com/jekyll/minima/master/_includes/header.html into the header.html file
replace the content of href="{{ "/" | relative_url }}" by href="{{ "/blog" | relative_url }}"
Have you tried setting url and baseurl in the config for the blog? Baseurl should be used for the "home" page.
I'm making a theme for Jekyll, and I've hit a problem where the site only serves to localhost:4000, and when I add a baseurl, it ignores it, although the command line output says it is serving it to localhost:4000/baseurl/. The theme is on GitHub here.
Any help much appreciated!
Should be fixed when you use {{ page.url | prepend: site.baseurl }}.
It was a Windows problem. See https://github.com/forgenst/jekyll-statuspage/issues/3
I'm trying to setup jekyll so that it will automatically create permalinks for new posts but it's not working.
What I did is setting a variable in the _config.yml like this:
permalink: /:title/
then, in a loop of post previews on the homepage I created a link like this:
Read More
Expecting the output to be something like.
Read More
and instead I'm getting this:
Read More
which if I click gives a 404 Not Found error.
What am I doing wrong?
For more info here is the github repo.
Thanks!
Matteo
As #David Jaquel suggested I solved by using
{{ site.baseurl }}{{ post.url }}
I just started using Jekyll today, and I'm trying to figure out how to use it to create a portable static site. Specifically, I want to be able to access the site without using the Jekyll server.
This answer says that this isn't possible, however, it's a couple years old, and it seems like a static site generator should be able generate a site which doesn't need a server to function (can be accessed through the browser as a file file:///...)
The Jekyll docs say that a Jekyll site can be deployed on a remote server by placing the _site/ folder in the web server's root directory. How do I force Jekyll to use relative links, so that I can run the built site from a directory other than the root?
I'm worried that the answer to this question is "it's not possible", or at least "it's not possible without some trickery". I've used Wordpress in the past, and it's trivial to set up a wordpress installation in any directory on a LAMP server. I feel like there has to be some easy way to do this with Jekyll, but I can't find the answer anywhere.
This answer is still valid. But I must admit that it's not really portable to tweak baseurl. You cannot always guess the correct path.
Let's try to make it run on the file system with relatives urls like ./path/to.
What do we need to tweak
Examining the index page, sitting at file:///path/to/_site/index.html, we can identify some potential problems :
styles are not working
posts are linked like file:///jekyll/update/2016/08/05/welcome-to-jekyll.html following the /:categories/:year/:month/:day/:title.html permalink pattern. And we know the folder hierachy is a nightmare when using relative links.
pages. The only one is about with an already defined permalink pointing to /about/ which will not work from file system, because it resolves to file:///about/
In order to avoid folder hierachy hell, we will make every post and page to be created at the root.
Redefining permalinks
In _config.yml we add :
defaults:
-
scope:
type: "posts"
values:
permalink: :slug:output_ext
-
scope:
type: "pages"
values:
permalink: :basename:output_ext
Now any post is generated at the root.
But this about page is still generated in an about folder. Why ?
Because front matter permalink overrides default configuration. We remove permalink: /about/ from about.md front matter and now our page is generated at the root /path/to/_site/about.html. Good !
Rewriting links
We're now making our links relatives to root using the ./ expression.
_includes/head.html
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
becomes
<link rel="stylesheet" href="{{ "./main.css" }}">
_includes/header.html
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
becomes
<a class="site-title" href="./index.html">{{ site.title }}</a>
And
<a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
becomes
<a class="page-link" href="./{{ my_page.url }}">{{ my_page.title }}</a>
index.html
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
becomes
<a class="post-link" href="./{{ post.url }}">{{ post.title }}</a>
And you can now navigate.
Remember to keep everything a the root and it will be ok.
I had a problem running Jekyll without the server and was able to resolve it by removing the permalink configuration from the theme I was using (removed the permalink: line from _config.yml). Also had to make sure all non-post URLs use absolute file path (like about and contact).
I have successfully hosted on Github Pages. Today I was trying to run the site through browser-sync so I could view my changes faster, and noticed that my urls were different when served locally than on the actual website. Here's what the local url looks like:
<a href="blog/post-title/">
Which when clicked on brings me to the page
http://localhost:3000/blog/blog/oven-baked-fajitas/
This same link, once it has been pushed to the Github repo and processed by them, turns into
<a href="/blog/blog-title/">
Which works correctly.
I link to individual posts in my archive like this:
<a href="{{ post.url }}">
And my _config.yml is as follows:
name: Adam Hammes
description: Adam Hammes' Website
author: Adam Hammes
url: http://hammes.io
permalink: blog/:title/
excerpt_separator: <!--more-->
exclude: ["README.md", "gulpfile.js", "package.json", "node_modules"]
What I have tried:
I added baseurl: "" to my _config.yml; no effect.
I added baseurl: "/"; no effect.
I added baseurl: "/", and changed the link format to {{ site.baseurl }}{{ post.url}}; this fixed the links locally, but resulted in 2 leading slashes live thus breaking the links.
I was using an old version of Ruby. By updating to Ruby 2 and then running gem install Jekyll I was able to get consistent behavior.