petridish 🧫

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.

Preview

Demo website

Installation

Easy setup

Follow the GitHub Pages instructions to create a website on GitHub (select Project site and Choose a theme)
Go to _config.yml in your repository and replace theme: ... 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.

Usage

For examples, browse the Petridish repository to see how things are configured for the Petridish demo website.

Configuration

Your site's configuration is controlled by _config.yml. Set at least a title and maybe some social profiles.

Pages

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.

Home page

To enable options for your homepage, add the following front matter:

layout: home

In _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 homepage

For easier maintenance, move/rename your index.md to pages/home.md and set its permalink to /.

Team page

To enable your team page, add the following front matter:

layout: team

Then create a _data/team.yml file to list team members.

Archive page

To enable your news / blog / archive page (i.e. the page listing all posts), add the following front matter:

layout: archive

And 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 categories

To see blog posts, you'll have to create some. ☺️

Blog posts

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 posts

Markdown options

See https://peterdesmet.github.io/petridish/about for an overview of the Markdown syntax you can use in pages and posts.

Navigation

Create a _data/navigation.yml file to list pages in the top navigation.

Colors & logo

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 buttons

Add 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 height

Footer

Add 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_username

Create a _data/footer.yml file to add text, links and/or a disclaimer to the footer.

Contributing

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.

License

MIT License

tommyazz / petridish