How to Create a Projects Page on Jekyll

Customise your Jekyll site to show off your portfolio.

Photo by @jesuskiteque on Unsplash.

1. Create a Projects folder

In your Jekyll site directory, you need to create a new folder and name it

_your_page_name
_projects
My Jekyll folder structure

2. Edit the _config.yml

For Jekyll to recognise the new _projects folder it needs to be added to the _config.yml. This comes under the collections section of your config file. For example, add the following to your config:

collections:
- projects

3. Create a project markdown file

Create a markdown file for one of your projects to be used as an example, this can help you decide on consistent front matter for your projects ready to create your website. For example, if I create a file called example_project.md in my _projects folder I could choose the following front matter:

---
title: Example Project
description: This is an example project.
layout: project_page
---

4. Create the projects web page

Now you need to create the projects web page which is what will be seen from the website. I want mine to be a list of projects which can be selected to open up a page containing the project.

A screenshot of my projects page.
{% for project in site.projects %}
<h2> {{ project.title }} </h2>
<p>{{ project.description }}</p>
{% endfor %}

Extras

Create a page layout

To have an individual page for each project you need to create a new layout in the _layouts directory. I called mine project_page.html and copied the layout for a post. The only variable project_page.html takes is a variable called page.title and so this will be required in the front matter for each project.

Generate a web page for each project

To generate a web page for each project the _config.yml needs to be slightly changed to create an output

collections:
projects:
output: true

Create a custom link to each project

This can be done for each project in the front matter, but I found it easiest to also specify this in the _config.yml by added the permalink key.

collections:
projects:
output: true
permalink: /:collection/:title

Create a custom link to your projects page

This can be done by editing the front matter on your projects.md to include the permalink key. For mine I set is as:

permalink: /projects/

Summary

And that is it, for a live example, you can look at my portfolio website by clicking here. You can also find all the files I created during this blog post on my GitHub here.

UK Based Data Scientist \\ Personal website: henriwoodcock.github.io \\ The opinions expressed are my own views and not my employer. \\ @henriwoodcock

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store