Skip to content

Week 1 - Project Management

This Week’s Accomplishments:

Website Development:

  • Built a personal site describing myself and my final project.

  • Uploaded the site to the class archive.

  • Worked through a Git tutorial.

  • Learned about Visual Studio Code (VSC), Git Lab, Git Bash, and Markdown.

Introduction

This week, we focused on becoming comfortable with editing our website and uploading those changes to the class archive. These skills will be essential throughout the course, as we’ll need to update our site weekly until the course concludes.

To document my work at Fab Lab, I’ll utilize this website. The Fab Academy provided us with a template ready to use, written in Markdown, which is a language that simplifies documentation by allowing us to focus on content without the added complexity of HTML elsewhere.

1. Let’s Dig Into Basics First

1.1 What are MkDocs and MarkDown?

MkDocs is a static site generator designed specifically for building project documentation. It takes your documentation source files, which are written in Markdown, and turns them into a beautiful, user-friendly website. While Markdown, a lightweight markup language for creating formatted text using a plain-text editor.

1.2 What is Git?

Git is a free and open-source version control system for software development. It helps manage different versions of code within a repository (repo). To install Git, you can download it from the official website here

Git Bash is a command-line interface that combines the functionality of Git (the version control system) with Bash (a command interpreter and a programming language). It provides a user-friendly way to interact with Git repositories, perform version control tasks, and navigate the file system. Essentially, it allows you to communicate with Git using written commands in a familiar terminal environment on Windows.

1.3 Creating a personal site (Portfolio)

1.First I created a fablabs.io account here: https://www.fablabs.io/signup

2.Then I linked my fablabs.io account to our gitlab cloud by going to this page and selecting “sign in with Fablabs” button to authorize the connection:

3.Once I was able to access gitlab cloud, I sat a new password within gitlab.

4.After creating an account and logging in to Gitlab, I proceeded to build the website by going to the build tab, selecting pipelines and pressing the run pipeline button.

1.4 Cloning my Website in Visual Studio Code

5.Because my laptop runs windows, I downloaded and installed git bash via this link: https://git-scm.com/downloads. Running all the default settings. If you are using MacOS or Linux, you can ignore this step.

6.I will be using this Git Bash app to clone my files to my personal laptop instead of uploading them to the cloud every time. I started by creating a folder on my desktop called VisualStudioCode, then I right clicked on it and chose “Open Git Bash Here”:

7.A black screen popped up in which I’ll be using to write down my commands for launching my website.

8.First, clone the code URL from Gitlab and use the command git clone URL to clone the repository.

9.Then, clone the code URL from Gitlab and use the command git clone URL to clone the repository.

Here are the GitBash commands I’ll be using:

10.”Git clone” https://gitlab.fabcloud.org/fablabBH/asterisk/2024/SARA.HAMZA.git

11.”Cd Sara.Hamza”

12.”git config –global user.email Sara.Naerat@gmail.com“

13.”git config –global user.name “Sara Hamza””

14.After the cloning process was over, a local copy of the website was created on my computer.

1.5 Opening the Local Repository in VS Code

While I can edit website code directly on GitLab, I find it more efficient to work on a local repository copy and then push and sync changes to GitLab. This method allows me to add images and files faster than uploading them individually to the GitLab website. To edit the local copy, I use Microsoft Visual Studio Code (VS Code). This software simplifies the coding process by combining the ease of a source code editor with powerful developer tools like IntelliSense code completion and debugging. Additionally, it supports extensions that can further assist in coding.

15.After installing VS Code on my computer, I go to the File tab and select “Open File” to open the local copy of my repository for editing. You can download it here.

16.I then downloaded two extension by going to the extensions tab and writing the name of the extensions I want to edit:

  • Markdown Preview Enhanced: This extension allows you to create a preview of your Markdown code by pressing Ctrl+Shift+V. It’s handy for visualizing how your Markdown will appear when rendered.

  • Code Spell Checker: As the name suggests, this extension helps you spell-check the text within your code. It ensures that your code comments and variable names are free from spelling errors.

2. Editing the Website

To edit the website colors, font and icons, I went to the mkdocs.yml file and starting changing the existing codes into my liking.

To save your commands and push them to your website, press ‘CTRL + S’ to save, then go to the source control and commit your command message then sync your changes as below:

2.1 Fonts

For fonts, I went to Google Fonts and scrolled through the available fonts to use and copied down the name of the font on the mcdocs.yml page.

font:
    text: nunito regular 400
    code: ubunto mono

2.2 Colors

To change the colors of my website, I used Materials for MKDocs. The website has a selection of colors and accents to choose from and shows real time changes on their website. It even has a dark mode option which you can get by adding the scheme option.

theme:
  palette:
    scheme: slate

2.3 Website Icons

To change my website icon which is called a ‘favicon’, I downloaded simple png icons and converted them into a .svg format using this free online converter in order for the software to recognize it. You can also use the website Font Awesome. This website has a large selection of different icons that can be used as favicon icons.

I downloaded the images below and used them to give my website a nice touch.

When you have your icon ready in .svg, simply change the existing code to your image name then save your edits.

  logo: images/pink-heart.svg
  favicon: images/super-mario.svg

2.4 Headings

For headings, add a #. ##. or ### brfore a title while making sure you leave a space between the word and the hashtag. 

# heading 1
## heading 2
### heading 3

3. Uploading Media

3.1 Images

To upload images, you can either upload it after cloning or by simply going on the website version, I clicked on the location of the image and pressed the + button, selected upload file and dragged the photo to upload it. I used html code so that I can center the image in the website:

Use this format: ![image comment](image location)

To center your image:
<div align="center">
<img src=../../images/week01/image.png>
</div>

Then to place the image where I wanted it to be, I opened VS Code and embedded the location of my image like below:

3.2 Videos and GIFs

Now to upload videos, you can either upload it directly like an image where it (but it has to be less than 500 KB in size which is difficult in a form of a video), or by uploading it to an outer server like Youtube or a Vimeo. Or by converting it into a .GIF format and uploading it on Giphy.com then following the same embedded link steps as I demonstrated on Vimeo below.

Markdown doesn’t natively support video embedding, but you can use HTML within your Markdown file like the code example I wrote below.

< video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  video example
</video>

3.3 Embedding Websites

To link a website, use the format below like the image format but without adding the ‘!’ mark.

[text you want to display](website link)
To center your link: <center> embedded link </center>

4. Troubleshooting

During my process, I faced an issue while uploading my images because they exceeded the allowed size on Markdown which is around 500 KB. And I had this image show up while trying to save my work:

To solve it, I deleted my large sized images and re-uploaded them after using an image compressing website to get a smaller sized pictures by using their image compressor service.

Then I did the steps below to unstage my recent changes and re-upload my new images.

My Week in a Summary

This week, I delved into website development by exploring and using various tools to build a personal site. This hands-on experience allowed me to understand the intricacies of web design and development. Additionally, I identified and utilized version control protocols, specifically working through a Git tutorial. This helped me grasp the importance of version control in managing and tracking changes to my projects efficiently. Overall, these activities significantly enhanced my technical skills and understanding of both web development and version control systems.

Last update: September 17, 2024