Go through a git tutorial

Luckily, i use git and gitlab on a daily basis for my work, so i was able to go through the tutorial relatively quickly.

The main commands i will be using are:

git clone - Creates a clone of the remote repository on the local machine
git status - Shows any changes on the repository
git add . - Adds all the new files or removes all the deleted files. Dot means all
git commit - Creates a snapshot of the current status
git push - Uploads the snapshot of the local computer to the remote branch
git pull - Downloads the server content of the remote branch to the local computer
git branch - Creates a new branch from the current branch

The first step will be to set up the SSH key. As i knew i already had one, i tried looking online on how to export it and copy it over. But finally the easiest thing to do was to go to my personal gitlab account > settings > SSH keys and copy it from there. Log in to the fabcloud gitlab account and paste it

At this point i couldn't find the password to log into fabcloud's gitlab, so i just clicked forgot password and reset it.

Then i cloned the remote repository on fabcloud. I went to the link that was provided to me on fabcloud.gitlab.com, and got the cloning address. Then went to the git bash console and typed in:

git clone https://gitlab.fabcloud.org/academany/fabacademy/2020/labs/barcelona/students/roger-anguera.git

Once i had a copy of the remote folder on my PC, i tried all the commands to make sure everything was working. I made a minor edit on a file and then:

git status To see if it was registered.

git add . To add it to the repo

git commit -m 'test' To create a commit with the message 'test'

git push To push this change to the remote repository

And finally just logged in fabcloud's gitlab to make sure that the change had been registered

Here's a sample output of the whole process:

Roger@Wintermute MINGW64 /c/roger/projects $ git clone https://gitlab.fabcloud.org/academany/fabacademy/2020/labs/barcelona/students/roger-anguera.git Cloning into 'roger-anguera'... remote: Enumerating objects: 232, done. remote: Counting objects: 100% (232/232), done. remote: Compressing objects: 100% (124/124), done. remote: Total 232 (delta 114), reused 168 (delta 98)00 KiB/s Receiving objects: 100% (232/232), 1.48 MiB | 805.00 KiB/s, done. Resolving deltas: 100% (114/114), done. Roger@Wintermute MINGW64 /c/roger/projects $ cd roger-anguera/ Roger@Wintermute MINGW64 /c/roger/projects/roger-anguera (master) $ git status On branch master Your branch is up-to-date with 'origin/master'. Changes not staged for commit: (use "git add/rm ..." to update what will be committed) (use "git checkout -- ..." to discard changes in working directory) modified: web/index.html deleted: web/pages/basic-grid.html deleted: web/pages/full-width.html deleted: web/pages/gallery.html deleted: web/pages/index.html deleted: web/pages/sidebar-left.html deleted: web/pages/sidebar-right.html Untracked files: (use "git add ..." to include in what will be committed) web/pages/01-principles-and-practices.html web/pages/02-project-management.html web/pages/template-modified.html web/pages/template-originals/ no changes added to commit (use "git add" and/or "git commit -a") Roger@Wintermute MINGW64 /c/roger/projects/roger-anguera (master) $ git add . Roger@Wintermute MINGW64 /c/roger/projects/roger-anguera (master) $ git commit -m 'linked menus and front page buttons to all future pages. Created template for 01 and 02' [master 44a3ca6] linked menus and front page buttons to all future pages. Created template for 01 and 02 10 files changed, 463 insertions(+), 22 deletions(-) create mode 100644 web/pages/01-principles-and-practices.html create mode 100644 web/pages/02-project-management.html create mode 100644 web/pages/template-modified.html rename web/pages/{ => template-originals}/basic-grid.html (100%) rename web/pages/{ => template-originals}/full-width.html (100%) rename web/pages/{ => template-originals}/gallery.html (100%) rename web/pages/{ => template-originals}/index.html (100%) rename web/pages/{ => template-originals}/sidebar-left.html (100%) rename web/pages/{ => template-originals}/sidebar-right.html (100%) Roger@Wintermute MINGW64 /c/roger/projects/roger-anguera (master) $ git push origin master Counting objects: 8, done. Delta compression using up to 4 threads. Compressing objects: 100% (8/8), done. Writing objects: 100% (8/8), 2.54 KiB | 0 bytes/s, done. Total 8 (delta 6), reused 0 (delta 0) To https://gitlab.fabcloud.org/academany/fabacademy/2020/labs/barcelona/students/roger-anguera.git d030348..44a3ca6 master -> master

Configure CI/CD on gitlab

At first, i thought the instructors were in charge of redirecting the hosting to wherever we saved our website, and that the default content on /docs and thus the mkdocs.yml and .gitlab-cy.yml were just for the default content.

That wasn't the case, so i scrolled through the documentation on CI/CD:

And finally, especially after reading a bit about mkdocs, i realized i only needed to change one line on the mkdocs.yml so that it would point the generator to the folder were i had built my website, in my case /web instead of /docs. So on the mkdocs.yml file i changed:

docs_dir: docs to docs_dir: web

And after a few seconds i could see my web on the fabacademy server :)

Create your personal webpage

After hearing about markdown at the weekly class, and seeing the default page that we had on gitlab written in it, i decided to play with it a little. But having done things in html before and seeing that it allowed for more freedom and more options, i quickly decided to do an html-based page.

Since we're not doing anu PHP or server-based code for now, i did not have to install any local servers, and could just build the pages by loading them locally via file://

Following Neil's advice, i opened a few random pages from last year's students to get a reference, and saw that some of them were using premade templates, which i thought was a great idea to build upon. I looked at this profile: http://fabacademy.org/2019/labs/berytech/students/nour-arabi/week2.html and saw where the template came from.

I then went to https://www.free-css.com/, and looked for a simple template with a grid and some hover effect. I decided on this one https://www.free-css.com/free-css-templates/page245/jovaphile

I used the sublime 3 text editor since i was already familiar with it and it has good code color highlighting.

After installing the full template, i started removing parts of it that i did not need on the home page. This was easy by locating the content on the source html and removing the parent div blocks all at once.

I then uploaded a new background image, from one of my projects at Neuroscape

And then started editing the CSS file to change a few things, mainly sizes of paddings and colors. Firefox's inspector was incredibly useful for this, helping me locate the exact points on the CSS file:

These are a few changes i made:

#pageintro{padding:200px 0;} to #pageintro{padding:120px 0;} - Reduced the header size
a{color:#74D3D3;} to a{color:#66AAF4;} - Change the color of the links to a darker blue
removed .overlay.light::after{background-color:rgba(255,255,255,.8);} - Removed a translucid white overlay on the header image.
removed .overlay.light{color:#474747;} - Removed a translucid overlay over the header text.

Finally i prepared placeholders for all the future assignments, so that (hopefully) i won't have to touch the homepage anymore

To change the icons of each assignment on the homepage, i had to dig a little bit more into the code than i thought. Initially i thought they were images, but the template uses something called Font Awesome, a collection of glyphs that come in a webfont.

To find new ones for each project, i googled to find a list of icons with their css tags, and found this. I then just had to change the css class of each assignment for a new one:

Lastly, i adapted a template from the template package to use as a generic assignments page. I made sure that it has everything i need on it (menu, clear font, images and floating images, footer...). I then copied the file and renamed it to the first two assignments, and made sure that the links from the home page were working. in the future assignments, i will just create a copy of this file and fill in the new content.