Week one lab homework for the "Git and GitHub for Librarians" course

online-portfolio-lab.md

Lab Assignment: Online Portfolio

For this lab, we are going to create an online portfolio using Git, GitHub, Wowchemy (free academic website templates), and Netlify (a free web hosting service). This assignment is intended to demonstrate some quick and easy benefits to Git-based workflows. You can use this online portfolio for yourself or simply as a test to experience the process of setting it up. By the end of this assignment, you will know how to:

• Clone a Git repository from remote Git repository on GitHub
• Commit changes to a local Git repository
• Push changes to your remote Git repository on GitHub

This assignment uses open source software and free web services to help us make a professional-looking website very quickly. Wowchemy provides free website elements and tutorials as open source software for personal, educational, and academic websites. Netlify is a hosting provider that we can authorize to access Git repositories hosted on GitHub (or GitLab, or BitBucket) and automates the build and deployment process for websites. In this assignment, we'll use Wowchemy to design our website, GitHub to host our website source code, and Netlify to build and publshing our website on a server we control.

1. Browse and select a free website template from Wowchemy: https://wowchemy.com/templates/
2. Click on the Create Site button; this will prompt a login to Netlify
3. Click on the Connect to GitHub button
4. Authorize Netlify to have access to your GitHub account
5. Give your repository a name: online-portfolio

If you see an error, this might be that you already have a repository on your GitHub account with the same name. You can give this repository any other name you want for the purposes of this lab. online-portfolio is mostly a suggestion, rather than a requrement.

This process will automatically clone the Wowchemy template to your GitHub account and set up a deployment workflow with Netlify. You should now see the Netlify administrative dashboard. The dashboard will give you a URL where your website is published using the Wowchemy template you selected. The website will be at a URL that looks something like this: https://UNIQUE-IDENTIFIER.netlify.app. If you open this URL in a web browser, there will be a fully-functional website available. This website is yours.

To edit your website, we'll need to clone the website's Git repository from GitHub to your computer. The git clone command is used to create a copy of an existing git repository on another computer. We'll cover git clone in a later chapter, but for now, we'll use VS Code to perform the git clone task for us.

1. In a web browser, visit your GitHub account and open the repository home page for the website you just created: https://github.com/YOUR_USERNAME/online-portfolio
2. Click on the Code button copy the SSH clone URL. It will look something like this: [email protected]:YOUR_USERNAME/online-portfolio.git
3. Open VS Code (if you're new to VS Code, it will open to the Welcome screen)
4. In the Welcome screen, there's a Start heading with options to open a New file, Open folder, or clone repository
5. Click on clone repository and paste the SSH clone URL for your website; this will open your file explorer
6. Select a location on your computer to store a local clone of the website's Git repository (maybe you have a folder for your Git learning materials?). Make sure you store the repository on your computer's hard drive (rather than a Network drive)
7. In the bottom of VS Code, click on the Open button to open your local Git repository

You are now set up to work locally on your online portfolio website using VS Code. You are also able to push commits you make on your local repository to your remote on GitHub. Because we're also using Netlify to build and deploy your website, every time you push commits from your local repository to your remote repository, your website will automatically rebuild and re-deploy to https://UNIQUE-IDENTIFIER.netlify.app. Let's see this in action:

1. In VS Code, open your local Git repository of your online portfolio website (it might already be open)
2. Open this file: /config/_default/config.toml in the editor
3. Set the name of your website to whatever you'd like by editing the line that begins with title = . Put the new name of your website in quotations "". This file contains basic configurations for your website expessed using TOML syntax (here's a quick primer on TOML with examples).

You can find more information on adding content and using the website template on the Wowchemy documentation website.

4. Save the new title (Ctrl+S or File > Save) in VS Code
5. Open the Terminal in VS Code
6. Run git status in the terminal; you should see a response list of changes that have not been staged for commit
7. Run git add . in the terminal, then git status again; you should see a list of changes that have been staged and are ready to be committed
8. Run git commit -m "updated title" in the terminal; this will make a new commit to your local repository
9. Run git status once again; you will see that your local repository is ahead of your remote repository (called "origin") by 1 commit
10. Run git push to push your local changes to your remote on GitHub

If you push to your GitHub repository multiple times, and are prompted to login with your GitHub username and password each time, you might want to set up SSH authentication between your computer and GitHub. These instructions will walk you through the process of generating SSH keys and adding them to your GitHub account. If you're on Windows, you'll want to use Git Bash for this process. If you can't easily find Git Bash on your Windows computer, it might be located in C:\Program Files\Git\, C:\Users\USERNAME\AppData\Local\Programs\Git, or wherever Git is installed on your machine. Git Bash can be opened by double-clicked on the git-bash.exe file.

Congrats! You now have an online portfolio website that your can manage with Git and GitHub.