Note the Herman Lab website was cloned using the following directions.
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. 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:
Sites other people made (in no particular order):
- Zunder Lab at UVa
- Keedy Lab @ CUNY
- 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
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?
- 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 currentCNAME
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. - 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) - Change the readme,
config.yml
andnews.xml
files to be your lab’s name! - 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. - 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. - Remove all the posts from the
_posts
folder and write one or two of your own! - 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 maybenews
andjoin
. - 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
- Go into
_data
and do the following:- Replace entries in
members.yml
andalumni.yml
with your own members and alumni! - Replace or delete
sep.yml
andvisitors.yml
based on your needs - do you have visiting scientists or undergrads/high school students to list? - Update
navlinks.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.
- Replace entries in
- Update the members page photos by changing
_layouts/members.html
. Update the members page sidebar by editing_includes/alumni_sidebar.html
. - Update the research page at
research/index.md
. Similarly update any other specific pages by editing theindex.md
orindex.html
file in each folder. - 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. - Remove
sitemap.xml
and optionally make another one of your own. - Replace
favicon.ico
with one of your own! - Add a custom domain using Github’s instructions
- 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