Skip to content

2. Project management

Customizing the site

Using MKdocs.yml file , I could change the page tab’s title, in addition to the ability of changing fonts and colors ..etc. but I left it as default . for further information on how to edit the site colors and fonts and other staff please click on material for MKdocs .

Downloading and uploading the site

it is easier to code and work on the local server or local browser for your code instead of uploading several times to the internet . so we need the atom software to use it as text editor . you can download it from here

and for uploading and downloading issue git software can solve this issue by cloning the site from online repository on gitlab cloud . following the steps below :

installing git software

1.Go to git website and click on the operating system you have on your computer .

2.once the download is complete , double click on the Git icon and follow guide dialog box .

download your repository folders and files on your computer

1.Go to your repository on gitlab

2.Go to Repository then choose files

3.Copy the “Clone with HTTPS” there is a link , copy it to use it later . this will copy the files on your repository to your computer.

4.On your computer choose a folder you want to download your repository in or create new one .

5.Right click inside this folder and choose Git Bash Here .

6.the terminal will open, then you have to make the configuration for the first time and for one time also :) in this step you will use the following command :

git config user name

git config user email

git clone “paste the link you have already copied here”

in parallel with git we will use atom for editing content of any page you want to . just open the page you want to edit by open it with atom . now do whatever you want on your page and do not forget to save your code always. if you want to preview your code and see how it will appear on live site press on CTRL+ALT+M.

Now return to git terminal and use the following commands:

git status to show any changes to the files .

git add filename.extension to add a specific file to the repository

git commit -m “any message” to confirm and commit the changes and comment this change with message.

git push to upload files to the online repository .

7.Now go to the pipelines under the CI/CD on your gitlab site . from here you can watch the status of your uploading file.

Now you may wonder How I added my images to my webpage :

simply , I saved the image I want to upload to my webpage in images folder

then I write the following in atom software as ( I opened the page I want to upload my image to) :

! [ ] ( .. /images / image_name.image_extension )

then save the changes by pressing “ctrl+s” :

now , using git bash , upload the chenges to the repository

$git add ../images/git_pipeline.png

$git commit -m “ading image”

$git push

8.now preview your site and see the changes happened

How to set up SSH keys with GitLab, how we generate them on our computer and how we add the public key to our GitLab account.

  • Firstly , press “window key + R”
  • type “cmd”
  • the terminal will be opened
  • then type “SSH-Keygen” then hit enter
  • press enter keys
  • then press enter
  • now the ssh-keygen is generated

  • go to the folder where is the key is located
  • there are two files : “id_rsa” and “id_rsa.pub” that are located in .ssh folder
  • open the file “id_rsa.pub” with notepad then copy the text .

Now we move to our gitlab account ->sign in-> enter your username and password –>on the left there is “ssh key” title –>press on it then paste the text you copied before. and change the title if you want then press on “add key” the following will appear.

Push to the repository using password-less SSH connection:

  1. go to your repository link on gitlab

  2. then click on clone , then copy the link under “Clone with SSH” :

  1. open git bash

  1. enter this command ssh clone [the link you copied] then hit enter

the cloning is starting , when it asks you “Are you sure you want to continue connecting” type yes

5.Now try to push :

The push is done successfully.

## Useful Links

Problems and how to solve it

  • Problem 1: when I used git push , the terminal send dialogue box asks me to enter credentials information (user name and password),I entered them but nothing works. Solution :so I changed my gitlab password .

  • Problem 2: the broken images (that can’t be displayed on web page ) solution : make sure that you write the correct path in image code and be sure that you use the right extension for the image added.

Last update: July 11, 2022