Week 6: Version Control and GitHub

Introduction

Actions in GitHub: Commit, Push, Pull, and Revert

Install GitHub Desktop

The installation of GitHub Desktop is as simple as normal software. Following three videos will guide you through the process:

Making the First Commit and Push

Files and Folders that Should Not Be Committed

Not everything in your project folder should be saved in version control. Some files are private, some are too large, and some can be regenerated automatically.

What to exclude:

• node_modules/ — This folder contains tens of thousands of files installed by npm. It is regenerated by running npm install, so there is no reason to store it. Committing it would make your repository extremely slow.
• .env — This file stores your API keys and secrets (like your Supabase key). If you push this to GitHub, anyone can see your keys. Never commit this file.
• dist/ or build/ — These are generated output folders. They can be rebuilt from your source code.
• .DS_Store — A macOS system file. Not harmful, but unnecessary clutter.

How to exclude them:

Create a file called .gitignore in the root of your project. List the files and folders you want Git to ignore, one per line:

node_modules/
.env
dist/
.DS_Store

Demo: Publish from GitHub to Netlify

This video contains the demonstration of adding API keys or other secrets to Netlify. If you integrate backend services like Supabase, Cursor will set this up in your code, in a file named '.env'. But you will need to add the secrets manually to Netlify during the deployment process. See the video for more details.

Project Demo: Commit and Push Changes to GitHub

As a student, you can apply for the GitHub Student Developer Pack — a free bundle of tools and services. The most relevant benefits:

• GitHub Pro — free while you are a student (private repositories, advanced features)
• GitHub Copilot — free AI code assistant built into VS Code and Cursor
• Free domain names and cloud credits from various partner services

Apply at: https://education.github.com/pack

You will need a school email address (.edu) to verify your student status. Approval usually takes a few days.

Invite Collaborators to Your GitHub Repository

Once your project is pushed to GitHub, you can invite collaborators to your repository. This allows your instructor to download and test your project. Follow the steps shown below to add a collaborator.

Step 1: Go to your repository on GitHub:

Step 2: Go to the "Settings" tab of your repository web page/Collaborators, then add people:

Invite a Reviewer to Your Netlify Project

Once your project is deployed on Netlify from GitHub, you can invite reviewers to your Netlify project for free. This makes it easier for your instructor to view your deployed site and provide feedback directly. Follow the steps shown below to add a reviewer.

Step 1: Go to dashboard of your Netlify account (not project):

Step 2: Select Members -> Reviewers -> Add Reviewers:

Course Project

1. Complete the course project and make it fully functional.
2. Create a GitHub account, and push your project to your account. Then, invite me to your project repository as a collaborator in GitHub using my email: [email protected]. See here for instruction
3. Deploy your course project to Netlify or similar web services from GitHub. If possible, invite me to your deployed project so that it would be easier to provide feedback. See here for instruction.
4. Create a new page in your Figma project file for this week's work. Then add screenshots of ~15 prompts and your published site.
5. You don't need to submit anything to Canvas this week.