Explore and use website development tools.

Identify and utilise version control protocols.


Made a website and described how you did it

Introduced yourself

Documented steps for uploading files to archive

Pushed to the class archive

Signed and uploaded Student Agreement


Date: Jan 23-30 / 2019


A. Install Git and connect to Git Lab

The first thing that we need to do is connect our computer (local server) with the remote server, situated on gitlab, a platform based on GIT. GIT is a "Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency." Which basically means that you can see the changes that you made and connect your work with the work of others in the same project.

This is probably very useful if your are creating something as a group but, maybe, it's not so obvious if you are working alone.

In the GIT page you can dowload the program. It has it own bash console and a visual interface to see version, to manage then you have to use the bash console.

link to the GIT web

There are many information in the web such as tutorials and documentation. Anyway, it's sounds too complex for my needs so I tried with an easier guide and the tutorials provided by fabacademy and fabacademy nodes.

But before start to send love letters between the remote server and the local server we need a secret signal...

To connect the server on git lab with our computer we need to create a SSH KEY, an access credential in the SSH protocol (ssh means secure shell, basically is a way to avoid mean people in your server doing how knows what). If you don't have the same in your computer and in Gitlab it won't let you do anything.

Following Neil's advices I tried LINUX first. So I installed Ubuntu in my windows computer, following the instructions from the Microsoft web: Became a developer, download Ubuntu, open Ubutu.

The black screen makes me feel that a hacker although I'm a little bit worried; I feel that I can write something that will break the whole computer. At the end, I discover that if I write something wrong the console does nothing (the computer spent the whole afternoon saying "I don't understand you") and that's it.

But let me focus. I followed the instructions from Gitlab, which gave me three ways to get SSH, one for Linux, another for windows and a third one for MAC (meh). I tried first Linux and everything wen fine with the SSH KEY. Let me show you.

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

Great! Now I'm only need to copy the ssh key in GitLab but to do that I need to use in Linux I have to use the XCLIP command, and to do that I need to install the XCLIP package. No problem, google is an old friend.

Installed. Now, I need only need to write "xclip -sel clip < ~/.ssh/id_rsa.pub" and go for a beer...

sh... So nice to be true. Xclip it's not working well. I can find the file, or is not working. A very frustrating time started then and I chosed the easiest way: I changed to the Cmd console from windows

I openned the windows console wrote again "ssh-keygen -t rsa -C "your.email@example.com" -b 4096", then wrote type %userprofile%\.ssh\id_rsa.pub | clip and use CTRL + V on the gitlab page for settings.

Git lab sent me a congratulations message to confirm my success :) but I also tried my ssh key testing it with the console. I just need to write the command ssh -T git@example.com and the server said welcome to me

Now it's time to use the commands for GIT and get a copy of the remote server in my computer to play and start the second part of the assignment (spoiler alert: I did it, that's why you can read this). I try first using this guide Git - The simple guide.

It wasn't enough so I also used these other ones:
git handbook
fabacademy tutorial
git handbook
small tutorial in google docs

Why did I have to use so many tutorials and manual? Well, This is going to be very funny for you: To get a copy of the repository in your computer you need to write this command "Git clone yoururl". That's what I did it with messages of error as result.

"not found" "couldn't access"... Something was wrong. I though it has something to do with the url that I was using so I wrote many different combinations. I wrote by hand all of them because I thought that It was imposible to use Copy / Paste on windows cmd (don't ask me why), Finally I found my mistake, ready?:
Wrong url: git@gitlab.fabcloud.org:academany/fabacademy/2019/labs/ied/students/hugo.garcia.git
Correct url: git@gitlab.fabcloud.org:academany/fabacademy/2019/labs/ied/students/hugo-garcia.git
I've felt very stupid, believe me. But after this I clone my repository and start playing with git.

I tried some commands more like git log

git merge, git push, git pull... the basic commands to talk with the server to upload or download files

Everything was working fine but I thought that it would be nice to chat with and expert / friend from highschool about the opportunities of git and the best way to use it.

He recommend me to use GitKraken a very complete Git client (a visual interface to use git) used by big companies like apple or IBM. It's very intuitive to use and even let you see the changes or edit the file itself without using another program. We installed together and it looks like this:

This is my friend Díaz. He works as programmer in a start-up and is a real freak of these things. Lucky for me he accepted to share his enormous knowledge just for the price of some beers.

After try the program for a while I think that I will use it during the rest of the fabacademy course. I feel that it's a more powerful tool than the windows console and it shows you more information at the same time about the files in the server, your files and the changes ade in the past.

B. Design and upload the web

I have some experience with web design, specially with HTML and CSS. It was my first step into the programming world and I've been doing basic webs for 5 years as a hobby or for friends. I can't say that I have a great knowledge, but I know most of the syntax and I can manage to modify a template with time and patiente. So, this second part is easier for me than the first one. That's why since the beginning I was decided to use my own template instead of use the one preprogrammed in GITLAB

For coding you don't need a special program. It can be done with google docs, or even in a basic text document of windows, but it won't be very confortable. Nowdays, we have special text editors that recognice the syntax, preload the web and let you manage the files (img, css files, html files, etc.) that a web site needs to be ready to be seen.

I've been using Brackets for a while. It's opensource, you can see the changes in real time and it has good extensions and a good community to help you. In the other hand my friend Diaz told me that now there is a newer and mor epopular una called "Visual code"

Visual studio code is a great discovery for me it's more complete than Brackets and has very interest extensions. For example, I can control Git and coding from the same program even without GitKraken. Also, I can resize img, create a local server to see the web while i'm tipyng the code and it will be very useful in the future because it can be use for javascript, python, etc.

I don't want to expend too many time with the website so I going to use a template, a predefined website create by someone that includes almost everything that you need. It makes easier to create a website because you just need to adapt your content and it's done. I want to use one based on bootstrap

Bootstrap is an open source toolkit to develp responsive websites in HTML, CSSand JS. The advantages is that they have done all the hard work and you are using a library of codes and commands that are working already.

I chose a this template, download it and start to adapt it to the contents of the fabacademy program using visual studio code. Basically I have to erase many thing that I won't use. Here is how it looks like in the editor

Finally, I used Gitkraken to push my website to the Remote server. Now the web is upload and canbe seen from the online directory. Time for a nap, I guess.