Lab 2: Git and Web Servers

🎯 Lab Objective

In this lab you will learn Git and web servers.

1. Git usage
2. SSH Authentication
3. Local Web Servers
4. Public Web Servers

Table of Contents

If you are using the lab machines, do the following first (even if you have done it before).

📝 Task 1: Setup Lab Environment

1. Run the ugrad-init.exe under K:\setup\
   • 
2. Copy VS Code (using J Drive) shortcut from K:\ to your Desktop
   • 
3. Update VS Code’s default terminal.
   • Open VS Code (using J Drive)
   • Change the following setting …

   terminal.integrated.defaultProfile.windows
   

   • … to Git Bash
   • 

Git is the world’s most popular Version Control system (VCS); like an incredibly powerful save (and undo) button. Using Git is not necessary for web development, but its use is industry standard by almost every software development company.

✅ Tip

Even if you learned Git during COSC202 you should still do this lab as there are a couple of changes we will need for Assignment 1.

Usually, when a computer saves a file it will overwrite the previous file; the previous version of the file is gone and if you’re not careful you could accidentally overwrite important data. When you save a file in a Version Control system (like Git), both the new file and the changes from the previous version will be saved. So you can always rewind changes and recover from any accidental mistakes. Git can also be synced to a remote Git server, so even if you spill Redbull on your computer, your project files are still safe.

Comic about Git: xkcd.com/1597

1. Repository (repo)

   • In Version Control systems, a repository is where the file change history is stored. In Git, this is the hidden directory .git/, usually in the same directory as all your project files. If you delete the .git/ directory, you will delete the repo and all of your project’s history.

2. File Tracking

   • A tracked file has it’s entire history of changes stored in the repository. If you want to prevent file(s) from being tracked: create a plain-text file called .gitignore in the project root and include the untracked filename(s).

3. Commits

   • Version Control systems do not sync files automatically, they need to be instructed exactly when to save and which files to save. Git Commits are these save points, they are the core building block units of a Git project timeline. A commit may contain several file changes and is always tagged with a commit message (which should be a meaningful description of the changes).
   • If we wanted our files to be synced continuoulsy we would use SyncThing, DropBox, OneDrive, Google Drive, or iCloud. But these services aren’t designed for tracking source code like Version Control systems are.

4. File Staging

   • Staging is the step before a commit. Staging a file is how we carefully control which files (and which changes) are added to each commit.

5. Remote Repository

   • By default, commits are only stored in a local repository (on your computer inside .git/), which allows us to easily track and revert file changes. However, Git is best used when the repository is also hosted on a remote server. There are free services like Github or Bitbucket, or you can host your own Git server with GitLab.
   • The benefits of having a remote server include:
     • Accessible from any computer on the internet
     • A backup if/when your computer dies
     • Easier teamwork and collaboration
     • Continuous integration and deployment (more on this later)

In this paper we will be using Git to maintain the source code of website(s) that we build. We will also be using Git to deploy our websites to a live server!

You will need the .html files from Lab 01.

📝 Task 2: Local Git Repo

1. If working on your own computer
   • download and install git
2. Open your Lab 01 folder
   • From VS Code, File > Open Folder
3. Open Terminal
   • Terminal > New Terminal
4. If this is your first time using git, run the following commands
   • git config --global user.name "Your Name"
   • git config --global user.email "your_email@example.com"
5. Create a Git repo in this directory
   • git init --initial-branch=main
   • git can default to master, but main is the new standard.
6. Stage all the files
   • git add index.html
   • git add contact.html
   • git add stories.html
   • git add polly.jpg
   • or stage all files with one command git add -A
7. Commit the staged files
   • git commit -m "first commit"
8. Check that everything worked
   • git log check the commit history
   • git status check for unstaged and uncommited files

Expected output:

Now we can track file changes in our project,

Next, we need to choose a remote server to host our repository: GitHub or GitLab.

