Skip to content

Home

Jump to bottom
Filip Buric edited this page Feb 18, 2019 · 7 revisions

< back

The sysbio website

Notes on the structure of sysbio.se

Content: actual data as customizable Markdown

Files:

  • netlify.toml - specify the Hugo version used by Netlify
  • static/admin/config.yaml - describe structure of pages for CMS (mapping to content (Markdown pages))
  • config.toml - Hugo config
  • layouts - HTML templates using Hugo {{ }} syntax (some directories and elements are hardcoded)
    • single (one page)
    • list (several on page, like news) The content is viewable in diff ways, either as "preview" (in list) or "full" (single)
  • data/centres - Centers of Excellence elements
  • packages.json (inherited from theme)
  • static/_redirects - supported by Netlify

Site generated with bootstrap (useful for many things, but mostly layouts).

Example: Creating a Courses Collection

The Content

To set a collection (directory) of course pages, create a new directory courses under content. Each course is a a Markdown file under /content/courses, e.g. mesb.md. This file will contain:

  • the actual contents of the course page
  • a YAML header with various metadata: predefined tags (e.g. title, template), as well as user-defined tags

Preview

--
title: Course Page
template: courses/single
--
# Welcome to the Course
This course is great
...

(Ignore the template tag for now. It will explained below.)

In order to list all the courses under this collection, an index Markdown page must be added under the name /content/courses/_index.md

Preview

---
title: 'Courses'
date: '01-Jun-2019'
template: courses/all
---

This is the Courses page. Below is a list of current courses.

The Way Pages are Displayed

The way the content is actually displayed is controlled by templates and Hugo code. The templates are HTML pages (potentially designed with third-party tools), augmented by various queries performed with Hugo code. They live under layouts/.

Content pages (individual Markdown files) can be displayed in single format (basically as an independent sub-page of the website) or in partial format (as part of another page, e.g. a news page listing headlines of the actual pages).

For this collection, we set up the templates under layouts/partials/courses (this is because we want to be able to list individual courses under the Courses index page). In this directory, we create two files:

  • all.html: will describe how to assemble a list of courses with associated information
  • single.html: full (independent view) of a course page

The single template may look like:

<div class="container" style="margin-bottom:8em;">
  <div class="row">
      <div class="col-md-12">
        {{ .TableOfContents }}
      </div>
  </div>
  <div class="row">
      <div class="col-md-12">
        {{ .Content }}
      </div>
  </div>
</div>

This HTML page will be processed by Hugo and a final page will be generated and displayed to the user (more on static websites below).

The Hugo code {{ }} refers to various aspects of the Markdown page that holds the course content. {{ .Content }} fetches the entire contents as one static string. Note that no elements therein may be addressed. The only accessible elements in the Markdown files are the YAML tags in the header (the metadata).

The all.html template assembles content and info from the single Markdown pages. It may look like:

<div class="container" style="margin-bottom:8em;">
  <div class="row">
    <div class="col-md-12">
      {{ .Content }}
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      {{ $pages := (where (where .Site.Pages "Type" "courses") "IsPage" true) }}    
      {{ range $pages }}
      <a href="{{ .Permalink }}">{{ .Title }} {{ .Params.date }}</a>
      {{ end }}
    </div>

  </div>
</div>

The first row of the page (<div class="row">) holds the content of the _index.md. The second row holds Hugo code that iterates over all pages of type "course" and produces links for each of them. {{ .Params }} accesses user-defined tags in the YAML header of the Markdown pages (See Hugo documentation for more details).

Notes about static websites

Normal sites

(client) --request--> server: static files, code + DB --computation--serve--> (client)

  • code + DB: expensive, needs server. There are tricks to avoid this, like generating HTML pages using templates. But these still require computation

  • images, css, javascript: static - quick, efficient

Static sites

Instead of the code + DB, one regenerates the site using only static files.

One uses:

  • customizable templates
  • separate part (content) that replaces DB

and from these generates HTML, which is paired with static files (javascript, css)

Hugo

In Hugo, themes = templates.

The theme for sysbio.se is created from the "Universal" theme.

Normally, code has to be public, but with Netlify code can be kept private.

Hugo has various functions to assemble content in diff ways into a final rendered HTML.

Stuff under static is shown as-is.

Offline changes

To start a local Hugo server to view the website: hugo server -w in the sysbio.se repo directory.

After any change, the website will refresh.

Hugo generates (builds) the site in /public (not stored on Github)

Netlify

Deployment

Set up like CI: builds automatically and keeps history of builds. One could show diff version (branches) to different users.

CMS

Rich interface to Github to change + commit content. Although some elements like the top bar not accessible.

Available on online version since it works thru Github. Organizes content into collections (separate directories): content + config (e.g. what kind of fields, text)

Status

To do

  • test form functionality, decide how deal with the email
  • should menu buttons be active?
  • upgrade to bootstrap4, bootstrapious theme universal has this but was not ported to hugo yet
  • disable url for main dropdown menu
  • use chalmers font
  • bug on the 404 page - menu buttons don't work
  • matomo analytics

Done

  • original menu bar buttons that are discarded: Organization, Centres of excellence, Teaching.
  • update blue color
  • remove about us from the footer and replace with chalmers logo
  • center copyright
  • use sysbio and chalmers logo
  • no one line for labs, but all labs visible at once
  • news page should list the news
  • show all labs at once on two rows
  • Footer logos becomes footer Labs
  • News section on homepage: only body with date but no image, but no "read more" and no title with news from http://sysbio.se/news.html
  • check if can use SSL with private key
  • News page should have no search/categories/tags commented out but keep for future reference -> still kept b/c it looks bad without them
  • the "whatever" dropdown becomes tools (contains software, databases and gems), and international projects has its own button, and contains past projects
  • people page
  • photos for contact page
  • create organization section with picture from group photos in higher resolution
  • Profile page should have collapsable buttons about publications and other things (software, videos, alumni). for the CV it can either be a dropdown or a pdf.
  • see-more becomes a link to the "Projects" page
  • logos of Centers: equally sized, centred, add WCPR wallenberg and CellNova KTH, and no carousel
  • flags closer to images
  • org graph as image below labs
  • use guetzli to compress the big images
  • scroll bug on short pages - disappeared
  • pay copyright Mihai's card
  • keep "Projects" without "international" but state on the page that these are only the international ones
  • international Projects
  • more news, date can be bogus, delegated to Martina
  • there won't be a tools overview page, Mihai decided
  • databases
  • create a photos page with a button in the About dropdown
  • GEMS
  • make each lab card clickable
  • each lab should have a profile that is like a blog pages
  • software
  • fewer requests, especially js or use cdn; potentially get rid of font awesome; get other/fewer fonts; in fact just use this https://github.com/netlify/victor-hugo => using asset optimization from Netlify
  • remove all js
Clone this wiki locally