How to Build Academic Website for Research Group in 2021
A recipe to get static web generation, collaborative editing, continuous integration and automated deployment all together free of charge
In this blog, I will introduce the technology stack that I used to build an academic research group’s website. To give you a preview of the result, please visit our lab’s website. Following this recipe, you will get a website where group members can collaboratively make edits and post blogs to the website by writing Markdown on GitHub directly and the changes will be automatically built and deployed to a basic web hosting server (often comes free if you are affiliated with the school) provided by university, without any human actions. You can optionally also set up a two-stage deployment pipeline with a
dev and a
prod stage to maximize stability and availability.
Here are the technologies used, all of which come free of charge (assuming you don’t get crazy traffic like 10,000,000 clicks/day):
- Hugo static web generator
- Wowchemy research group template
- Simple, basic virtual host provided by university
- (Optional) Netlify
Why build a lab website?
Publicity and exposure matters in academia. The first thing many researchers do when they hear our name is to google us and our research lab. Our website and the lab’s website play an important role in deciding people’s first impression on us. This is particularly true in the CS community, where people tend to put more emphasis on their digital appearance.
Let’s first think about what kind of content we want to display for a research group:
- About, introducing what the lab do, research interests, etc.
- People, showing member’s headshot and social links (personal website, Google Scholar, LinkedIn, etc.)
- Publication, showing a list of publications, sorted chronologically
- Blogs, to allow group members introduce their research work
Let’s then consider the technologies upon which we want to build our website. Let’s first think about how a badly designed group website can cause problems in the future:
- website is too hard to update –> group members don’t want to spend time updating it –> information become outdated and inaccurate –> bad impression to visitors
- website can be modified by only one person –> people don’t even want to start creating a website because no one wants to take the burden in the future
- website can be modified by only one person –> duty becomes too heavy for that one person –> s/he just quit maintaining the thing –> (same as above)
- website can be modified by only one person –> other group members feel guilty to bother that one person too much –> they stop writing blog posts, making updates and giving suggestions
- website breaks down all the time –> visitors cannot get information
- website is too slow to load –> visitors just leave
- website is too expensive to design/host –> advisor won’t agree
OK, that was a lot of problems. But let’s parse it out. What are the requirements in terms of technology? We need a website that:
- is easy to update information and post blogs
- can be collaboratively edited by many people
- is stable
- is fast
- is cheap, if not free
These content and technology requirements motivate the choice of the technology stacks above:
- Hugo static web generator: generates a static website, which is fast to load, stable,almost impossible to hack, and doesn’t need any software to be installed on the hosting server (as opposed to a full-stack requirements demanded by a non-static solution like WordPress).
- Wowchemy research group template: provides templates for all the things listed in the content requirements.
- Github: provides a platform for group members to easily, collaboratively make edits.
- CircleCI: automates the build and deployment process, making it one click away from committing the change to seeing the changes live.
- Simple, basic virtual host provided by university: provides a free hosting location for the static website, (optional) used for
- (Optional) Netlify: provides another free hosting location for the static website, (optional) used for