The team website is made with Gatsby, a React-based framework that allows for a seamless, app-like experience and lots of great plugins, such as Tailwind, a CSS framework that allows you to style directly in your markup.
-
Install Node.js and Git
To run the code properly, you need to install Node.js, a package manager, and Git, a version control system that you'll use to update this Github repository. For more details, see this doc. Also, if you don't have a code editor, downloading Visual Studio Code is recommended, and if you don't have a GitHub account, you'll need to make one.
-
Clone this repository
Before you can clone the repository, you first need to be invited to it by going to Settings > Manage Access > Invite teams or people.
In your terminal, navigate to the folder you want to save the website code package to and then clone this repository:
cd the/folder/you/want/to/save/to git clone https://github.com/igem-waterloo/main-website.git
If it's the first time using Git on your computer, you'll also be prompted to sign into your GitHub account from the terminal.
-
Edit and run your code
Open the entire site directory in your code editor. To see your code live in the browser:
# make sure you're cd'ed into the repository npm start # you can also do "gatsby develop"
Your site is now running at
http://localhost:8000
! -
Push your changes to the repo
If it's the first time pushing (i.e. adding) changes to the website repository:
git remote add origin https://github.com/igem-waterloo/main-website.git git push
If it's not:
# to push changes for all files git add . # if you want to only add specific files, replace . with the file names separated by a space git commit -m "message you want to add to your commit" git push
Alternatively, if you're using Visual Studio Code, you can do the above steps automatically by using the Source Control tab in the left menu bar, adding your commit message in the text field, and clicking the checkmark.
This section details how to change wording, dates, links, pictures, colours, etc. to keep our site up-to-date, NOT how to change the design or structure. Unless you're familiar with web development, please do not mess around with the code and just change the parts detailed below.
All images should be added to src/images
.
Since we're using Tailwind, all colours should be added to tailwind.config.js
under theme:extend:colors
. Use a unique identifier for the colour (ex. title of the project) and the hex code for the colour you want to use.
Go to src/components/header.js
and see comments above applicationsOpen
.
To change the page users are redirected to if applications are closed, go to src/pages/joinus.js
and update as you see fit.
Go to src/components/layout.js
and follow the comments above announcementBanner
to change the link, make it unclickable, or remove it.
Go to src/components/data/TeamData.js
and edit the subteam and ideal candidate descriptions.
Go to src/components/data/AdvisorsData.js
and edit as needed.
Go to src/components/data/ProjectData.js
. Copy one of the existing blocks to use as a template for a new project. List all projects in reverse chronologial order (i.e. most recent to least recent). You do not need to edit index.js
to change the 3 most recent projects shown on the home page, it will automatically do so from ProjectData.js
.
Go to src/pages/faq.js
and add a new Q&A. There's no JSON file so that you can use links.
Go to src/components/data/RecruitmentData.json
to update dates for key deadlines, events, etc. for the year.
Go to src/components/data/YearData.json
to update the general goals for the team and subteams throughout the year.
To prepare the repository for deployment on the CS Club's server:
npm run deploy
This will update the gh-pages
branch and convert all the files into pure HTML/CSS/JS.
You can go to https://igem-waterloo.github.io/main-website/ after the website has finished building to see if anything has broken. But, to view the fonts and images properly, you'll need to go to gatsby-config.js
and uncomment the pathPrefix
to add the main-website
slug to all the file paths.
Once you're finished debugging, comment out the pathPrefix
again, run npm run deploy
again, navigate to the gh-pages
branch, click Code
> Download ZIP, and extract the ZIP file.
-
Email SysCom to set up a club rep account
You must email the Systems Committee from the
uwigem@gmail.com
account so they can verify you’re a club member. Let them know you want to set up a club representative account under theuwigem
club account.You'll need to send them:
- A picture/scan of your WatCard
- Your WatIAM username
- Your acknowledgement of having read, understood, and agreeing with their machine usage policy
Once your club rep account has been created, they’ll give you a password which you’ll reset upon your first access into the CS Club machines.
-
Logging into a CS Club machine for the first time
- Open the terminal.
ssh username@corn-syrup.csclub.uwaterloo.ca
(you can replacecorn-syrup
with any other CSClub machine you want to use, see the full list here)- Say Yes when the security warning pops up. This is mainly a concern if you get the security warning after already logging into the machine once.
Password:
enter the password SysCom gave you- You should now have access to the
corn-syrup
machine, but you won't need to do anything more in the shell, so go ahead and close it.
Note: the
ssh
command should already be installed on your computer (Mac and Linux for sure, Windows 10 should have it). If you're on a Windows and you get an error, you might have to manually install it or you can download PuTTY instead. -
Uploading deployment files onto our website
For Windows (see the CSClub wiki for Mac instructions):
- Download WinSCP
File protocol: SFTP
Host name: corn-syrup.csclub.uwaterloo.ca
(replacingcorn-syrup
with any other CSClub machine you want to use)Port number: 22
User name:
enter your WatIAM usernamePassword:
enter your new password after resetting it- Click Login
- Say Yes when the security warning pops up
- Navigate to /users/uwigem/www
- Delete all the current files in the directory (it takes less than a minute).
- Drag over the deployable files you extracted from the
gh-pages
ZIP file to the directory. - Check out the website to ensure everything is still functional!
For more information, see the CSClub wiki.
Email the original developer of the site Jeriann Hsiao
A quick look at the top-level files and directories you'll see in a Gatsby project.
.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
-
/node_modules
: This directory contains all of the modules of code that your project depends on. npm packages are automatically installed. -
/src
: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template.src
is a convention for “source code”. -
.gitignore
: This file tells git which files it should not track / not maintain a version history for. -
.prettierrc
: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent. -
gatsby-browser.js
: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser. -
gatsby-config.js
: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail). -
gatsby-node.js
: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -
gatsby-ssr.js
: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering. -
LICENSE
: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license. -
package-lock.json
(Seepackage.json
below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly). -
package.json
: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. -
README.md
: A text file containing useful reference information about your project.