CODEWITHSUNDEEP
htmlcollectionsjekyllliquidgithub-pages
tom_mai78101
tom_mai78101

Reputation: 2443

How to add multiple contents in a custom collection folder in Jekyll for Github Pages?

I do know that collections is an experimental feature in Jekyll, but since GitHub tutted the feature, I guess I could start using it.

I have a file structure like this:

site root  
 ├─ _portfolio
 │    ├─ project_1.md
 │    └─ project_2.md
 └─ /* rest of the Jekyll folders and contents */

This is what it looks like in Windows Explorer:

Imgur

This is the content for marble-run.md:

---
layout: project
title: Marble Run
---

This is Marble Run. All tests copyrighted.

And this is the content for pokemon-walking.md:

---
layout: project
title: Pokémon Walking
---

This is Pokémon Walking.

I have set _portfolio as a collection in the _config.yml, and have the output set to true.

collections:
  - portfolio:
    output: true

I used the following code to display the portfolio page:

---
layout: default
---

<div class="portfolio_main">
    {% for project in site.portfolio %}
    <div class="projects_container">
        <a href="{{ site.baseurl }}/{{ site.portfolio }}{{ project.url }}">Testing this.</a>
        <div>
            {{ project.content }}   
        </div>
    </div>
    {% endfor %}
</div>

{{ site.portfolio }}{{ project.url }} gives /portfolio/{ title of the project }/. As in, /portfolio/marble-run/ for marble-run.md.

I expected to see two Testing this. links in the webpage, but I'm only seeing one.

Imgur2

My purpose is to create a collection folder that allows me to generate new contents whenever I put new Markdown files inside, just like what Jekyll does to _posts folder.

What am I doing wrong? Thanks in advance.

Upvotes: 4

Views: 1281

Answers (1)

tom_mai78101
tom_mai78101

Reputation: 2443

Okay, been tackling this problem for at least 6 hours.

Collections do work normally in GitHub Pages.

To set them up:

  1. In _config.yml, add this at the very bottom:

collections: - my_collections

Where my_collections are to be replaced with your collection folder name.

  1. Do everything normally, according to the official Jekyll documentation.
  2. The only caveat is, you need to put the permalinks correctly, or you won't be able to reference the items in the _my_collections folder (after doing what the docs told you to do).

That's all I know.

Upvotes: 4

Related Questions