Jekyll: 'About' permalink not working properly - configuration

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!

Related

How to load RAW css into Jekyll?

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.

How Can You Get Thumbnails for Jekyll Posts When the Post Has No Images?

If I'm using Jekyll to build a blog and I want to share the link to posts. I'd like to have a preview thumbnail for the posts, however, the post itself has no images on it, and I'd like to keep it that way. Any ideas on how do that?
I found the solution I needed.
Following the Open Graph Protocol, if a post has a thumbnail image available for sharing via Facebook, Twitter, etc., you can specify your <head> open graph metadata like this.
{% if page.image %}
<meta property="og:image" content="path/to/post/image.jpg">
{% else %}
<meta property="og:image" content="path/to/page/image.jpg">
{% endif %}
If the post doesn't have a specified image it will use the image specified for the page. Then add the following to the post's front matter:
---
image: path/to/post/image.jpg
---
You could define a thumbnail attribute in each post's front matter, then use that when you create the page containing links to your posts.
Here is an example blog post:
---
layout: default
thumbnail: "/path/to/the/thumbnail.png"
---
This is a blog post!
And then in your blog's index.html page, you'd do something like this:
{% for post in site.categories.blog %}
<div>
<a href="{{ post.url }}" ><img src="{{ post.thumbnail }}" />
<a href="{{ post.url }}" >{{ post.title }}</a>
</div>
{% endfor %}

Jekyll - CSS Link in automatically generated navigation?

I just came across a pretty weird problem. In order to list the static pages I created in the page's top navigation, I used
{% for page in site.pages %}
{{ page.title }}
{% endfor %}
For some reason, the output after jekyll serve will create this:
Index
Projects
Does anyone have an idea why the .css file is inserted here as a link?
I do call the *.css in my header as:
<link rel="stylesheet" type="text/css" href="{{ "/css/style.css" | prepend: site.baseurl }}">
I use SCSS in order to create my final css:
root structure:
/css/style.scss (sets a few variables and imports elements from /_scss)
/_scss/_main.scss
/_scss/_mobile.scss
Final _site structure (regarding css):
/css/style.css
That's why the original jekyll new mysite creates a navigation (_includes/header.html) with :
{% for page in site.pages %}
{% if page.title %}
<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
{% endif %}
{% endfor %}
Only page with a title are in the menu.
Everything with a front matter, that is not a post or a collection, is a page. So, your scss, feed.xml and so on are pages.
Give a title to pages you want to see in the menu an filter with {% if page.title %}.

How do I resolve broken links in gh-pages, (using generator-jekyllized)

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 }}">

How to make automatic prefixes for relative urls calling css assets from any (sub)folder?

I would like to be able to define the links of my website as relative paths. I think it is more reliable in case the site is moved later for instance.
For the moment, my links are absolute, so I have:
<link rel="stylesheet" href="{{ site.url }}/assets/css/app.css" />
in _includes/header.html called by _layouts/page.html to generate the pages of my website.
A first approach would be to put
<link rel="stylesheet" href="assets/css/app.css" />
but it works only for pages in the root.
Another attempt would be to put
<link rel="stylesheet" href="../assets/css/app.css" />
but it works only for pages in a subfolder the root.
In fact we need to use as many ../ as needed to go back to the root. Would it be possible to automatically count it (maybe based on the page.url variable? I am not sure how to do it nor where to put such a script.
I am aware of the answer of kikito here but it is needed to manually declare the correct path to the root variable of the page in the metadata when creating it. I would like to automate this process.
Did you have issues with the accepted answer to the question you linked to? That solution works for me.
In the head of my layout file I include the code:
{% capture lvl %}{{ page.url | append:'index.html' | split:'/' | size }}{% endcapture %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}
Then my resources can be set up as:
<link rel="stylesheet" href="{{ relative }}assets/css/combined.min.css">
This results in the correct number of ../ parts being added. The "assets" directory in this example is in the root of my site.