Skip to content

1. Project management

Documenting the Journey: Building My Website with GitLab

This week, I dedicated my time to working on my personal website, leveraging the power of GitLab to streamline the development process. By carefully documenting each step I took, I have ensured that the journey of creating my online presence is meticulously recorded for future reference and collaboration. As I continue to refine and expand my website, I remain committed to maintaining a comprehensive documentation trail. This level of detail will not only benefit my own understanding and progress but will also serve as a valuable resource for anyone interested in replicating or building upon my work. By adopting this disciplined approach to website development, I am not only honing my technical skills but also cultivating a culture of continuous learning and improvement. Each step I take, each challenge I overcome, and each lesson I learn, will be meticulously recorded, ensuring that my website project becomes a testament to my growth.


What is Gitlab?

“GitLab is a platform that offers remote access to Git-based code repositories. Beyond just hosting source code, the service provides a suite of additional features to help streamline the entire software development process. These supplementary capabilities include tools for collaborative code sharing, issue tracking, knowledge management through wikis, and other functionalities to facilitate the social aspects of software development.”

What is Markdown?

“Markdown is a simple markup language used to format text in a way that describes its visual appearance on a web page. Similar to HTML, Markdown provides a concise syntax for defining elements like headings, text formatting, links, lists, and other common content structures. The key benefit of Markdown is that it allows writers and developers to focus on the content itself, rather than the complex HTML tags required to style that content. This makes Markdown a lightweight and user-friendly way to create formatted documents for the web.”

What is MkDocs?

MkDocs is a Python-based, open-source tool designed specifically for creating documentation websites. As a static site generator, MkDocs simplifies the process of building and publishing polished documentation online. The platform offers a wide selection of customizable themes, allowing documentation authors to easily design an appealing and professional-looking site without needing extensive web development expertise. With strong community support, MkDocs provides an efficient and user-friendly way for teams to build and host high-quality documentation on the web.”



This week tasks:

  1. Building a personal site describing you and your final project.
  2. Upload it to the class archive.
  3. Work through a git tutorial.


In order to accomplish these tasks, we used these softwares:

a. Git Bash.
b. Visual Studio code.



My website

Website Setup

  • Creating A fablab account and editing the personal site since it is already made using GitLab cloud which works using MarkDownd Language.

My website



I started exploring and made changes in the website, Such as changing and adding words & adding images.



  • Creating a local copy in my computer by:
  • a. cloning with HTTPS USING Gitbash with the git clone command.

    b. Signing in to my Gitlab account.

    My website


    My website


  • Checking if the cloning and the local copy working well by:
  • Step 1: Downloading & Opening the file in the Visual Studio.

    My website
    Step 2: Making changes in the local copy.

    My website


    Step 3: Saving the changes.

    Step 4: Commit the changes from the sidebar tools, with typing a brief message about the changes done so it would be easier to track the changes.

    My website

    Step 5: Pushing the changes to Gitlab.


    My website



  • Customizing the website


  • a. Colors: By using the already available colors, or by uploading custom colors using .css file color



    b. fonts: By using Google Fonts

    color
    c. Logo + Icon: By using the already available icons or by uploading yours. color


  • Uploading images:

  • it can be done in two ways:

    a. Draging images to the local copy.

    color

    b. Upload in the site: 1. Go to docs file:

    color

    1. Select (images):

    color

    1. Tap the + sign, then select (upload file):

    color

    1. Choose the file you want and upload it:

    color

  • To attach the image to the page you want use the following format:

  • color


    Last update: July 4, 2024