The home page www.mdanalysis.org is maintained as a GitHub pages site. The home page is also accessible as mdanalysis.github.io.
Pages are generated from markdown files using the static site generator Jekyll.
- use GitHub-flavored Markdown
- use utf-8 encoding
- The top-level heading (h1) is set by the title: attribute in the front matter of each page.
- In-text headings start at h2, i.e.,
## heading title ##
in Markdown. There should not be any h1 headings inside the page.
For further notes see Web development below.
Blog mdanalysis.org/blog
Check out the repository, edit the pages under _posts
, and push
commits. The published pages are on the master branch.
Blog posts should be placed under _posts
. These should have names
according to:
YEAR-MONTH-DAY-title.md
where YEAR
is a four-digit number, and MONTH
and DAY
are both two-digit
numbers. Each post should have a header with:
---
layout: post
title: The title of this post
---
in order for it to be picked up by the paginator. The blog
directory should
not be touched, as this is only here to set the paginator.
- The
_site
directory is generated by Jekyll on the GitHub server side and should not be included in commits. - You can sign posts with your @mention and it will link to your GitHub profile.
- If the date on a post is in in the future at the time of the commit, it will not be built and will not appear (until the next commit on or after the time of the post).
We are using the minimalist Hyde theme for Jekyll.
Additional static pages go under pages
. If they have the layout type
"page" they will be automatically included in the sidebar. The static
"about" page is left at the top level.
To customize the order of pages in the sidebar, add the attribute
order: <INTEGER>
to the front-matter. Pages will be sorted lowest to
highest. Note that some entries in the sidebar are hardcoded in
_includes/sidebar.html
.
If a page should not show up in the sidebar, use layout: otherpage
.
There are two ways to add and edit files:
- Check out the repository, edit the pages, and push commits. The published pages are on the master branch.
- Use the add file/upload file and edit file functionality in the https://github.com/MDAnalysis/MDAnalysis.github.io repository web frontend.
The GitHub pages can either use HTML or markdown as processed by Jekyll.
The actual markdown processor is kramdown so it parses more than basic markdown --- see the kramdown syntax, including MathJax.
Drop images into the public/images
directory and include them like
<img src="{{site.images}}/imagename.png"
style="float: right" alt="alternative text" width="30%"/>
or use Markdown
![alternative text]({{site.images}}/imagename.png)
For links between pages to work, generate absolute links with site.baseurl
liquid tag:
[see citations]({{ site.baseurl }}/pages/citations
The example will link to the file /pages/citations
. Also note that one does
not need spaces between the configuration variable and the curly braces (i.e.
{{ site.baseurl }}/
as typical seen), so I avoid them to prevent the editor
breaking the line inside the curly braces (which upsets Jekyll greatly).
We define additional variables in _config.yml
and use them with liquid tags.
In particular, the sidebar _includes/sidebar.html
is configured with
additional links that are all stored in the config file.
To locally test that your edits look ok before pushing them, run Jekyll from a docker container (always works if you can get docker to run) or install Jekyll as described in the docs (can be frustrating because of broken dependencies).
Running Jekyll from a docker image:
- on Linux you should be able to start/run docker after installing the appropriate docker package through your package manager
- on MacOS
- install Docker Desktop https://docs.docker.com/desktop/install/mac-install/ and let it install all kind of startup items
- start Docker
Follow the solution from https://stackoverflow.com/a/58850151/ as described next:
To build the static site, run jekyll build
inside docker:
export JEKYLL_VERSION=3.8
docker run --rm \
--volume="$PWD:/srv/jekyll" \
-it jekyll/jekyll:$JEKYLL_VERSION \
jekyll build
The static site files are stored in the _site
directory.
Then you must serve the site so you can view them in a web browser
python -m http.server --directory _site 4444
(You can leave out the port number and then it defaults to 8000.)
Point your browser to http://localhost:4444
When you make changes, you need to re-build the site.
Note that the CSS is only rendered correctly when the pages are served. Just directly browsing the files will not show the site as it will appear on the web.
To run Jekyll in a way that matches the GitHub Pages build server, run Jekyll
with Bundler
. Use the command
bundle exec jekyll serve
in the root of your repository (after switching to the gh-pages branch for project repositories), and your site should be available at http://localhost:4000.
For a full list of Jekyll commands, see the Jekyll documentation.
Running Jekyll locally has the advantage that you can have it update the site continuously while you're editing files:
bundle exec jekyll serve --livereload
In this way, the site is immediately rebuilt when you save changes to a file.
If you try out new functionality or plugins locally and you get error messages then try to update the github-pages plugin with
bundle update github-pages
-
Problems with installing jekyll/github-pages? If the standard installation for jekyll does not work for you (many people complain, for instance, commonmarker does not install https://stackoverflow.com/questions/58849651/bundler-cannot-install-commonmarker) try a docker container, as described above.
-
In case the you get an error that a javascript environment is missing, install a javascript environment like
nodejs
from your distribution repositories.