Skip to content

2. Project management

Note

First time I got to know the Git in 2020 during in my Fab Academy studies.

After first session on 29.1.2020 I struggled project management at the weekend. After workful weekend I succeeded to used the Git that I released my first Fab Academy pages.

Although I managed to use the Git to release my sites, I was completely confused like Neil foretold and full of questions about the Git.

Now in January 2022, I made restart to report my assignment of project management

Research

Website

Webpage are commonly wrote in HTML code. HTML means Hyper Text Markup Language. You can write very simple webpage on your computer using simple text editor such as Notepad and save file as html file (use .html file name extension). In figure 1. you can see very simple webpage HTML code on Notepad and on a web browser. A web browser generate completed webpage from HTML code file. Now this simple webpage is only for your eyes on your computer. If you want that other people can see it, you must make Web publishing.

It is possible write webpage HTML codes using Notepad, but it is not very effective way to do that.

HTMLsite01

Figure 1. Webpage HTML code on Notepad and Webpage HTML code on Web Browser

HTML code

https://www.w3schools.com/html/default.asp

Webpage consist of HTML code such as declaration, tags and attributes.

A Webpage HTML structure. Let’s see in figure 1 codes.

  • <!DOCTYPE html> declaration, not tag. It is an information to the browser that file is HTML document
  • <html> ... </html> are tags
  • <head> ... </head>
  • <body> ... </body>

Rest of tags in a file are

  • <title> ... </title>
  • <h1> ... </h1>
  • <p> ... </p>
  • <em> ... </em>

Attributes are

  • <img src=" Specifies the path to the image " alt=""Specifies an alternate text for the image, if the image for some reason cannot be displayed" height="Specifies the height of an image" width="Specifies the width of an image"
  • <a href="Specifies the URL of the page the link goes to">"Page name"</a>

HTMLsite01

Figure 2. HTML Skeleton in webpage file

Web publishing

Nowadays published website consist of many different component files such as

Web publishing is the process of publishing original content on the Internet. A publisher requires three things to publish content on the Internet:

  • Website development software
  • Internet connection
  • A web server to host the website

Web publishing process

  1. Design your webpage / website and write code

  2. Send webpage (/website components) to a web server

  3. A Web server publish your webpage on Internet

  4. Now Webpage is ready to Webpage visitors

InternetConnection01

Website development

There are several website development softwares. Non-commercial and Commercial softwares. If you want to make webpage without you write HTML codes, you can use a WYSIWYG (What-You-See-Is-What-You-Get) editor. Shortly, you can just drag and drop objects to the page position.

Other way to make webpage is to write page using lightweight markup language such as Markdown. Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

​

Markdown

It is easy to write Markdown code using Notepad. You just save file as .md file name extension. Then you have to convert Markdown file to HTML file. You can write Markdown code by What-You-See-Is-What-You-Mean editors. One is Typora.

Markdown01

How Typora typing looks like

https://markdown-it.github.io/

Markdown01

Internet connection

There are may protocols and rules how to transfer data in Internet such as HTTP. Nowadays it is very important note security. HTTPS and SSH are security protocols.

A web server to host the website

The term web server can refer to hardware or software, or both of them working together. https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server

  1. On the hardware side, a web server is a computer that stores web server software and a website’s component files. (for example, HTML documents, images, CSS stylesheets, and JavaScript files) A web server connects to the Internet and supports physical data interchange with other devices connected to the web.
  2. On the software side, a web server includes several parts that control how web users access hosted files. At a minimum, this is an HTTP server. An HTTP server is software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view webpages). An HTTP server can be accessed through the domain names of the websites it stores, and it delivers the content of these hosted websites to the end user’s device.

In Fab Academy we using GitLab to host our webpages

GitLab-Webservice-01

Git and GitLab

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

GitLab is a Git-based fully integrated platform for software development. The one of the possible functionality provided by Gitlab is deploy a web server with the content of the repository.

To transfer webpages (/website components) to GitLab, it is necessary to install local Git to personal computer.

Installing local Git (on Windows)

