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

1. Follow the GitHub Pages instructions to create a website on GitHub (select Project site and Choose a theme)

2. Go to _config.yml in your repository and replace theme: ... with:

   yml remote_theme: peterdesmet/petridish@1.1

3. 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):

```yml

title: Title for the page description: Description that will appear below the title in the banner background: /assets/img/bannerbackgroundimage.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:

yml layout: home

In _config.yml you can now define:

yml 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:

yml 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:

yml layout: archive

And enable post categories by repeating the permalink for your archive page in _config.yml:

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):

```yml

title: Title for the post description: Description that will appear below the title in the banner background: /assets/img/bannerbackgroundimage.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:

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:

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:

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:

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