I've built a Jekyll blog that includes a post archive. I developed the archive using the jekyll-archives plugin. I'm happy with the website and the archive pages are working fine. The problem is that archived posts are also shown on the current website, which is built with jekyll-paginate.
I don't want archived posts to be shown on the current website because archived posts should be "archived" and only be accessible through the archive pages. Suppose I have posts from 2020 until 2022. I want 2021 and 2020 posts to be archived and appear on the archive pages only whilst the current paginated website lists 2022 posts only. How do I achieve this effect?
My jekyll-archives configuration in _config.yml file:
jekyll-archives:
enabled: all
layout: archive
permalinks:
year: '/blogs/archives/:year/'
title: 'Archived :year'
My archive template code:
<h1>Archive of posts from {{ page.date | date: "%Y" }}</h1>
<ul class="posts">
{% for post in page.posts %}
<li>
<span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
I found a workaround to the problem. To remove the archived posts from the current website (/blogs/), I first set the permalink value to the directory in which I want to keep the archived posts. For instance, /blogs/archives/:year/:title/. Then I ran the jekyll-archives plugin to archive the markdown-based posts. All posts are saved in _posts folder like a standard Jekyll blog. After that I copied all the generated HTML pages from the _site folder to the site's archive directory as defined above, removed all the markdown source files of the archived posts from _posts and set the permalink value back to the current website /blogs/. When I re-ran bundle exec jekyll serve, the archived posts remain accessible at where they should be whilst being removed from the current website. If there's a more Jekyllist (smarter) solution, I'd love to know!
Related
I am trying to setup my site (https://ashishrao7.github.io/ashish-rao/) using github pages and so far the experience has been good except for one small thing. An additional tile appears on the home page and the source of the problem is that the css file assets/css/main.css gets indexed as a page for some reason. I am using a modified version of the jekyll theme named Forty https://andrewbanchich.gitlab.io/forty-jekyll-theme/
I could temporarily solve this problem locally by going to '_site' folder (not included in the repo because it gets built) and deleted the code associated with the that unwanted tile. However, it would reappear every-time I rebuild my site and I was looking for a more permanent solution. Upon some debugging, I figured out that this unnecessarily indexed tile was getting detected as a page for some reason in _includes\tiles.html:
{% for page in site.pages limit:site.tiles-count %}
However, I am stuck now I don't know how to fix this issue. The annoying tile is shown in the figure below.
Upon clicking, it takes the viewer to the page https://ashishrao7.github.io/ashish-rao/assets/css/main.css which is not what I intended. Here is the link to the github repo that hosts the site https://github.com/ashishrao7/ashish-rao.
I can definitely reproduce, but it looks to be the expected behaviour of site.pages.
site.pages – A list of all Pages.
Source: https://jekyllrb.com/docs/variables/#site-variables
This said, on the same page listing all the site variables, there is an alternative that you could use:
site.html_files – A subset of site.static_files listing those which end in .html.
So you just need to change your loop from
{% for page in site.pages %}
{{ page.title }}
{% endfor %}
to
{% for page in site.html_files %}
{{ page.title }}
{% endfor %}
I have a project where I have posts on main page of the blog and I would love to have another posts folder inside subfolder(s).
I am talking about this structure:
_posts
_posts/2020-04-04-Testmain.md
subpage/_posts
subpage/_posts/2020-04-04-Testsub.md
subpage/index.html
index.html
I can access posts from subpage by using {% for post in site.categories.subpage %} inside subpage/index.html but I can't find a way how to force jekyll to also generate posts in the subpage folder so I can access it at page http://127.0.0.1:4000/subpage/testsub
Is it even possible? Or is it better to follow this structure?
_posts
_posts/2020-04-04-Testmain.md
_posts/subpage
_posts/subpage/2020-04-04-Testsub.md
If so, is there some setting required to make the post at http://127.0.0.1:4000/subpage/testsub ?
Found the solution!
In _config.yml you can use permalink: /:categories/:title
And with following file hierarchy:
_posts
_posts/2020-04-04-Testmain.md
subpage/_posts
subpage/_posts/2020-04-04-Testsub.md
subpage/index.html
index.html
You will get these websites:
http://127.0.0.1:4000/
http://127.0.0.1:4000/subpage/
http://127.0.0.1:4000/subpage/testsub
And you can still access all posts from selected subfolder with {% for post in site.categories.subpage %}
I am using Jekyll to make a personal website. I downloaded a Bootstrap template and started changing details around. I changed the config.yml file as well as the index.html file.
When I write bundle exec jekyll serve into the command line, the server starts running and I can see a demo of what my website will look like once it is being hosted online.
The changes I made to the config.yml file persist, but those I made to the index.html file do not. When I look at the index.html file, every single change I made is reverted back to the original. It's almost like the index.html gets regenerated to a default version whenever I run the server.
The same thing happens when I try to change the default image files within the project. The new images that I placed in the img folder get deleted and the old ones that I removed get regenerated.
I googled around but found no helpful answer (deleting my browser cache does not solve the issue). Anyone know what's going on?
Edit: I should add a piece of information that may be the cause of this issue. I have two index.html files in my website. One of them is in the root folder and it simply redirects to "layout: default". The other one is in the _site folder. The latter is the one I tried to change to no avail.
Default file:
<!DOCTYPE html>
<html>
{% include head.html %}
<body id="page-top" class="index">
{% include nav.html %}
{% include header.html %}
{% include portfolio_grid.html %}
{% include about.html %}
{% if site.contact == "static" %}
{% include contact_static.html %}
{% elsif site.contact == "disqus" %}
{% include contact_disqus.html %}
{% else %}
{% include contact.html %}
{% endif %}
{% include footer.html %}
{% include modals.html %}
{% include js.html %}
</body>
</html>
Every time jekyll serve or jekyll build is executed, the default behaviour is to regenerate all your site into the _site folder.
To make changes to your index.html root file, you need to edit the one outside the _site folder (probably named /index.md or /index.html) because the content of_site` are built in each run.
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've copied the Jekyll plugin to generate Category pages using an official source (https://github.com/recurser/jekyll-plugins) into my Github repository and it doesn't work, I keep on getting a 404 page. That said if I test on my local machine both in the Jekyll server and in the _site directory it works. Any ideas?
GitHub Pages does not support most plug-ins. They don't want anything crazy going on behind the scenes.
Here's how I do categories with Github Pages. It is not wholly automatic, as it requires a separate .html file for each category you want to set up. But it works without any plugins or wizardry on Github Pages.
Create a categoryname.html file in your root directory. For example, hardware.html for a Hardware category. Run a for loop on all of the site's posts and check the post.category
<div class="posts">
{% for post in site.posts %}
{% assign author = site.authors[post.author] %}
{{ author.display_name }}
{% if post.category == 'Hardware' %}
<div class="post">
<h1 class="post-title">
{{ post.title }}
</h1>
{{ post.content }}
</div>
{% endif %}
{% endfor %}
</div>
In your posts, you would use the YAML header to add the category to the post. Like the code below:
---
layout: post
title: How We Built a Hardware Product
author: Author Name
category: Hardware
---
That should do it. It'll create a /hardware/ page that will include all of your posts with the Hardware category. Make sure you're case-sensitive on your YAML and category names (hardware != Hardware and category != Category).
Another possible solution:
If you don't want to generate your site locally and push the created HTML files to GitHub (like David Jacquel suggested in his answer), you can create one single page with all categories.
Check out this answer:
An easy way to support tags in a jekyll blog
(Note: I'm using tags instead of categories there, but both work exactly the same way in Jekyll as far as I know. So you can just take my code and replace site.tags by site.categories)
I admit, one page per category looks nicer, but my solution has the advantage that it works on Github Pages (because it's just vanilla Liquid, no plugin).
EDIT:
In the meantime, I wrote a blog post how to make separate pages per category without using a plugin:
Separate pages per tag/category with Jekyll (without plugins)
Github pages only support a small number of Jekyll plugins.
If you want to use your plugins, you'll have to generate your site locally and push it on github pages. If you do this, add a .nojekyll file at the root of your repository to tell github to not process you files.