Skip to content

Quick website tutorial

Pierre Donat-Bouillud edited this page Dec 10, 2020 · 1 revision

There are three webpages that have the same structure and technology behind them:

One website is for the lab in general, then each project has a separate website. Since they have the same structure I generally updated the lab website and then propagated relevant changes to either project website.

They have repos at:

The websites are in markup (actually in YAML) which gets generated into HTML by github (it always takes a few minutes). You can also generate them locally for testing: https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/testing-your-github-pages-site-locally-with-jekyll . I advise doing that, since github can fail silently.

The repos have files with *.md in the top level where the information is kept. These are the files you edit the most. I think they are fairly self explanatory, but I'll run through the two basic use cases:

Adding a person

After badgering the new person to give you information about themselves and a photo edit people.md and add a new YAML section with information like this:

  - type: researcher
    name: Jan Vitek
    photo: jan_vitek.jpg
    title: Professor
    email: [email protected]
    web: http://janvitek.org
    bio:
    - Joined Czech Technical University, 2016
    - Joined Northeastern, 2014
    - Joined Purdue, 1999
    - PhD, University of Geneva, 1999
    - MSc, University of Victoria, 1995
    note: "I work on the design and implementation of programming languages. I led the implementation of the first real-time Java virtual machine to be flight-tested. With Noble and Potter, I proposed what became known as Ownership Types.  I tried to understand JavaScript by dynamic analysis and am now looking at supporting scalable data analysis in R."

Everything is compulsory. Types of people we have are only researcher and alumni. Bio can have as little or as many items as it needs, but it should have at least one. They can't be too long, because they start wrapping. Photo refers to an image in images/people/ and must be square. I usually edited bios and notes for people, sometimes I helped them write those if they had problems.

Removing a person

Switch their type to alumni, comment out their note and change their bio to month when they started working with us and month when they ended. I also moved them to the end of the file.

  - type: alumni
    name: Ondřej Bíža
    photo: ondrej_biza.jpg
    title: Researcher
    email: [email protected]
    web: https://sites.google.com/view/obiza
    bio: October 2018 - July 2019
#    - Joined Czech Technical University, 2016
#    note: "I work in a subfield of Machine Learning called Reinforcement Learning. My aim is to create machine that reason about the world in abstract terms and can reuse these abstractions to learn new skills faster."

Adding a paper

Papers live in publications.md. Add a YAML entry:

- year: 2018
   title: "Contextual equivalence for a probabilistic language with continuous random variables and recursion"
   authors: "Mitchell Wand, Ryan Culpepper, Theophilos Giannalopoulos, and Andrew Cobb"
   publication: "International Conference on Functional Programming"
   short_publication: "ICFP'18"
   badges:
   - "acm_artifact_available"
   - "acm_artifact_evaluated_functional"
   links:
   - text: DOI
     link: https://doi.org/10.1145/3236782
   - text: arXiv
     link: https://arxiv.org/abs/1807.02809
   - text: Artifact
     link: https://dx.doi.org/10.1145/3235042
   grants:
   - ELE

Everything has the basic bibliometric info: year, title, authors, place of publication. The place of publication is split into two fields: publication is just the name of the conference or journal, and short_publication is the abbreviation. If it's a conference the abbreviation also includes apostrophe plus year. Some conferences and journals give badges to papers for best paper or for artifacts. I park the images of badges in images/publication as png files and then list them in the badges field without an extension. Currently there are ACM and ECOOP badges in there. People don't usually tell you if a paper got badges, so I make it a point to ask if it's not clear. Links section contains links to various related elements. Most importantly there should be a link to a publically accessible non-paywalled full text and a DOI link. People will also send links to artifacts, videos, slides from talks. Finally, our papers are usually classified into one of the two grants: ELE or BC This currently does nothing. Papers can also provide awards for, well, awards, and notes associated for various special applications:

awards: "Distinguished Artifact Award"
note: ""
long_note: " Appeared in:
   [The Morning Paper](http://blog.acolyer.org/2017/11/20/dejavu-a-map-of-code-duplicates-on-github),
   [Slashdot](https://developers.slashdot.org/story/17/11/23/2352233/more-than-half-of-github-is-duplicate-code-researchers-find),
   [TheRegister.co.uk](https://www.theregister.co.uk/2017/11/21/github_duplicate_code/),
   [Developpez.com](https://www.developpez.com/actu/175363/GitHub-des-chercheurs-estiment-que-plus-de-la-moitie-des-codes-ecrits-en-Java-Python-C-Cplusplus-et-JavaScript-sont-dupliques/) (French),
   [opennet.ru](https://www.opennet.ru/opennews/art.shtml?num=47596) (Russian),
   [toutiao](https://www.toutiao.com/a6491879685222302221/) (Chinese), and
   [sohu](http://www.sohu.com/a/206363660_114760) (Chinese)."

If you need to modify the template for individual papers: _includes/publication-listing.html and the format of the whole page: _layouts/publications.html

Video talk

If someone does a recorded conference talk, there's a file called videos.md. Again, add a YAML listing. This one is pretty straightforward. The field youtube is the id of the video from a youtube link. "What if it's not a YT video?" I hear you ask. :man-shrugging: But so far it's always a YT link.

  - title:   "The Current State and Future Prospects of Encoding Support in R"
    speaker: "Tomaš Kalibera"
    youtube: J9lraMP1ono
    link:    "https://youtu.be/J9lraMP1ono"
    venue:   "useR!'20: The R User Conference"
    date:    "8 July 2020"
    place:   "Virtual useR" 

If you need to modify the template for individual videos, it's at _includes/video-listing.html and the format of the page is at _layouts/videos.html

News

News items are kept at index.md They just have a date and a blurb. The date is any text, and the blurb is MD-formatted text. Obviously the biggest problem here is figuring out what is going on and what needs putting in, so this is more detective work than web design. I put in conference organization, joining organizations, and awards as a rule.

  - date: 'April 2019'
    blurb: '**Jan Vitek**, **Ryan Culpepper**, **Petr Maj**, **Konrad Siek**, **Guido Chari**, and **Lucie Lerch** co-organize **[ETAPS 2019](https://conf.researchr.org/committee/etaps-2019/etaps-2019-organizing-committee/)**.'

Other md files in root correspond to the tabs on the website, with the exception of "new members" which just points to the GH wiki.