This week I began using jekyll and was impressed by the ease with which I could set up a simple blog with the default minima theme and host it using github pages. If you are interested in setting up a blog like this one, see the Jekyll quickstart.

For blogging alone, the default minima theme works perfectly but not all my projects can fit into a blog post. So I wanted to add a portfolio page. For this I used another section of the Jekyll docs as a starting point and then looked at some other repositories that had a portfolio page. These included:

I wanted to setup my website in such a way that I could just write markdown files in either the _posts/ or _portfolio/ folders and everything else would be taken care of automatically.

Setting up the file structure

Following the advice in the Jekyll docs I copied my layouts folder from the relevant folder on my computer (in my case: /opt/homebrew/lib/ruby/gems/3.3.0/gems/minima-2.5.2 but check the Jekyll docs) to find your version. Then I made a new portfolio.html layout based on post.html.

Changing the htmls

When changing these files I had to read up on the dot notation in html. But soon realised all my needs could be satisfied by specifying in yaml section at the top of my portfolio posts which elements of my portfolio I wanted displayed on the main page. For example, for my Landslide Project in the yaml I used:

layout: page
title:  Landslide Susceptibility
tags: geospatial ArcGIS-Pro
summary: Using ArcGIS Pro to find the parts of Tamzoura most susceptible to landslides. 
image: ../assets/landslides/scenario3.jpg
width: 50%
caption: Relative level of susceptibility.
link: ../_portfolio/geospatial_data.markdown 
permalink: _portfolio/geospatial_data.markdown/

Some of these elements will change as I learn more about html and jekyll but currently:

  • summary is the text shown on the main portfolio page.
  • tags whilst currently unused I hope to allow for tag-based filtering of my portfolio when there are more of them
  • image specifies a relative path to an image showing the kind of project in question
  • caption is the caption below said image
  • link and permalink together make the link to the post work. I plan on changing this soon becuase minima’s home.html file doesn’t require this.

From here we can loop through the files in _portfolio and

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.