Before starting the Fab Academy Diploma, we had a pre-FabLab course. Most of the classes were online through Microsoft Teams. First we learned using GitLab to initiate a HTML website and modify it by using a software called Brackets. In addition, we learned using the Atom software to iniate websites and modifying them by using the markdown language. Here are the full steps I did to initiate my website.
The next step was to create a new project in GitLab. I named my project "sara_website" and I choose it to be public.
Then I linked my account in GitLab with my computer by writing the following Git commands in Gitbash. The commands include my username and email that I used to sign up in GitLab.
After that, I generated the SSH key by typing the following command.
ssh-keygen -t rsa -b 4096 -C "email@example.com"
Now the SSH key is downloaded as a file in my computer. I opened the file and copied the key. Then I went to my project in GitLab >> setting >> SSH keys >> add key and I paste the key there.
The SSH key of my account is generated as shown in the following picture.
The next step is to clone my website to my computer. This step stablished by copying the URL (clone with SSH) from the project page as shown in the following picture.
After that, I opened Gitbash in the desktop and I wrote git clone and paste the URL (clone with SSH) that I copied before a while.
git clone firstname.lastname@example.org:Sara_Alhadhrami/sara_website.git
Now the website is cloned to my computer as a folder. This folder includes everything related to my website and all updates will be done in this folder.
To add any file to GitLab from the computer, few steps are needed :
First, the file could be created inside the folder that is connected with GitLab. For example, I created a powerpoint file and I name it prelab. Then, three commands should be written in Gitbash to upload the file to GitLab.
After writting the command "git add ." I usually use the command "git status" to ensure that all the updates were added.
The following picture shows the steps I did.
The first step I did was to download a website theme. I downloaded a theme from Start Booststrap.
Then, I copied the downloaded files of the website theme and I paste them in my folder (sara_website). In addition to push the file to GitLab by using the three commands (git add, git commit and git push).
Here is my website link
To modify and do some changes on the website, I downloaded Brackets software which allows me to use the HTML language to modify my website.
The final step is to open the HTML index file with Brackets and then press the Live preview button to see how the changes I did will look like in my website.
Here I changed the name and email.
After I do any changes in my website I should always go to my website folder and open Gitbash to write the following commands to upload all the changes and update my website.
|git pull||To download content from the repository in GitLab to my PC|
|git add .||To add all the changes I did in my website folder to Gitlab|
|git status||To check that all the updates were added|
|git commit -m “any message”||To write a comment regarding the changes I did in my website|
|git push||To upload all the changes to Gitlab|
MkDocs is a software that allows us to use a language that is much easier than HTML for documintation which called Markdown.
To check that the version is downloaded
Then check pip version
After that, install MkDocs
Now, check the downloaded MkDocs version and instal the MkDocs material
All the material of MkDocs is now installed and I can use the command "mkdocs serve" to copy the link of my website and paste it in chrome to open it. Also I can edit my website by going to Atom and open the .md file. After saving the file, all the changes will appear directly in the website.
To be honest, markdown is much easier that HTML. But I used HTML in creating and modifying my website because I get used to it quickly.
Later on, I downloaded a new theme for my website and I deleted the previous one by deleting all the files that are related to the theme and I paste the file of the new theme. And finally I went to Gitbash and wrote the commands:
The first step to join the fab academy cloud is to follow the instructions I received through an email from fab academy IT. I signed in and reset my password then I copied the SSH URL to clone the git folder to my PC.
Also I changed the background image again to put something I like.
I deleted the original background image from git folder and I put another image.
My new website link after joining Fab Cloud