Versioning and Website

Choose my template

Hi, here I will explain my approach of how I create my website and how I make it accessible on internet using GitLab. At first I have to choose a template because I don't have the skills for create a responsive and pretty Website in 1 week. I decide then to found one on html5up.

html5up

In order to find the best template for my website I had to know what use I will have and then what are the criterion for choosing the best template. I will use this website for documenting my weekly work for the FabAcademy and people will use my website in order to find documentations.

On the whole :

  • Responsive
  • Easy to navigate
  • Not too artistic and conceptual

Then I choose the template called "editorial" because he respect all of my criterion and is very nice and easy to navigate in. At this time my objectif was to modify it for my requirements.

Using Visual Studio Code I have opened up my html files called generic and index in order to build my homepage and a generic page that I will use for creating new pages. I deleted some parts of the homepage that was useless for me. To do this, I use the "examine element" tools of firefox. He able you to examine your Website and to identify parts of your Website in html code. Then I have deleted the code who correspond to the useless parts. Afterwards, I have added all of the week on my menu and generated all of my week pages. And I fill my pages with documentations and text about me.

What is a website : HTML 5 and CSS 3

A website is basically composed by 2 differents things that work together.

The firts part is the content of your website and it is coded using HTML balise. This is the differents type of data, for exemple all of the text, list, table or images will be added to the body of your website through HTML.

The second part is the page layout. It is coded with a language called CSS. With you will be able to modify precisly the placement, color, size and many other visual parameters. In most of the case, the CSS will be write into a different file than the HTML and the HTML will in a way "import" the css and apply it to the differents contents of the HTML page.

You must ask, how the css will now to wich content it must applied and I will explain it but before I want you to see the exatly same webpage (this webpage) without the CSS. I think that something that you already see ! Upload the Website

After this my website was ready to be upload. One of the requirement of the week was to use GitLab for hosting the Website. The first time was to create my GitLab account and associate it to the FabAcademy GitLab called FabCloud. I went to the Fabcloud page and I logged in with the same email I used for registration at the Fabacademy 2019. My FabCloud account was created.

Now, I needed to make communicate my local repo and my fabCloud repo. To do this Git use "SSH key". The first step is to generate an SSH key on my computer.

On my Linux terminal I used this command ssh-keygen -t rsa -C my-email@mail.com -b 4096 and saved the SSH key in a file. I copy the public part of the SSH key using xclip -sel clip id_rsa.pub in my .ssh repo. and I past it in GitLab. Use ls -a in order to see your hiding repo (like .ssh).

ssh_key_term

ssh_key
And I clicked on "Add key".

Now I have to configure my repo to transform my html and css files in a website. To do this my repo needed to be used as a server.

gitlab-ci.yml

As you can see on the picture, I create in the root of my repo a new file using an existing template of .yml file. This little script make running a little server to generate my Website.

Afterwards, I cloned my repo on my computer using "git clone git@gitlab.fabcloud.org:academany/fabacademy/2019/labs/sorbonne/students/leo-lhermitte.git" And I added all of my Website files in my local repo.

Finally, I just had to upload my new files to my gitlab repo. To do this, I used git status to check that all of my changes are concidered by git and to check the size of my upload. Afterwards, I used git add * to add all of my changes to futur new commit. Then git commit -m "First version of my website" And then git push for upload all of my changes.

git commands

I think the most important thing that I have dicovered this week is the git logic ! Git seems to be a really powerful tool ! This open source concept is used by GitHub or GitLab and many other. It allow you to manage you files and version with a distant server. And the true power of this tool I guess is the possibility to have more than on user working on the same project while managing different versions and development branches.

git logic

What I have learned ?

At least my basics knowledge about html/css and website has allowed me to understand and make what I want with the html5up template. Fortunately, the code construction of this template is really clear ! But in this field I don't have learned a lot of new things, this in the versioning and git field that I have learned impressive new things for me. I plan to try to use Gitlab to manage differents version of the 3D models of my final project. I have heard that gitlab allow you to manage and see the difference beetwen two .STL files. Finally, this week was for me the opportunity to dive into the web world and that was very interesting.

See you later space cowboy