Petridish is a Jekyll theme for research project websites. Or your personal blog or lab website. 👩🔬 It's mobile-friendly (thanks to Bootstrap 4), free, and designed to work well with GitHub Pages.
Easy setup
-
Follow the GitHub Pages instructions to create a website on GitHub (select
Project siteandChoose a theme) -
Go to
_config.ymlin your repository and replacetheme: ...with:remote_theme: peterdesmet/petridish@1.1
-
Check your website at
http://username.github.io/repository(give it a minute to rebuild)
Advanced setup
If you do not what to use remote_theme, see the Jekyll documentation to install (gem-based) themes.
For examples, browse the Petridish repository to see how things are configured for the Petridish demo website.
Your site's configuration is controlled by _config.yml. Set at least a title and maybe some social profiles.
Create pages as Markdown files in your repository (e.g. about.md).
Pages can have the following front matter (only title is required):
---
title: Title for the page
description: Description that will appear below the title in the banner
background: /assets/img/banner_background_image.jpg
permalink: /about/
---
Our project ...
background can be a local or remote image. It will be cropped vertically. For faster page loads, reduce image sizes to less than 1MB (e.g. by reducing resolution to 72dpi and/or width to 2000px).
Pages will use layout: default by default.
For easier maintenance, organize your pages in a pages/ directory and set their permalink.
To enable options for your homepage, add the following front matter:
layout: homeIn _config.yml you can now define:
posts_on_home: 3 # Show x number of latest posts on homepage, can be 0
tweets_on_home: true # Show Twitter feed of twitter_username on homepageFor easier maintenance, move/rename your index.md to pages/home.md and set its permalink to /.
To enable your team page, add the following front matter:
layout: teamThen create a _data/team.yml file to list team members.
To enable your news / blog / archive page (i.e. the page listing all posts), add the following front matter:
layout: archiveAnd enable post categories by repeating the permalink for your archive page in _config.yml:
archive_permalink: /blog/ # Permalink of page using archive.html layout, required when using post categoriesTo see blog posts, you'll have to create some.
Create posts as yyyy-mm-dd-title.md Markdown files in the _posts/ directory.
Posts can have the following front matter (only title is required):
---
title: Title for the post
description: Description that will appear below the title in the banner
background: /assets/img/banner_background_image.jpg
author: [Author 1, Author 2]
categories: [Category 1, Category 2]
---
We are happy to announce ...
Posts can be shown on an archive page and on the home page.
Posts will use layout: default by default.
To change the permalink of all posts from the default yyyy/mm/dd/title.html to e.g. blog/{filename}/ without having to add a permalink to each post, set a front matter default in _config.yml:
defaults:
-
scope:
path: ""
type: "posts"
values:
permalink: "/blog/:slug/" # Use /blog/{filename}/ as permalink for all postsSee https://peterdesmet.github.io/petridish/about for an overview of the Markdown syntax you can use in pages and posts.
Create a _data/navigation.yml file to list pages in the top navigation.
Customize colors and corners in _config.yml:
colors:
links: "#007bff" # Color for links: use a readable color that contrasts well with dark text
banner: "#007bff" # Background color for page banners: use color that contrasts well with white
footer: "#6c757d" # Background color for footer: use color that contrasts well with white
rounded_corners: true # Enable (default) rounded corners on boxes and buttonsAdd a logo by uploading it to assets/ and referencing it in _config.yml:
logo: /assets/img/petri-dish_1f9eb.png # Logo in navbar, will be displayed with 30px heightAdd social icons to the footer by adding your (project's) social profiles in _config.yml:
email: your.email@example.com
twitter_username: your_twitter_username
github_username: your_github_usernameCreate a _data/footer.yml file to add text, links and/or a disclaimer to the footer.
Bug reports and pull requests are welcome on GitHub at https://github.com/peterdesmet/petridish. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.