Can I generate navigation from folder structure with Jekyll?

Question

I have a folder hierarchy like this:

movie scripts/
    Independence Day.md
    Alien.md
    The Omega Man.md
books/
    fiction/
        Dune.md
        Childhood's End.md
    nonfiction/
        Unended Quest.md
software/
    Photoshop.md
    Excel.md

You get the idea.

My goal is to use Jekyll to generate a static non-blog site that lets me browse HTML versions of all my Markdown files. So the navbar would have Movie Scripts, Books, and Software on it. Clicking Books would unfurl two submenus, Fiction and Nonfiction, and clicking one of those would show all pages in that folder.

I've read Jekyll's documentation and watched the Pluralsight course on it, and I know how to render pages from a pages folder... but I can't quite work out how to create navigation from this directory structure.

Could anyone give me some tips? Is this something Jekyll natively supports, or will I have to write something that generates the output myself? Where do I start with this?

Answer 1

I'm sure there will be many approaches, but I would use Jekyll collections.

If is your first time, I will be very detailed:

1. Configure Collections on your _config.yml file

   collections:
     movie-scripts:
       output: true
   
     books:
       output: true
   
     software:
       output: true
   

2. Add folders to the root of the project directory (same name as each one of the collections)

   _movie-scripts
   _books
   _software
   

3. Create subfolder for each categorie. For e.g.:

   _movie-scripts/sci-fi
   _books/fiction
   _software/Jekyll
   

4. Add the markdown files to each of the collection’s subfolders.

   Note: You should use also the Front-Mater to create categories that you might need to filter or search in the future.

5. Add a folder _data and create 3 YAML files with all the data for your movie-scripts, books and software. For e.g the movie-scripts.yml:

   - title: Back to the Future
     image-path: /images/movie-scripts/back-to-the-future.jpg
     url: http://www.imdb.com/title/tt0088763/
     short-description: This is a 1980s sci-fi classic about traveling through time
     year: 1980
     categorie: sci-fi
   
   - title: Star Wars
     image-path: /images/movie-scripts/start-wars.jpg
     url: http://www.imdb.com/title/tt0076759/
     short-description: Star Wars is an American epic space opera franchise centered on a film series created by George Lucas
     year: 1977
     categorie: sci-fi 
   

6. Create 3 HTML's pages to access your 3 collections (movie-scripts, books and software). For e.g. the movie-scripts, the 10 most recent additions to your site:

   ---
   layout: page
   permalink: /movie-scripts/top-ten/
   ---
   {% for movie in site.data.movie-scripts limit:10 %}
       <li>
               <img src="{{ movie.image-path }}" alt="{{ movie.title }}"/>
           <a href="{{ movie.url }}">{{ movie.title }}</a>
           <p>{{ movie.short-description }}</p>
           <p>{{ movie.year }}</p>
           <p>{{ movie.categorie }}</p>
        </li>
   {% endfor %}
   

Advice: If this is your first time, do baby steps. Try to do the first colection first, step by step, run the Jekyll server at each time and see if works, go to the next step...

Let me know if it help you, please!