If you are starting a new lab or want an easy (democratized) way to run your lab website - please: Clone this website!

The Fraser lab website was built by Ben Barad 6 years ago using Github Pages. Since then, it has been improved upon by many members of the lab, and has been updated over 1000 times by James.

We love our lab website because it is so easy to use and update. Updates are done in markdown, which is very easy to learn. As part of on-boarding, new members add their own bio and picture. This also serves to teach people git and to get comfortable with the idea of modifying, breaking, and fixing the website! The publications page is particularly powerful with easy formatting based on IDs for Pubmed, the Protein Data Bank, BioRxiv etc. Similarly the members page makes it easy to add accounts for Twitter, github, and other services. We keep adding more features. For example, Jen will be adding alumni links for lab websites or LinkedIn pages in the near future!

In keeping with our lab principles on sharing, we decided from the beginning to share it with a permissive open source license, so that others in the community are able to copy and modify it to make their own lab websites. We’re glad they have!

Quite a few people have made websites based on the original Fraser Lab template, with varying degrees of customization:

Sites Ben Made:

• Frost Lab @ UCSF
• Grotjahn Lab @ Scripps Research
• Benjamin Barad @ Scripps Research (Personal site)

Sites other people made (in no particular order):

• Zunder Lab @ UVa
• Keedy Lab @ CUNY
• Thompson Lab @ UCM
• Gross Lab @ UCSF
• Kern Lab @ Brandeis
• Herzik Lab @ UCSD
• Wiseman Lab @ Scripps Research
• Ramani Lab @ UCSF
• Koch Lab @ Manchester
• Ma Lab @ Georgetown
• Mel Lab @ Inha
• Reuter Lab @ MIT
• Li Lab @ UCSD
• Chiong Lab @ UCSF
• Chowdhury Lab @ BITS Pilani
• Li Lab @ PKU
• Roberts Lab @ Dickinson
• Parkin Lab @ U Saskatchewan
• Mege Lab @ Ramnarain Ruia
• Shi Lab @ UCM
• Tewhey Lab @ Tufts
• Amii XAI Lab @ U Alberta
• Arnaout Lab @ UCSF
• Corces Lab @ Gladstone
• Gati Lab @ SLAC

Have you made a website using the Fraser lab or one of these sites as a template? We’d love to add yours to our list!

So what do I do to make my own?

Recently, our lab website has gone through some significant ugprades. These include moving to collections for most things instead of using the _data folder, moving to a CDN to load large files, and support for structure loading with UglyMol. This guide predates these, and while it is relatively easy to copy the website still, for this guide we recommend taking a copy of one of the releases we made before incorporating these edits: https://github.com/fraser-lab/fraser-lab.github.io/releases

1. Fork this Github repository (or one of the ones others have made - just make sure it has a license to do so!) to your own organization, and rename it to organization_name.github.io - right away, you’ll start seeing a website appear at that URL! Optionally, download the site, and try building it using the instructions in the readme so you can edit locally. Either way, delete the current CNAME file, which points to https://fraserlab.com. Once you’ve done this, the website will start showing up automatically at https://organization_name.github.io - no further hosting or configuration required.
2. Update the license - you can choose not to relicense your site if you don’t want others to use it as a template, but you need to include a copy of the Fraser Lab license somewhere (can be in an external folder)
3. Change the readme, config.yml and news.xml files to be your lab’s name!
4. Update _includes/header.html and _includes/footer.html for your website! In particular, change the university brand image and link in the header, and the link in the footer.
5. Remove all the Fraser lab’s images and PDFs from the static folder, and put in member photos, key images/PDFs for papers, and any extra images that you want to use on your site.
6. Remove all the posts from the _posts folder and write one or two of your own!
7. Remove any extra pages that you don’t intend to use (in particular, Fraser lab has many pages related to different UCSF classes) by deleting the folder with the respective name. The minimum folders you probably need are _data, _includes, _layouts, _drafts,_posts, publications, research, members, static, and maybe news and join.
8. Update index.md to change the homepage! You can change the image in _layouts/home.html. Change the sidebar on the homepage at _includes/sidebar.html
9. Go into _data and do the following:
   • Replace entries in members.yml and alumni.yml with your own members and alumni!
   • Replace or delete sep.yml and visitors.yml based on your needs - do you have visiting scientists or undergrads/high school students to list?
   • Update navigation.yml based on your needs - this controls what is in the navbar at the top of each page.
   • Replace entries in publications.yml with your own publications.
10. Update the members page photos by changing _layouts/members.html. Update the members page sidebar by editing _includes/alumni_sidebar.html.
11. Update the research page at research/index.md. Similarly update any other specific pages by editing the index.md or index.html file in each folder.
12. Either update disqus to your own account at _includes/disqus.html, or remove it at _layouts/post.html if you don’t like comments on your posts.
13. Remove sitemap.xml and optionally make another one of your own.
14. Replace favicon.ico with one of your own!
15. Add a custom domain using Github’s instructions
16. Edit styles in static.css and _layouts and _includes to customize the site to your heart’s content!

Once I have my own, how do I edit it?

For a new publication, just upload a photo and PDF, then update the _data/publications.yml file. Similarly, for a new member, just update _data/members.yml. New blog posts can be made by adding a new markdown file in _posts