Skip to content

1. Project management

This week I learned how to use Git to setup and work on my website

Day 1

How to build a website & access the URL

A website template is given on Gitlab, by signing in to it I clicked on the project listed under -your projects- and then I got a view on all of the files. In order to find the URL, on the side bar I clicked on Deploy > Pages > Access Pages 1. 2. 3.

By clicking on the URL, I got a view on how my website looks like

Any changes I do to the website will be demonstrated in the pipeline tab which I can find it in Build options, new versions of changes will always be on top and the old ones will be down, the dates are also shown to tell when did the change happen. 1. 2. 3.

To edit anything in the website - adding/removing - texts and images I went to the project landing page > docs > about > index.md, until this step I will be able to review everything i have done to the website. 1. 2. 3. 4.

To start editing I found an option called Edit on the top bar > Edit single file, I started editing the texts and then clicked on Commit changes 1. 2. 3.

Adding images to the website or changing them requires the images to exist in the folder I am using. For example; if I am adding some screenshots of the first week’s tasks, then they should be in week01 folder. To add these screenshots in week01 folder I went to docs > images > week01 I will find all of the existed images here, to add one or more pictures I click on “+” > upload file 1. 2. 3. 4. 5. 6. 7.

The form of adding an image while editing is: , putting the name of the image in the place of the dots will make it show on the website after clicking on commit changes. 1. 2. 3. 4.

Day 2

On this day I have learned editing the website locally using Git, I had to install VS code to be able to edit my website locally -without using internet-

To link the Repository to my machine, I have to copy the link to my repository, make a new folder in my machine and then right click and choose “Git Bash Here” which will open the terminal, and then paste the link in the terminal and press enter. 1. 2. 3. 4. 5.

After signing in to Gitlab, the files will be linked to the folder I created locally. I can edit the files locally and the commit any changes that will be reflected in GitLab

To prepare the VS code environment I go to File menu > open folder > “choose my folder”

In this step, I can edit the file locally and commit changes to my repository 1. 2.

I can go to the pipelines tab in Gitlab and see my updates/commits along with my comments and the specific additions/ changes I made in the file.

Customizing the website

We can edit the colors and fonts by editing the “mkdocs.yml” file that is linked to my website. You can visit this site to learn how to do so. For instance; I have changed the color of the website’s background to deep orange

You can make other changes such as font type, size and color etc.


Last update: July 18, 2024