RajLab_website

www.rajlab.org

The official website for the lab of Dr. Towfique Raj

Icahn School of Medicine at Mount Sinai
Department of Neuroscience
Department of Genetics & Genomic Sciences
Ronald M. Loeb Center for Alzheimer's Disease
Icahn Building, 1425 Madison Avenue
New York, NY 10029

---

Updating the Website - Tutorial

Overview

Let's say you have a website for a lab where the team is constantly rotating, you're producing lots of new publications, and/or you'd like to make frequent news updates.

Entering new HTML elements (e.g. <div>...</div>) every time you want to update a webpage can be repetitive and tedious. Not to mention prone to typos and bugs, especially to someone who might not have a lot of experience in web development. Even commerical website creation platforms (e.g. Wordpress, Squarespace, Wix) currently still require you to manually enter in each repetitive element. But being the busy person you are, you don't have time to regularly make these changes to your website.

For these reasons, I used javascript to automatically construct the webpages from data tables (in .csv format). This has the advantage of being able to create new entries of the same element without having to write any redundant code; all you have to do is add new rows to the appropriate CSV and push the changes to GitHub.

• The following pages are currently updatable by editing the relevant CSVs:

  • Home:

    • Publications.csv = Automatically updates the "Recent Publications" feed by highligting publications in descending order of publication date.
    • News_Events.csv = Easily add updates to the "News and Events" feed by inserting new rows into the top of this CSV.
    • Lab_Activities.csv = Add images from various lab events (e.g. conferences, socials) by adding the "Event" name, "Year", and the path to the "Image" (to each respective column). Each row is a new image. The script will automatically organize the images by event + year and generate button links above.

  • Projects:

    • Projects.csv = Each "Project" is part of a "Group" with the same theme. You can add as many Groups and Projects as you like. You can also add associated papers by filling in the "PaperLink" and "PaperJournal" columns, as well a list of contributors/co-authors in the "Contributors" column.
    • You can also add a custom picture for each Project by adding the image path to the "Image" column.

  • Team:

    • Team.csv = All past and present members on the Team page. Members are automatically assigned to different sections depending on their "Status" column ("PI", "active", "student", or "alumn").

  • Publications / Presentations:

    • Publications.csv = All publications on the Publications / Presentations page. This file is used for both the "Section View" and "Datatable View". Insert new publications into the top of this CSV.
    • Presentations.csv: All presentations on the Publications / Presentations page.

  • Data / Software:

    • Data_Software.csv = All data and software generated by the lab or through collaborations. Includes links to each dataset/tool and the associated article.

  • Funding:

    • Grants.csv: All grants awarded (active and past).

• All other pages must be updated by editing the HTML files. A good IDE helps to do this efficiently; I reccommend Visual Studio Code combined with the Live Server extension, to see how your edits change the website in real-time.
• If you want to edit the Navbar or the Footer, you only need to edit the navbar.html and/or footer.html files in order to propogate these changes to the whole website.

Instructions

• All code is to be executed in the terminal/command line.

1. Clone GitHub Repo

   • Go to the location on your computer where you want to copy the repo:

   cd <desired_folder_location>

   • Clone the repo (only necessary the first time):

   git clone https://github.com/RajLabMSSM/RajLab_website.git

2. Edit CSV Files

   • The CSVs are located in the subfolder documents.
   • Open these files in Excel, add new rows, and save the file (without changing the name or extension):
     • Important!: Aside from entering new rows, you must keep the exact same table structure. Do NOT edit the number or names of columns as the javascript code uses these.

3. Push Changes to GitHub

   • Make sure you're within the RajLab_website folder:

   cd RajLab_website

   • Stage changes:

   git add .

   • Commit changes:

   git commit -m <write_commit_message_here>

   • Push changes to GitHub:

   git push

• And voilà! Your website will now be updated, all with no or minimal HTML coding:
  • Note: You may have to wait a little bit for all the changes to fully appear in the website (GitHub Pages can take some time to update).

Troubleshooting

DNS Hosting

What if you have bought a domain name (e.g. www.rajlab.org) that you want to use for this website instead of the default url (e.g. https://rajlabmssm.github.io/RajLab_website/)? In our case, we use GoDaddy. This can be a bit tricky to set up so I recommend the following tutorial:

• GoDaddy Domain with GitHub Pages

---

---

Web Creators:

Brian M. Schilder & Madison Parks
Icahn School of Medicine at Mount Sinai
Department of Neuroscience
Department of Genetics & Genomic Sciences
Ronald M. Loeb Center for Alzheimer's Disease
Icahn Building, 1425 Madison Avenue
New York, NY 10029

• Tutorial created by Brian M. Schilder