The first week assignment.

The process!


The tools I will be using:
1. Notepad for the HTML / CSS codes.
2. Git Bash to commit and upload the web pages.

I will be following two tutorials for this week:
1. "Learn Git in 20 minutes" Youtube tutotial
2. Create an SSH key for Gitlab in Windows

First, I need to download GIT, to start using Git Bash and to connect to my Fab Academy repo.

While it's downloading, I will share some of my CSS code to clarify just how simple I'm making it:

body { background-color: #fff3d2; } h1 { color: #0f0505; text-align: center; } h3 { color: #0f0505; text-align: center; } p { color: black; text-align: center; } #pages { margin: auto; padding: 10px; position: center; text-align: center; } #links { float: center; text-align: center; margin: 0 auto; }

And the HTML of the website index:

<head> My website for the Fab Academy of 2018 <title>Dmitri Paley, Fab Academy 2018</title> <meta name="dima_paley" content="fabacademy documentation website" /> <link rel="stylesheet" href="indexstyle.css" type="text/css" /> </head> <body> <div id="pages"> <h1>Navigation hub to different assignments</h1> </div> <div id="links"> <h2>Links to the weekly assignments:</h2> <a href="week_1_assignment.html">Week 2</a> <br><br> <a href="week_2_assignment.html">Week 3</a> <br><br> <a href="week_3_assignment.html">Week 4</a> </div> </body>

The actual page itself:

GIT:
In order to get the website running, of course, I first need to hook up to the Git repository and to get all these Git commands and connections done.
So first thing's first - I open git bash from my desired folder (right click on the folder and click "Git bash here".

Then I type in the command:

Git init

In the Git bash. I was also previously connected to a repository, but after some computer trouble have had to factory reset, so I'm going to run a quick check and see that I'm not connected any more (git fetch origin):

Nope, not connected. Okay good, so it's actually all from scratch.
So in order to connect to a repository, I need to get the clone url from the repository page.

After I clone it, in Git bash, I type "git remote", Enter, and then "git clone" and paste the repo URL. So it looks like this:

My machine already has the SSH code in the repo, so I should not have any credential issues when I try to push.

Git push origin master

I'll add a new file to the folder real quick, just a simple txt file called "test.txt":

Then I'm gonna run the git push command as specified above.

And it appears that after factory reset, the SSH I had previously is no longer working, as I cannot push the changes to the repo.
Good! This means I'll get to cover that part as well :)

So, from the GitLab's documentation page (https://docs.gitlab.com/ce/ssh/README.html), in Git bash I need to type in the command:

ssh-keygen -t rsa -C "your.email@example.com" -b 4096

Of course my own email is not "your.email@example.com" so I substitude that with mine. I pasted the command, gave it some time, and when it was done generating the key it prompted me to specify a directory to put the key in.

I simply clicked enter, using the default.
And the SSH is done!

To copy the SSH, I need to run the windows command terminal and type in the following command:

type %userprofile%\.ssh\id_rsa.pub | clip

Which I have done, and then simply followed the next step in the documentation:
"Navigate to the 'SSH Keys' tab in your 'Profile Settings'. Paste your key in the 'Key' section and give it a relevant 'Title'."

So now on my settings page I have the SSH:

And time to test the push origin master command again!
But before I do, I actually forgot a couple of intermediary commands as well, which are:
"git add." and "git commit -m 'comment'"

So just to be sure, I closed bash, then opened it again. I also typed in "cd dmitri-paley" which should read from my actual cloned repo folder now.
Running "git remote -v" to test if there's a connection, there appears to be:

NOW I add the "test.txt" file into the "dmitri-paley" folder (I really forgot how to use git, so bear with me while I stumble around to success here), and check with "git status":

Okay, so it's showing right.
So now we know the drill - "git add ." then "git commit -m comment", then "git push origin master":

And on the repo itself:

Great! Excellent, so it's now pushing, and I got a good connection going on. Excellent.
One last thing left to change - in the index CSS file, I'm going to change the color hash.
Instead of fff3d2, I'm changing it to ff1111, which I don't know what result it will actually bring, but likely not be the nice creamy color I initially set up.

I commit and push the changes with git, and then open the website.

TA DA! It is hideous, but also shows that everything works correctly. Changing it back in the CSS and pushing it again:

It's back to normal, and the website is ready to have pages and files pushed to it through Git.
Happy end!

Back home