Understand the environnement

Like you can see, there are 3 main environnements.

1. Your local computer
2. Git Lab on Internet
3. GIT (the mediator)

-On your local computer you can code your website with a sofware like Sublime Text.
-GitLab is like a cloud or a google drive. It saves your website code on internet and then it communicates with the domain (CI/CD file) so your site can be seen on Internet
-Finaly, GIT is your channel of communication between your local computer and Internet. Also, because it's nice, GIT is a version control. It will keep track of all the different version you save and can make branch on your current or other initial project.

Branch

The blue dot line is the master branch while the pink and the green split the master branch to do a another vertion. For exemple, if your master branch is a square yellow, the pink version can be a yellow circle and the green one can be a square blue. At the end of all, if you need a old version of your work so you can acces it. If you want to do a branch, you can and if you want to have a old version of it you can also have it.

How to

1-Install GitLab

1. Install GitBash (help you with the color of your therminal to see the relevent information) for Mac following the tutorial
2. Register to GitLab
3. In your account, go to your Settings and generate your ssh key following the tutorial of GitLab
4. It is supposed to do the same sequence has the image What you need to do on your terminal to generate a ssh key
5. Copy your ssh key in your GitLabSettings
6. It will show you a confirmation like the image Copy your ssh key in your Git Lab

The ssh key is essential to recognize your local computer. It's a unique language between your computer and GitLab to make sure that you will always be in controle of your project.

Tips:

Each repository is a project

In each project you need a READ ME file and a index.html file

The file -ci.yml is escential to continuously send your site on internet

These are some website very helpful: GitLab basics

Installing Git Bash on Mac

Where to put your ssh key in GitLab

What you need to do on your terminal to generate a ssh key

Copy your ssh key in your Git Lab

2-Install git

1. Download Git
2. Install Git on your computer like any other application.
3. Like you see in the picture How to config git on your terminal, you have to config your git with git config --global
4. Then you are ready to began your project. You can go on your local computer and create a folder that you will put all the files associate with your web site in.
5. When you begin a new project you have to git init(Create a new repository to start a project) or git clone (Copy a repository and start from there)

I personaly clone the base repository that the Fab Academy gave me. I delete their folder doc with their template and I replace it with the one I download from internet.

Principal fonction you will use on Git:

1. Git init or Git clone (Initiate a repository on git lab (a repository it like the file of your new project) or clone a repository and start from there)
2. Git Pull (Ask the mediator to take your latest version of code on GitLab)
3. Git Status ( Tell me the diffence between this latest version on Git Lab and my latest version on my local computer)
4. Git Add . (Combine both version and make it ready to give to GIT the mediator)
5. Git Commit (Giving this new version of your work to GIT the mediator)
6. Git Push (Ok GIT the mediator, you can push it on GitLab!)

Thanks to the patience of François and my collegues. These are some website very helpful: Start with GIT, Git tutorial.

Git site where to download

Installer of git complete

How to config git on your terminal

Where to clone your repository

The web adress on the picture before is the ssh adress of the repository on Git Lab

git status and git add .

git push

3-Code your web site

1. Install Sublime Text. It's a software who will help you code and organise your site.
2. I download a CSS Template and start from there
3. Personalise your site and make it your own (Don't forget to give the credit to the owner of the template)

I never coded a web site, so I am starting very far away. The good thing with that template is that I can copy the different fonctions and work from there. The template I choose is really well made, documented and organise. It's very easy to personalise it and learn from it.

Very useful:

HTML

My site work with a HTML file where you code the content of the site. A CSS file where you do your page layout like the color, the row. etc. A Java script file (everything that creates a mouvement like when there is a go at the top button and you see that it's scroll up automaticaly. A image folder (where you put all your photo and video of your site in their)

Here is a html file that I created based on my template and that you can download. I annotated the code with all my go-to fonction.

The aligment of all elements help me a lot to recognize what was open and what was close. When you code, everything needs to OPEN, write something and then CLOSE. If you're not careful, it can be very long to find the error. This is why the aligment is very practical, you can see in a minute the structure and who's in whom.

These are some website very helpful

Codecademy gives free begginer code class including html and css. It gives me a great start to start personalise my site

W3Schools is great to find different fonctions or to understand them

Where I download the free template

Original template, on internet

Original template, the code html

Problem

403 forbidden error

At the end of all, I push my site on GitLab and I have the 403 Fordibben error...oops! One of my collegue told me about the none written rule for the name of every files and folders You shall not put spaces, special charater or any accent anywhere.I change the name of my 0-index.htmlto index.html.
403 Fordibben error...again! I went to see the web site of Philoppe Libioulle. He knows alot in this domain and hopefully he already pushed he's site.

Solution

The file -ci.yml was built for the basic template of fab academy. Like I told you before, the type of file is responsible to send regularly you site to the domain. If it's not right, the communication can not be made. So I changed my -ci.yml file and magic happened, my site was on Internet.

403 Forbidden, I change the name of files

Diagnostic ci.yml

Correcting the ci.yml file

It's a victory