1. Altitude (altitude.otago.ac.nz) is a Git remote service hosted by the Computer Science department. It’s 100% free, fully featured, and fast!

2. GitHub (github.com) is the world’s most popular Git remote service. It’s mostly free as some features cost money. The choice is yours to make.

📝 Task 3: Remote Git Server

1. Decide on GitHub or GitLab
   • GitLab: login to altitude.otago.ac.nz with your student credentials
   • GitHub: register an account on github.com
     • optionally: register for the Student Developer Pack to access paid features as a student.
2. Update git with the correct email address
   • git config --global user.email "your_email@example.com"
   • GitLab: use your student email
   • GitHub: the email you registered to GitHub with

When pushing/uploading changes to a Git remote server you must authenticate yourself. Since GitHub has deprecated HTTPS authentication (typing your username and password), we will setup SSH Key Authentication as it’s the modern standard.

SSH Keys come in pairs, a public key and a private key. Both keys are strings stored in files. The private key is a guarded secret, but the public key may be distributed freely.

We will give the remote Git Server the public key. Then, during authentication we can prove our identity as we are the only person with the corresponding private key.

📝 Task 4: Setup SSH Authentication

1. If using your own Windows computer
   • Either intall Git Bash or…
   • Enable WSL (Windows Subsystem for Linux)
     • guide here https://docs.microsoft.com/en-us/windows/wsl/install
2. Start SSH service agent
   • From Git Bash or MacOS Terminal
   • eval $(ssh-agent -s)
3. Generate a public and private key pair
   • ssh-keygen -t ed25519 -C "your_email@example.com"
   • you must use the same email as GitLab or GitHub account
   • accept all the deafults when prompted:
     • file name ~/.ssh/id_ed25519
     • empty / no passphrase
   • There will now be 2 files in ~/.ssh/
     • id_ed25519 the private key
     • id_ed25519.pub the public key
4. Add your private key to your keychain
   • ssh-add ~/.ssh/id_ed25519
5. Check to make sure the private key was added
   • ssh-add -l
6. Copy the public key to your clipboard
   • Windows
     • clip < ~/.ssh/id_ed25519.pub
   • MacOS
     • pbcopy < ~/.ssh/id_ed25519.pub
7. Add your public key to the Git remote server
   • GitLab:
     • Profile > Edit Profile > SSH Keys
     • give it a name/title
     • paste the key (from id_ed25519.pub)
     • remove expiration date
     • click Add Key
   • GitHub:
     • Profile > Settings > SSH and GPG Keys > New SSH Key
     • paste the key (from id_ed25519.pub)
     • give it a name/title
     • remove expiration date
     • click add SSH Key
8. Test that the key works
   • the following command authenticates the private key (in your keychain) with the public key (on the remote server)
   • GitLab: ssh -T git@altitude.otago.ac.nz
   • GitHub: ssh -T git@github.com

Expected output:

From now on every interaction with the remote Git server will be quick, easy, and secure.

Next, we will push our local Git repo to the remote server.

📝 Task 5: Create Remote Repository

1. Create a remote repository
   • Gitlab
     • Login to altiude.otago.ac.nz
     • Click New project
     • Click Create blank project
     • Type in some Project name
     • Choose your user name as the Project URL
     • Select Private visibility
     • Uncheck Initialize repository with a README
     • Click Create Project
     • 
   • GitHub
     • Login to github.com
     • Click New
     • Type in some Repository name
     • Select Private
     • click Create repository
2. Return to the terminal
   • navigate (cd) to our git repo we created earlier
3. Add the remote server to your local repo
   • GitLab:
     • git remote add origin git@altitude.otago.ac.nz:{username}/{project-name}.git
       • e.g. git remote add origin git@altitude.otago.ac.nz:crire90p/lab-02.git
   • GitHub:
     • git remote add origin git@github.com:{username}/{repo-name}.git
4. Push the latest commit to the remote server
   • git push -u origin main