Git Bash is one Git client version on Windows. Git Bash include Git and Bash. Bash is a Unix command-line shell. On Windows you use Bash to type commands on Bash Command Prompt.

https://www.stanleyulili.com/git/how-to-install-git-bash-on-windows/

  1. Download Git Bash
  2. Install Git Bash on your computer
  3. Open Git Bash Command Prompt
  4. Define your name to Git by typing command git config --global user.name "your_username" on Command Prompt
  5. Define your email address Git by typing command git config --global user.email "your_email_address@example.com" on Command Prompt.
  6. You can check your data by typing command git config --global --list on Command Prompt.

GitLab-Webservice-01

After Git has instaled. There are tree different spaces such as Working Directory, Staging Area and Local Repo. The Working Directory is place where are your webpages files (/website components). Now Local Git and GitLab have to connected together.

GitLab-Webservice-01

Connect local Git to GitLab

It is necessary to use a secured connection such as SSH.

  1. Generate SSH keys by typing command ssh-keygen -t rsa -C "<comment>" -b 4096 on Command Prompt.
  2. Then Git ask you give passphrase. It is not necessary to give that.
  3. Now Git generate public and private keys. Note that you don’t ever give your private key out.
  4. Open public key file from .SSH directory using some text editor such as Notepad.
  5. Copy generated key from file
  6. Log in GitLab Fabcloud with account.
  7. Past public key to GitLab on User Settings >SSH Keys

SSH01

Markdown in GitLab

Getting a Git Repository

There are two ways of getting started with GitLab Pages:

  1. Clone an existing Git repository from GitLab
  2. Take a local directory that is currently not under version control, and turn it into a Git repository

In Fab Academy we Clone an exiting Fab Academy Git repository from GitLab. Before Cloning we have to copy exiting Fab Academy template in GitLab to our own project. In Git Cloning means duplicating a remote repository. So we clone Fab Academy template to our project by using git clone url command to Clone an exiting Fab Academy Git repository to local Git as shown in the picture below

  1. Push Clone button to open Pop up Menu
  2. Copy Remote repository SSH address (URL) from Pop up Menu git@gitlab.fabcloud.org:academany/fabacademy/2020/labs/oulu/students/"name".git
  3. Type Command git clone and past copied url git@gitlab.fabcloud.org:academany/fabacademy/2020/labs/oulu/students/"name".git on Command Prompt such as git clone git@gitlab.fabcloud.org:academany/fabacademy/2020/labs/oulu/students/"name".git
  4. Type command git pull origin master on Command Prompt to copy data.
  5. Now In local repository ( local Git) and remote repository (GitLab ) are same data.

Now it possible to start custom Fab Academy website template first and then update website files.

GitLab01

RemoteRepoClone-01

After installing Git Bash and cloning material from GitLab you can see your work directory structure. There are

LocalReppo-RemoteRepo-01

GitLab CI/CD and .gitlab-ci.yml file

GitLab CI/CD can automatically build, test, deploy, and monitor applications. Ci/Cd or CICD is the combined practices of continuous integration (CI) and (more often) continuous delivery or (less often) continuous deployment (CD) CI/CD. In the .gitlab-ci.yml file file, you can define:

  • The scripts you want to run.
  • Other configuration files and templates you want to include.
  • Dependencies and caches.
  • The commands you want to run in sequence and those you want to run in parallel.
  • The location to deploy your application to.
  • Whether you want to run the scripts automatically or trigger any of them manually.

.gitlab-ci.yml

Customizing Fab Academy website template

First you have to Custom mkdocs.yml file to change least site_name and site_author.

mkdocs.yml01

Webpage updating

Using Markdown, you edit Markdown webpages files (.md) in Working Directory. My first webpage was Home page. The Markdown code of that page as shown in the picture below

# Home

## Welcome to Hannu Liedes's Fab Academy site

