1. Project management¶
The objectives of this week are: 1- to build a personal site describing me and the final project 2- Upload the site to the class archive 3- Working through a Git tutorial
Setting up Git Bash¶
What is Git Bash? Git Bash is an application for Microsoft Windows environments which provides an emulation layer for a Git command line experience. It allows you to communicate with Git, the version control system.
The First step is to set GitLab using our personal GitLab account
We have to go to the FabLabs account section
We log in using the FabLabs account
We built the site using a ready template from MKdocs that was provided to us after getting access to the project. These are the steps followed to create the site
Firstly go to build >> Pipelines
Click Run
Click it again and wait for it to go through
Starting to code¶
To be able to edit the file first we should access the code therefore we should go in docs
The next step is to choose one of the locations of the website in this example choosing "about"
Going into index we can review how the page looks
In blue you can see the option to edit the page
Selecting to edit a single file you can access the markdown format file and you can edit it
Some of the used Markdown syntax code
to be able to upload pictures onto the website we have to upload them to Git Lab first and to do that we have to follow these steps:
first you have to go to the docs file and go to the images file (having them in this file is not really necessary)
To keep everything organized every week's pictures are in a separate folder
The next step is to upload the pictures you need onto the website clicking on the plus button at the top
After uploading the pictures onto the website now you need to refer to it in the code so you can actually see it in your own website.
there are two options when putting the picture in the website the first option is to use the MarkDown language to define the picture which could be done like this:
Where you place the exclamation mark and the square brackets and finally the normal brackets. The exclamation mark is what makes it a picture instead of just a link and what you write in the bracket is alternative text if the picture has an error and what is in the bracket is the location of the file in the files and it is the same way as defining the location of a picture in the HTML language.
The second method to use is to use the HTML complete syntax which would look like this:
<img src=../../images/week01/example.png alt="testing">
Both of those have the same function as that the MarkDown language is integrated from HTML and using HTML would give off the same function. Though, since MarkDown is very simplified it has less options when it comes to formatting so using HTML would give you more options as centering text and changing the size of it as well as using CSS in the commands.
After getting used to the editing of the website with Markdown The next step is to copy the code documents to have a local copy on our own devices for easier accessability and faster editing using Visual Studio Code
Firstly we have to clone the code using the HTTPS link from the GitLab site
To place the code folder in the a specific location on our device first we need to go to the location desired and right click >> show more options >> open Git Bash here
Then paste the copied link of the code clone after using (git clone) command
After cloning the code file and downloading Visual Studio Code we open the code folder through VS Code
Inserting the code folder in VS Code
Now we have all the code folders ready locally on our personal devices
Since we have access to the folders we can change the code without the need to go on the GitLab site but to save the changes there is a few steps to be taken
Firstly: we have to save any changes made to the code (Ctrl+S) and doing so will show a notification
*Note*:Same thing applies to when we add a new picture to the folder or even swapping a picture
After saving you have to add a comment to showcase the changes that you made
Finally to finalize the changes the syncing process must be done
Syncing the changes would show the change in the GitLab history allowing the reversing of any change to previous files
Website Design and Format¶
To be able to change the some certain aspects of the website you can adjust the MKdocs file code
Some changes have been made to the design of the site by adjusting the code in the MKdocs file
