Website info and how-to

This is a slightly modified version of Michel Jouvin’s documentation for the HSF site. See also the Jekyll for beginners page.

About the NPPS website

This site is maintained by Torre Wenaus and other NPPS members. If you’re interested to contribute, contact Torre. It was bootstrapped from the HSF website, which was originally developed by Torre Wenaus and Benedikt Hegner.


This website is implemented using GitHub’s Pages service which makes it easy to create a website associated with a GitHub account or project. Pages uses Jekyll, a tool to automatically build a website from source files (which are kept in GitHub). It supports structured sites like blogs in a simple but powerful way. It produces a very fast website as all pages are pre-built as static web pages. The site content is written using the easy Markdown syntax (which is used by GitHub itself).

A Jekyll for beginners page provides some useful hints to make using Jekyll in the NPPS context easier.

How to add and edit information

For developing the site once it stabilizes we will follow the pull request workflow in GitHub. During early rapid development the main editors use push. To use the pull request workflow, fork the website repository, edit the files you want to edit, push them to your fork, and open a pull request.

You can easily (to the extent that installing Ruby is easy) set up a local instance of the site in order to preview your submissions. This is strongly recommended because it makes the mod-test-iterate cycle local and very fast, and ensures that what you ultimately upload is debugged. See the documentation on installing and running Jekyll. The website uses the master branch of the repository.

If you are not familiar with GitHub and Git, you can read the HSF’s survival kit!

General structure of website content files

All Markdown files of this site start with a section surrounded by ---. This so-called front-matter contains metadata about the content. Such metadata are, e.g., the author of the document or the title of the document.

In the front-matter (but not in the text itself), you need to replace any & characters (which has a special meaning in HTML) by &. This is particularly important for the title attribute.

Adding experiments/projects, tech teams, software

Add a new file in the _experiments, _techteams or _software directory and follow the front-matter of the other files in there. The content of the navigation bar and front page will be updated automatically: the menu entry text is the title attribute in the front-matter section. Note the metadata in the front-matter that relates experiments, tech teams, software, and people (in _people), from which their relationships are autogenerated on the web pages.

Adding news or announcements

Add a new file in announcements/_posts and follow the front matter of the other files in there. The front page will get a new box with all information.

Please don’t forget adding an event until in the front-matter: this is used for ordering events and as the end date for adding the event in the Upcoming Events sidebar.

Adding slides and documents

Add the new item to _data/assets.yml. Note the metadata on the items there. If the item is at a link, you’re done, just be sure to include metadata for date and type (slides/document). If you have corresponding material like a pdf to add, add it under assets/. Follow the placement (slides/documents subdirectory) and naming conventions (date comes first in name). If you enter metadata for experiment, software, and tech team in assets.yml the item will show up on the appropriate experiment, software, and tech team pages (as well as the author’s page).

Adding contents from GoogleDoc

It is sometimes handy to use GoogleDoc to produce some contents for the web site. For example, if taking minutes during a meeting, it allows several people to contribute to the effort of note taking and other persons who attended the meeting to validate/update them. It is then easy to convert a properly formatted GoogleDoc (using standard heading levels) to Markdown for inserting it into the website. Look at our documentation on how to do it.

Technical details

Page templates

As of writing, this website contains the following page templates for wider usage:

The menu bar is defined in _includes/navbar.ext, from which all page layouts inherit. The layout is somewhat hard-coded, but experiments, tech teams, and software menus are generated automatically.

Main page

The main page contains three blocks, mostly hard-coded:

They are filled with Liquid snippets.

Useful references