Week #02: Project Management | Garner Holdsworth | Wheaton College, MA

Make a website and describe how I did it

Created a section about myself on that website

Added a page with a sketch and description of my final project idea(s)

Documented steps for creating my Git repository and adding files to it

Pushed to the class GitLab

Signed and uploaded Student Agreement

Getting Git Going

I had never built a website before, and I had only seen those commercials for the programs that let you make one just like how my generation fooled around in Scratch and made little games with some drag-and-drop tools. That was more or less what I expected to get into with this step of the process...

This was not that.

After probably the most confusing zoom call, we started walking through how to get our computers set up with all the right software and how to link our terminals to our repositories. I decided to stick to the .md format that was standard with the account set up for me through the Fab Academy website (Though I have since switched to HTML). Since my computer runs on Windows 11, I downloaded the Git for Windows application for interfacing between my terminal and my repository; as well as Visual Studio Code to use as a more user-friendly editing software.

After installation, first order of business was to link my terminal to my Git repository. This is necessary because in order for GitLab to accurately track edits and who made them, any edits made to the files need to be "committed" to the HEAD repository (which is stored locally), then uploaded/pushed to the MASTER repository (which is stored remotely). This way, any new versions of uploaded files are effectively saved as a separate version of the original document with a timestamp of when it was uploaded, which can be very handy if something goes wrong down the line and a previous version of your files need to be recovered. This is why Git as a whole is often referred to as a Version Control System (VCS). To link my terminal to my repository, I opened the Git Bash terminal entered a number of commands, listed in order below along with what each one does.

EDIT: Eventually, I ended up swtiching to HTML format as well as the Brackets editing software for further web pages. Brackets allows you to open up an entire folder at once and work on specific files within said folder in parallel with each other. I will keep the link to Visual Studio Code, but I will also add the download link to Brackets to the useful links section.

Setting Up Git Repository

The following commands are my version of the steps required to link the Git terminal on my computer to my repository so I will be able to access and edit my files. The full tutorial provided by Fab Academy will be linked here, and a tutorial on some basic terminal commands I found useful will be linked here; I will also include both in the useful links section, as usual.

Setting my username and email address for the Git config

  git config--global.username "garner-holdsworth"

  git config--global.email "holdsworth_garner@wheatoncollege.edu"

Generated a ssh public key that will tell the repository that I am allowed to access and edit my website files
```
  ssh-keygen -t rsa -C 
```
I copied the key that was generated and saved it in my Git Lab user settings. To view the key in the terminal, I entered the following command:
```
  cat ~/.ssh/id_rsa.pub 
```

 cd firstname-lastname/

First things first, you have to designate your working directory for the linked repository

 git status

It's always smart to view the status of the worktree (list of any edits that haven't been committed/pushed back to the repository)

 git pull

Pulls file data from the master branch (the files as they exist in the repository), and updates your working branch to match it

 git add .

After making changes to any web page file and saving, the changes need to be added/staged into a commit request

 git commit -m 'brief message about changes made'

Commits all staged changes with a comment description

IMPORTANT: Make sure you've already cropped and compressed any images you plan on uploading directly into your repo BEFORE you commit them! Otherwise, you might run into some issues with huge file sizes and would likely end up with you restoring your repo from a previous commit

 git push

Pushes the committed changes to the master Git Lab repository (on certain systems, this step may require a password)

How I Use HTML

I'll admit freely that I signed myself up for a far worse headache when I switched from Markdown to HTML, but the desire to set myself apart from the other students in my Fab Academy Group, compunded with wanting to personalize my documentation won over and so here we are. I had to teach it to myself for the most part, but thankfully, our Lab Supervisor and recent Fab Academy graduate, Brandon Witter, provided some much needed guidance on how to make sense of the madness of building HTML from scratch.

With his help, along with a fair few HTML tutorials, I learned that a site made from HTML has a two primary components:

The Head (which contains the metadata for formatting as well as how the site will be named in the tab)
The Body (almost literally the rest of the site)

There's also this fancy part of HTML that helps you keep your relative pages for a site all cohesive in style, which is called Cascading Style Sheet (CSS), which is essentially just a document full of C code that allows you to create custom elements of your page to make it all look nice without having to edit every text box and image individually. Now, all I had to do was create a blueprint of how I wanted my pages to look, and fill it with the info for each assignment!

I won't cover absolutely everything I did with formatting and CSS, but these tutorials are where I learned how to make the very page you're reading from right now!