How do I define a custom collection in Jekyll? - jekyll

Following the Jekyll Collections documentation, I wrote the following code in _config.yml
_config.yml
collections:
- popular_posts
So when I print {{ site.collections }}, the output is "popular_posts".
I also made a folder called "_popular_posts" at the same level as "_posts".
_popular_posts contains two .md files with some YAML front matter, same as a post.
However, if I print {{ site.popular_posts }} or {{ site.collections.popular_posts }}, there is no output.
How do I have Jekyll recognize the .md files in that directory so that the following code will work?
{% for popular_post in site.popular_posts %}
<a href="{{ popular_post.link }}">
<h1>{{ popular_post.title }}</h1>
<img class="pop-img" src="{{ popular_post.image_url }}">
</a>
<span id="pop-order"><span class="pop-current-popular_post-number">{{ popular_post.number }}</span>/5</span>
{% endfor %}

It's quite easy! You're on the right track. In your _config.yml:
collections:
- popular_posts
This will tell Jekyll to read in all the files in _popular_posts.
If you want each of those two files to have a corresponding output file (like how _posts works now), you'll want to change your _config.yml to:
collections:
popular_posts:
output: true
This will produce files at /popular_posts/filename1.html and /popular_posts/filename2.html, one page for each post.
Collections are only recently up on GitHub Pages so if you were trying this there, it would have failed.
Check out jekyll-help for more help if you need it!

Related

Changing personal site configuration with jekyll

I'm trying to build a site with jekyll. I managed to make math work and upload some files. Now the overall distribution of content is not optimal.
I get a link to "HEAD" that lists a series of updates of Jekyll. I would like to get rid of that.
The main url redirects to some blog entries while you have to click on "About" in order to go to some general information about me. I would like to do it in the opposite way, i.e. having the about section shown in the main url of the page https://rjraya.github.io/ and the blog in some derived url like https://rjraya.github.io/blog
Here are the sources of the page. How can I do this simple changes? I understand that I'm using the Minima template.
Re: HEAD
I think the "HEAD" is coming from the History.markdown file. It is strange that the "HEAD" does not show up in a local jekyll serve development environment. I suspect the code below is picking up History.markdown in jekyll, along with about.md when rendering header.html.
https://github.com/rjraya/rjraya.github.io/blob/ddc6a2f5c5804961da6ac79472b7f77052bef267/_includes/header.html#L20-L27
<div class="trigger">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
</div>
RE: Page Title URL Computational reflections
Change the href from / to /blog in this line
https://github.com/rjraya/rjraya.github.io/blob/ddc6a2f5c5804961da6ac79472b7f77052bef267/_includes/header.html#L7
<a class="site-title" rel="author" href="{{ "/blog" | relative_url }}">{{ site.title | escape }}</a>
RE: About URL
Remove the permalink : /about/ from the about.md page. The about.md will be come the homepage (e.g. /) in the next step.
https://github.com/rjraya/rjraya.github.io/blob/gh-pages/about.md
RE: Show about.md information on homepage rjraya.github.io and show _posts markdown files under rjraya.github.io/blog
Let jekyll use the default behavior of assigning permalinks based on the markdown filename.
Rename index.md to blog.md. This will move the list of _posts files from / to /blog.
Rename about.md to index.md. This will move the content of about.md from /about to /.

Jekyll collection files not generated from md although collection iterates on parent page?

I'm not sure what I've done. I've added some new pages from my collections folders.
The folders and files are created in the site folder.
However I can iterate my collections and see the links, however the links provide 404 errors as the files aren't being created.
I've re-saved the files as utf8 but this didn't hel, mentioned in a related question.
I've even removed all the files and put back the original test files which did work previously.
Foolishly I didn't have the project under source control.
Obviously jekyll can see them and read their contents and the loops work...
But the files aren't being generated.
<h3>User Guides</h3>
{% for user in site.stt_userguides %}
{::nomarkdown}
<a href="{{ user.url }}">
<h3>{{ user.title }}</h3>
</a>
<p>{{ user.content | markdownify }}</p>
{:/}
{% endfor %}
<h3>Features</h3>
{% for user in site.stt_features %}
{::nomarkdown}
<a href="{{ user.url }}">
<h3>{{ user.title }}</h3>
</a>
<p>{{ user.content | markdownify }}</p>
{:/}
{% endfor %}
I'm using this command ...
bundle exec jekyll serve
It confirms the files aren't found.
Due to initial configuration issues implementing collections, I had inadvertently removed the output: true setting, also useful to add the permalink property under your collection in config.yml.
As shown in the collections section on this page https://jekyllrb.com/docs/permalinks/