5. Refresh the web browser to ensure everything worked

If git defaulted to master branch, you must rename to main before pushing.

git branch -M main
git push -u origin main

Next, lets test our remote by making some file changes.

📝 Task 6: Update the repo

1. Make some changes to index.html
2. Stage the changes
   • git add index.html
3. Commit the changes
   • git commit -m "some changes"
4. Push the changes
   • either git push
   • or git push -u origin main which identifies
     • which remote: origin
     • which branch: main

These are the three commands you should run whenever you update your project. Add. Commit. Push… Add. Commit. Push…

There are a few ways to host your website on the internet.

You could run a local web server on your own computer and configure port forwarding on your home router.

A more popular choice is to use someone elses computer which is already configured and is online 24/7. Some of these services inlcude Amazon’s AWS, Google Cloud, DigitalOcean, etc.

There are many software packages with web server functionality. In the next excercise we will use use Node.js (npm/npx) to host a local web server.

📝 Task 7: Local Web Server

1. If you are working on your own computer, install Node.js
2. From a terminal navigate (cd) to your .html file(s)
3. Run npm install -g http-server
   • on the lab machines you may have to run this command several times before it works.
4. Run npx http-server
5. Visit localhost:8080 from a web browser

There are almost limitless ways to configure and modify your Node.js server, and we will be looking into some of those options in future labs.

✅ Python Web Server

You could also use Python to run a web server.

1. Install Python 3
2. Run pip install http
3. With a terminal navigate (cd) to your .html file(s)
4. Run python3 -m http.server
5. Visit localhost:8000 from a web browser

Lastly we will make our site accessible on the internet using a public web server.

Both GitLab and GitHub offer a service called “Pages”, a free, static, web hosting solution. All we must do is tell the remote how to deploy our repository files as a website.

✅ Tip

Hosting your website like this is a requirement for Assignment 1

Finish the below task if you chose GitLab

📝 Task 8: GitLab Pages

1. Create a file in the repo called .gitlab-ci.yml
2. Copy the following into the file:

pages:
  stage: deploy
  script:
    - mkdir .public
    - cp -r * .public
    - mv .public public
  artifacts:
    paths:
      - public
  only:
    - main

3. Stage, Commit, and Push the file to GitLab
4. Check the deployment progress under
   • CI/CD > Pipelines
5. Make the site visible
   • Settings > general > Visibility, project features, permissions
   • Click Expand
   • Under Pages select Everyone
6. Open the URI under
   • Settings > Pages > Access pages
   • It will look like: https://{user}.cspages.otago.ac.nz/{repo}/
     • e.g. https://crire90p.cspages.otago.ac.nz/lab-02/

Finish the below task if you chose GitHub

📝 Task 9: GitHub Pages

1. From the repository page on github.com
2. Visit Settings > Pages
3. Under source choose the main branch
4. Click Save
5. Check the deployment progress under Actions
   • wait for pages build and deployment to finish
6. Open the URI under:
   • Settings > Pages
   • It will look like: https://{user}.github.io/{repo}/

Getting a job as a programmer requires you to showcase your skills and experience. Building a portfolio website is a great way to do this.

📝 Task 10: Portfolio Website

1. Download a free template
   • https://html5up.net/
2. Modify the images/text
3. Host it on GitHub Pages
   • https://pages.github.com/
   • While you could host it on GitLab, GitHub would impress employers more.
   • My personal portfolio is here https://rcrimp.github.io

✅ Tip

The above task is optional. You could instead use this time to work on Assignment 1.

• Task 1: Setup Lab Environment
• Task 2: Local Git Repo
• Task 3: Remote Git Server
• Task 4: Setup SSH Authentication
• Task 5: Create Remote Repository
• Task 6: Update the repo
• Task 7: Local Web Server
• Task 8: GitLab Pages
• Task 9: GitHub Pages
• Task 10: Portfolio Website