1. Project management¶
This week we started to working on GitLab and we asked to edit and creat our own websit using GitLab.
What is Gitlab?¶
For major DevOps and DevSecOps projects, GitLab serves as an open source code repository and collaborative software development platform. GitLab is free to use for private use. GitLab provides a place for online code storage as well as tools for CI/CD and bug tracking.
What is MkDocs?¶
MkDocs is a fast, simple and downright gorgeous static site generator that’s geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file. Host anywhere
What is MarkDown language?¶
Markdown is a simple markup language that uses plain text formatting syntax. It is intended to be converted to structured HTML. It is frequently used to format readme files.Markdown languages were created in 2004 by John Gruber and Aaron Swartz. The goal of Markdown is to make it easy to read. With the Markdown language, you can easily read and write web-based documents. You’re “formatting” text when you add bold, italics, numbered lists, bullet points, headings, and so on. Markdown is a syntax (or set of rules) that is used to format text on web pages. It’s extension is .md.
How I get Started With GitLab?¶
I start with Gitlab Using Google Chorme, the frist step was to sing in using the Link.Sign in is required our user name and password(Note.we created a ID for fablab), after inserting my user name and password and clicking on sign in we enter in to the main interface where we can see our project
Sign in Interface.
Main Interface. - After inserting my user name and password and i logged in and i got a main interface where my projects were displayed I chose the project on which i wanted to start working. as we can see the main interface in picture shown below
First task (Editing about page)¶
I chose my project which were displayed on projects deshboard and then i chose the doc file and then about file and the index.md to edit my about page
After i entered into doc file the new window appeared showing more files. i chose About file as shown in picture below
Making Changes.¶
After opening about file i chose index.md which is located on the top. After opening the index.md file i got a option in the right on the top showing us Open in web IDE which will navigate into the code source where we can edit and make lot of changes like uploading pictures and adding paragraph etc…
The picture shown below is the area where i start editing my about page.
Process of uploading Images on Gitlab.¶
There is a process to upload images on Gitlab from our system so after that we can use them in our website. We chose the folder where we want to upload our images like folder Images -> 3 dots on the right -> chose Upload file. After chosing file we chose commit and the file will be upload taking 30 t0 40 seconds.
The Process is shown in pictures below.
Customization¶
To customize my website i chose mkdocks.yml file which is shown in picture below.
Changing Font Collor and Name.¶
Changing Font collor give our websit a very good and interactive look to change my website font collor i nevigated to Material for MkDocs Which supports Google’s original color palette and its a great starting point for making it look beautiful. To select colors i nevigated to Material for MkDocs to change the color in the setup to pick a colors for my website.
Setup Page¶
In this page i chose setup option (which is on the top) to try and select colors for my website
Primary color.¶
The primary color is for header and its utilized for a number of elements, including the sidebar, text links.
Accent color.¶
Accent color will make our hovered links, buttons and scrollbars interactive giving them different colors.
Applying Changes on my website.¶
From the default the primary and accent colors were set as indigo for my website so to apply changes i chose the primary color value to red and accent color to green.
Changing the name.¶
After navigating in to the mkdocs.yml i changed the site name value to my name as Sikander Muhammad. we can see in the picture shown below.
Changing the font.¶
To change the font of my website i went to Google Fonts to pick a font for my website. After exploring i chose Libre Baskerville fpr text font and Source Serif Pro for code.
HTML Tags.¶
-
Image tag I needed to adjust the size of my image, so I utilized an image tag. An image can be embedded in an HTML page using the element. The tag needs the following two attributes: When an image cannot be displayed for some reason, an alternative text is specified in the src and alt attributes. The image tag also allows for the specification of an image’s width and height.
-
I use the following html code to resize my image
<img src="../images/FK.jpeg" alt="Girl" width= "450" height="180">
Before.¶
After.¶
Aligning image to the center¶
- I use the following html code to bring my image to the center.
<p style="text-align: center"> <img src="../images/week01/Mymmgs.jpeg" alt="pic" width= "210" height="200"> </p>
Final Reasult¶
