🍇 Grape-Academic-Theme: A modified version of the Jekyll Grape-Theme for an academic Portfolio. (Can include a blog)


Jekyll Themes Shield

Welcome to Grape Academic Theme! This theme is based on Grape Theme and modifies it to be more directly applicable as an academic portfolio page. It can still include a blog, but that is optional.



Some of these features are optional and can be turned on or off in the _config.yml file.

Portfolio Homepage

Portfolio page giving an overview of your research.

Publications List

A optional list of your publications auto-generated from a BibTeX file. Additional information can be linked to from the BibTeX file.

Presentations List

A optional list of your presentations auto-generated for a data file.


An optional blog for any posts you want to publish.

Hub Pages

Hub pages are intended for easy linking in your presentations. They collect links and additional information related to your presentation so that you only have to put one link on your slides. They can be manually generated or automatically from one of your publication entries.

Installation and Serving Local Version for Testing

  1. Fork and clone the Grape Academic Theme repo

    git clone
  2. Install Jekyll

    gem install jekyll
  3. Install the theme's dependencies

    bundle install
  4. Update _config.yml, _data/projects.yml, _data/projects.yml and _bibliography/publications.bib with your own settings.

  5. Run the Jekyll server

    bundle exec jekyll serve


Since GitHub changed pages deployment to be based on Actions, Grape-Academic-Theme can be deployed fully automatically. This project already contains the necessary GitHub workflow.

These are step-by-step instructions for forking and publishing the theme at your <username> github pages website:

  1. For the repository to a repository named <username>/<username>
  2. Go to the settings of the new repository and navigate to the "Pages" tab. There, change the source for github pages to "GitHub Actions".
  3. Clone the repository and go through the installation steps listed above
  4. In _config.yml, change the baseurl option to an empty string ("") to host the webpage in the root of your page
  5. Push to GitHub and see the workflow building and publishing your website.
  6. Wait a couple of minutes and the demo content will show up at <username>


Grape-Theme has two great features: the profile section and the project section of the portfolio page. Just by changing _config.yml and projects.yml, you can use all of these features.

Feature Settings

The blog, publications, and presentations pages are optional and can be turned on or off in the config file.


Generate your favicons with and place them in the root directory. The code to include them is already set up in the template.

Site configuration

baseurl: "{subpath}"

theme_settings :
  title: {blog title}

Profile Settings

Profile is displayed on the index page, and also experience and skills are displayed on the portfolio page. The profile is configured in _data/profile.yml.

image: assets/img/smile.png
username: Christoph Jabs
description: creator of the Grape-Academic-Theme! Grape-Academic-Theme is a modification of the Grape-Theme by naye0ng, making it more suitable as an academic portfolio.
  - start: 2017-05-03
    end: 2018-05-06
    experience : company name, title
  - Interest 1
  - Interest 2
  - skill: HTML5 & CSS
    value: 85  # Percent value


The data for the presentations page can be defined in data/presentations.yml.

- presentation:
    title: A nice presentation
    event: Fancy conference
    date: 05/2022
    comment: This is some comment text that can do _Markdown_
    slides: # potential link to slides
- presentation:
    title: A second presentation
    event: Another conference
    date: 03/2022

Hub Pages

For an example on how to configure a hub page, see the file.


Defines the number of posts to be shown on one page.

paginate: 5

Portfolio Settings

The Project configuration is available in _data/projects.yml.

The portfolio page provides projects and detailed views by modal. If modal : False is selected, modal will not be displayed on site.

  • print :

    • If print: True is selected, it will be displayed on landing page
  • modal

    • If modal: True is selected, modal will be displayed on the Portfolio page

print: True
modal: True  

Add details(link, description) about your projects

url: # Full URL
image: "portfolio.png" # path: assets/project/
date: 2019.06.09 - 2019.07.11
# modal contents
  - title:


You can change colors at once. colors are in _sass/base/_variable.scss

Posts in Grape theme

You can confirm how to draw tags at here and here

Create a new post

  1. Create a .md inside _posts folder
  2. Write the Front Matter and content in the file.

    layout: post
    title: title
    subtitle : subtitle
    tags: [tag1, tag2]
    comments : 


The theme is available as open source under the terms of the MIT Licence.