Jekyll not building or seeing collection

I can not seem to get Jekyll to recognize that a collection exists!
I have my folder structure like so
_posts
_includes
_layouts
_sass
_site
_portfolio
assets
index.html
_portfolio is the collection
I have it in my _config.yml file as so
colletions:
portfolio:
output: true
And I'm trying to show it in a list here (this snippet is from my default layout which is being used in my index.html)
{% for item in site.portfolio %}
<a href="{{ item.url | relative_url }}" class="portfolio-item-link">
<div class="portfolio-item" style="background: url('{{ site.url }}/assets/img/{{ item.image }}'); background-size: cover; background-position: center;">
<h1 class="portfolio-item-title">{{ item.title }}</h1>
</div>
</a>
{% endfor %}
The problem is Jekyll isn't even adding anything to the collection! If I do {{ site.portfolio | inspect }} it returns nil. I've also tried generating the site on my Ubuntu system (my current system is windows). If anyone has any ideas I'd really appreciate it!
So I misspelled "collections" in my _config.yml file. Don't do that. It works now.

jekyll blog permalink breaks and yields "404 not found"

I have started a small website with a few pages and a couple of blog posts. It is hosted on my organization's server and I ftp'ed all contents of _site/ directory into a subdirectory of the website. Hence the Jekyll site is at http:// myusername.foobar.foo/thiswebsite/ .
In my _config.yml
baseurl: "/thiswebsite"
url: "http:// myusername.foobar.foo"
Now all pages show up correctly. But blog posts don't.
In YAML front matter of each blog post:
permalink: /:title.html
Then I ended up generating links on index.html page to blog posts at http:// myusername.foobar.bar/blog-title.html but the actual blog posts are found at http:// myusername.foobar.bar/thiswebsite/blog-title.html. So if people click on the links found on index.html they will see 404.
On index.html I have:
{% for post in site.posts %}
<h2>{{ post.title }}</h2>
<blockquote>
{{ post.excerpt }}
</blockquote>
{% endfor %}
I would have thought {{ post.url }} would automatically insert correct URL for the posts, but apparently that's not happening. :(
Where did I screw up?
(Jekyll version 3.1.2)
Note: blank space after http:// is intentional as StackExchange thinks I'm posting links and that's apparently not allowed. In my actual markdown and html they are proper URLs.
Link to a collection item (post are collections items) or pages :
eg : {{ post.title }}
or {{ post.title }}
And it's the same for resources links (image, script, css, ...).
eg : <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
or <script src="{{ site.baseurl }}/js/script.js"></script>

Jekyll Collections - Skip index page

I have the below folder structure in my Jekyll site:
...
_machine-learning
|- my-first-post.md
|- index.html
...
I wanted to arrange my site, such that when someone visits http://example.com/machine-learning/, they can see all of the collection pages neatly listed.
To do that, I added the following to my index.html:
<h1 class="page-heading">Machine Learning</h1>
<ul class="post-list">
{% for item in site.machine-learning %}
{{ item.title }}
{% endfor %}
</ul>
This works fine, but the only issue is that it displays my index.html in there as well, making everything look like a mess.
Am I doing something wrong here? How do I iterate through my collection, skipping over index?
I just changed the folder structure, moving the index.html file from inside the machine-learning/ collection to the root folder as machine-learning.html. The URL remains the same (example.com/machine-learning) and it doesn't show up in the site.machine-learning list.
Before:
...
_machine-learning
|- my-first-post.md
|- index.html
...
After:
...
machine-learning.html
_machine-learning
|- my-first-post.md
...