After traveling through some Covid-19 protocols, on january 27th, I reached Wheaton College in Massachusetts where my lab is located. After getting initiated through some prep meetings, I felt that it was necessary to get situated with Git and Gitlab. When first signing into my gitlab account, my repository contained these files.
Files in repository when Gitlab was first opened
These initial files would build me a pretty generic website where I could fill in information where needed, but it was up to me to change things up. One good thing I found out about Gitlab was that it tracked and recorded deletions and additions in the commits tab so that I could always see what changes were made. Also, I think it will be very important to learn how branches work so I will test that out when I take a look at Git.
After downloading Git, as well as Gitbash, the first thing I needed to set up was my SSH key. The SSH key will act as an encrypted credential that will be used so that I can securely edit my repository on Gitlab. I first entered these commands into Gitbsh:
ssh-keygen -t rsa -C "myemail@gmail,com"
You can change the directory but hitting enter will send it to the default place (/c/Users/NAME/.ssh/id_rsa). Make sure as to not save it with any passphrase. Next I saw this:
Not real key, made it myself in notepad
Next I enterd this command:
cat ~/.ssh/id_rsa.pub
This showed me my key and I copied and went to my Gitlab page where I pasted it in the space below in my profile settings page.
Clicked top right profile > setting > SSH Keys
Following the tutorials on the fabacademy website I first checked both the Atom and Sublime software and ended up downloading Atom. Next, because I have no experience with HTML and CSS, I followed some of the simple tasks on the fabacademy webpage then furthered my learning on w3schools.com to get a better understanding of the things I wanted to do. I then got to work. Before I pushed anything to my repository I used this command:
py -m http.server
This allowed my to use http://localhost:8000 on my browser in order to get a preview of what my webpage looks like. I decided I wanted to create some things on my own while also using a template on w3schools.com to round out my website. The theme I ended up using was the Startup Template.
Found on w3chools.com
HTML logo
HTML stands for Hypertext Markup Language and is the standard markup language that is used to build websites. When using html, html elements will be used to create the structure and each element can have HTML attributes that change the elements behaviour.
Example:
<a href="index.html" class="class1"> Text </a>
Here we have the element <a> </a> being changed by the attributes href and class.
Here are some important HTML elements:
<html> </html>
Defines HTML document
<body> </body>
Defines documents body
<header> </header>
Defines documents header
<footer> </footer>
Defines documents footer
<p> </p>
Makes paragraphs
<h1> </h1> to <h6> </h6>
Makes headings
<a> </a>
Creates a link
CSS logo
CSS stands for Cascading Style Sheets which can be written in order to stye a document written in a markup language. When I used CSS it allowed to to change the colors, layout, fonts and the general style of my webpage to a much further degree.
CSS that changes colors, layout, and fonts
Above is the general format in order to use CSS. You can either have it in the <style> </style> section or save it as a CSS file.
<link rel="stylesheet" href="style.css">
Is a command to load in a CSS file.
When I found my changes to my liking, it was time to commit to my changes. First, I cloned my repository to my computer:
git clone git@gitlab.fabcloud.org:academany/fabacademy/2021/info.git
Selecting the "clone" button on the project overview page will let you copy the path on Gitlab. Next I need to go to the command line and change directory to the master branch.
On top right I can see that we are in master
After coding the changes that I wanted, it was time for me to commit my changes
git add index.html
git add week1.html
When I was lazy I could type:
git add .
Which would just add everything in the directory.
git commit -m "Update Message"
git push
These were the final commands needed to push all my work to the repository.
To create a new branch I typed:
git Branch "Branch Name"
Anytime you want to switch to a given branch you type:
git checkout "Branch Name"
With this you have created and switched to a new branch. This feature is a really important in Git as it allows you to test and create new feature while maintaining the stability of the master branch.
Using this command:
git branch -a
Screen showing branches created
I can now see that I have successfuly created a second branch. I can now switch over and and make changes and commits without affecting the master branch. Once you are done with you changes, you can type the command:
git merge "branch name"
Screen showing branches being merged
after this, you can type these commands if you want to delete your branch:
git branch -d "branch name"
For a branch that has been merged.
git branch -D "branch name"
For a branch that has not been merged.
In the end, I have never used HTML, CSS, or javascript before this week (although I do have a good amount of experience in coding). HTML seems doable, but I had a lot of trouble in the beginning figuring out What each tag did and how attributes even worked. I am most cerntainly no where near close to being proficient in HTML, but I hope to continue working week after week to elevate my skills.