Most academic research groups need a website that provides information about the group's research activities, publications, members, recent news, and so forth. Many of us accomplish this by adapting a WordPress template. This is really simple to set up, but time consuming to maintain. For example, what if you want a page listing all of the group's publications, but you also want to list relevant publications on the page for an individual research project?
As part of my pandemic stress reduction activities, I decided to play around with React and Bootstrap in order to design a new version of my research group's website. My goals were:
* A static site deployed using GitHub pages. No more WordPress. No backend database.
* A SPA (Single Page Application). Just one page. Because that's what the cool kids do. More seriously, I wanted to enable the viewers to get a decent overview of my research group just by scrolling and without any clicking.
* Very mobile friendly. My goal is little to no usability cost for using your phone's browser.
* Easy to maintain. For example, to add a new publication, just update your .bib file (which you have anyway), run a script, and information about the new publication appears in multiple locations throughout the site.
These goals produced some interesting design choices, such as the use of what I call "horizontal" and "vertical" drill downs. I'll let you be the judge of whether and how well it succeeds. That said, I am quite certain the current site is much better than the WordPress site it replaced.
Here's my research group's new site:
https://csdl.ics.hawaii.edu/
It occurs to me that others might be interested in how I did it, and potentially using my code as a basis for their own academic research group website, so I've set up the source repo as a template with an MIT License. Here it is:
As part of my pandemic stress reduction activities, I decided to play around with React and Bootstrap in order to design a new version of my research group's website. My goals were:
* A static site deployed using GitHub pages. No more WordPress. No backend database.
* A SPA (Single Page Application). Just one page. Because that's what the cool kids do. More seriously, I wanted to enable the viewers to get a decent overview of my research group just by scrolling and without any clicking.
* Very mobile friendly. My goal is little to no usability cost for using your phone's browser.
* Easy to maintain. For example, to add a new publication, just update your .bib file (which you have anyway), run a script, and information about the new publication appears in multiple locations throughout the site.
These goals produced some interesting design choices, such as the use of what I call "horizontal" and "vertical" drill downs. I'll let you be the judge of whether and how well it succeeds. That said, I am quite certain the current site is much better than the WordPress site it replaced.
Here's my research group's new site:
https://csdl.ics.hawaii.edu/
It occurs to me that others might be interested in how I did it, and potentially using my code as a basis for their own academic research group website, so I've set up the source repo as a template with an MIT License. Here it is:
https://github.com/csdl/csdl.github.io
Enjoy! Comments welcomed.