**The aim of these pages is documents my [Fab Academy](https://fabacademy.org/) assignments fulfilling process in spring 2020.** 

I am fulfilling my [Fab Academy](https://fabacademy.org/) studies in [Fab Lab Oulu](https://www.oulu.fi/fablab/). I am very lucky because it take only 3 minutes to walk to [Fab Lab Oulu](https://www.oulu.fi/fablab/) from my office.

![](images/1 MainSite/MainSite-FabLabOulu-Outside-01.jpg)



[Fab Lab Oulu on Google maps](https://goo.gl/maps/GRSzgivsxqUAqhDdA)





https://fabacademy.org/

http://fabacademy.org/2020/

Then you send you updated files (.md) to remote repository (GitLab ).

  1. Open Git Bash Command Prompt
  2. Add all files to Staging Area (Index) by typing command git add --all on Command Prompt
  3. Add all files to local repository by typing command git commmit -m " comment" on Command Prompt
  4. Send all files to remote repository by typing command git push --all on Command Prompt

In GitLab publish webpages by converting Markdown webpages files (.md) to HTML files (.html). The converting prosess could be static or dynamic. A static prosess means that generator generate same webpages to everyone website visitors. A dynamic prosess means that generator generate every time new website version to everyone Website visitor. In Fab Academy Converting prosess is static and thus we need a static site generator such as MkDocs. In mkdocs.yml file you can change site looks to update theme data. I used material theme.

After converting your webpage are ready to Webpage visitors. You can monitor webpage updating process in your GitLab.

RemoteRepoClone-02

Monitoring webpage updating process

After files sending to remote repository you can monitor process in GitLab CI/CD / Pipelines directory. First new pushing got status Running and after converting is complete status Passed. Examples of Push as shown in the pictures below

Push271 Commands on Command Prompt

Monitoring Status of push on Pipelines

Building a personal site

To build my personal site, I follow Fab Academy introduction. I generated my site by using MkDocs. The Configuratin file mkdocs are wrote YAMAL language. I edit my site by using first TYPORA, but later I changed to Notepad and Notepad++.

Configuration in mkdocs.yml

I just updated

  • site_name: Hannu Liedes
  • site_author: Hannu Liedes

I did not update other thinks such as colors in theme/palette:

  • primary: “deep”
  • accent: “indigo”

Pictures

I tried to limit a size of pictures in webpage. I resize and crop pictures by using Paint.

The first release of site

The first I updated front page (docs/ index.md file), personal introcution ( docs/about/index.md), agreement(docs/about/ agreement.md) assignment 1 (docs/assignment/ week01.md) and assignment 2 (docs/assignment/ week02.md). After updating I sent documents to Remote Repo by using commands

git add --all

git commmit -m "1 push"

git push --all

My Work flow to publish my first webpage

So, what happend at the weekend 31.1. - 2.2.2020? As I told at the beginning I was totally confused.

Step 1. I registered to https://fablabs.io/ and I got account.

Step 2. I Installed Git Bash to my Windows laptop.

Step 3. I defined my name and email address to local Git

Step 4. I generate SHH keys (public and private) on Git Bash Command Prompt

Step 5. I copied public key to GitLab

Step 6. I conneted GitLab and local Git

Step 7. I forked Fab Academy template to my project in GitLab

Step 8. I cloned data from GitLab to local Git

Step 9. I customed mkdocs.yml file. I changed site_name and site_author.

Step 10. I updated Markdown files with Typora

Step 11. I send website documents to GitLab (remo repo).

That was my work

mkdocs.yml01

Typora-01

Reflection

First time I got to know the Git in 2020 during in my Fab Academy studies.

After first session on 29.1.2020 I struggled project management at the weekend. After workful weekend I succeeded to used the Git that I released my first Fab Academy pages.

Although I managed to use the Git to release my sites, I was completely confused like Neil foretold and full of questions about the Git.

In January 2022, I made restart to report my assignment of project management

As I told, I practised with Git first time in 2020. Now in February 2022 I have learned lot of Git. I understand much more how to use Git system, but other hand I know how much

Pipeline failed

In October 2022 , I tried update my site but I got error in pipeline failed. Local instructor, Ivan Sanchez, helped me to solve problem. I had to update mkdocs.yml file. I removed lines from extra/social/ 

    - type: "github"
      link: "https://github.com/academany"
    - type: "twitter"
      link: "https://twitter.com/fabacademany"
    - type: "linkedin"
      link: "https://linkedin.com/in/academany"
    - type: "instagram"
      link: "https://instagram.com/fabacademany"

and added lines

   - icon: fontawesome/brands/github-alt
      link: https://github.com/squidfunk

After that site updating working very well

Broken pipe

In November 2022, I pushed too large video file (over 10 Mt) to Remote Repo. That was mistake. After that pipe was broke. 

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git add --all

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git commit -m "433 push"
[master 8f9ae77] 433 push
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 docs/videos/Embedded/Embedded-Hero-Video.m4v

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git push --all
Enumerating objects: 15, done.
Counting objects: 100% (15/15), done.
Delta compression using up to 4 threads
Compressing objects: 100% (9/9), done.
remote: fatal: pack exceeds maximum allowed size
fatal: sha1 file '<stdout>' write error: Broken pipe
error: remote unpack failed: unpack-objects abnormal exit
To gitlab.fabcloud.org:academany/fabacademy/2020/labs/oulu/students/Hannu-Liedes.git
 ! [remote rejected] master -> master (unpacker error)
error: failed to push some refs to 'git@gitlab.fabcloud.org:academany/fabacademy/2020/labs/oulu/students/Hannu-Liedes.git'

Again local instructor, Ivan Sanchez, helped me again to solve problem. It is necessary to check git status and took git log.

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git status
On branch master
Your branch is ahead of 'origin/master' by 3 commits.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git log --oneline --graph --decorate
* 42793f2 (HEAD -> master) 435 push
* df5e48a 434 push
* 8f9ae77 433 push
* b66bb83 (origin/master, origin/HEAD) 432 push
* de0055e 431 push
* d3bf1f7 430 push
* ffe8510 429 push
* cfefd18 428 push
* 4bb58d2 427 push
* f8f902d 426 push
* 7a4b3f2 425 push
* bf78391 424 push
* f24d778 423 push
* 600e509 421 push
* 14c4f06 420 push
* c5ebf19 419 push
* c2c8d88 418 push
* b9616df 417 push
* 067e3dd 416 push
* 4630422 415 push
* 63a8d96 414 push
* e584fc0 413 push
* 1257f39 412 push

Then it was necessary to reset work b66bb83 (origin/master, origin/HEAD) and check gitstatus again.

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git reset b66bb
Unstaged changes after reset:
M       docs/assignments/week09.md
M       docs/assignments/week09.md.bak


Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   docs/assignments/week09.md
        modified:   docs/assignments/week09.md.bak

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        docs/videos/Embedded/

no changes added to commit (use "git add" and/or "git commit -a")

Then week09.md had to added again 

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git add docs/assignments/week09.md

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   docs/assignments/week09.md

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   docs/assignments/week09.md.bak

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        docs/videos/Embedded/


Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git commit -m "week 9"
[master 3f2f76e] week 9
 1 file changed, 5 insertions(+)

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git push origin master
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 4 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 464 bytes | 232.00 KiB/s, done.
Total 5 (delta 4), reused 0 (delta 0)
To gitlab.fabcloud.org:academany/fabacademy/2020/labs/oulu/students/Hannu-Liedes.git
   b66bb83..3f2f76e  master -> master

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   docs/assignments/week09.md.bak

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        docs/videos/Embedded/

no changes added to commit (use "git add" and/or "git commit -a")

Hannu@DESKTOP-M2S5GVQ MINGW64 ~/FabAcademy/Hannu-Liedes/Hannu-Liedes (master)
$

After all that git worked very well.

My final project

The main idea of my final project is fabricate a demonstration device for teaching the strenght of materials and end especially cantilever beam elasticity phenomena. Additionally teach how to measure strain and stress by using the Strain gauges sensor.

Personally, I want to also learn how to fabricate devices for teaching and researching.

Final Project Idea