Skip to content

2. Project management

This weeks assignment was to
- Build a personal site describing you and your final project
- Upload it to the class archive
- Work through a git tutorial

Setting up Git

Based on Wednesday lecture I started to learn Git by reading Chapter 2 Git Basics in the Git tutorial and practicing the commands in Codecademy lesson “Learn Git”. I learned the basic workflow of Git and the main commads that are needed, e.g. git status, git add and git commit and Git team work commands, e.g. git clone, git pull, git push.
On Friday Ivan presented us basics of Git and showed how to create SSH key.

First thing to do was to login to my account in GitLab Fabcloud. After that I opened Git Bash and gave the command ssh-keygen -t rsa -C "marjo.leinonen@oulu.fi" -b 4096 to generate a pair of public/private key. Using the SSH protocol, you can connect and authenticate to remote servers and services. With SSH keys, you can connect to GitHub without supplying your username or password at each visit.

Then I opened the Public key (id_rsa.pub) with a text editor and copied its content in my GitLab Fabacademy profile -> settings -> ssh keys.

Next I cloned the repo in the remote repository to create a local version using command git clone git@gitlab.fabcloud.org:academany/fabacademy/2019/labs/oulu/students/marjo-leinonen.git

I am using the default setup provided by the fabacademy, which uses mkdocs as static file generator. I fetched and downloaded content from a remote repository with command: git pull origin master. Then I opened mkdocs.yml in my repo using Notepad++ and updated my personal info.

Git Status -command shows the list the files you have changed and those you still need to add or commit.

I saved my local repo changes with git add --all and did a commit, which takes the files as they are in the staging area and stores that snapshot permanently to my Git repository with
git commit -m “message”. Finally I used git push origin master to move updates from local repo to remote repo. After pushing the first time, the website is published in the server. The server has the .gitlab-ci.yml that is the configuration file that is used to do the deployment.

Personal web pages

The site is built in Gitlab with MKdocs that is a Python static site generator. Documentation files are written in Markdown and configured with yaml configuration file.

Originally I was planning to use Bootstrapious Creative-portfolio template and I actually started working with that. I modified the template pages with Notepad++ and html and I learned a lot about html. But then I saw the fabcloud template for this year and I decided to change using that.

I started my personal site creation by opening docs/about/index.md file in my repo and edited it with my personal information, including my picture. I also changed the theme color to red in mkdocs.yml -file.

The layout of the web page is coming from fabcloud template where the main menu is up-left and it has four main chapters: Home, About, Assignments and Projects. Assignments have sub-chapters for each weeks assignments. For example this week04 assignment is located in marjo-leinonen/docs/assignments/week04.md in the local repo. I removed “Sample-Project” file (shown with name “Another project” in the web page) under the Projects because at the moment the Final Project is my only project. Each page has their Table of Contents on the right side. It is build on the basis of ## Header you have in the page text.

I installed FastStone Photo Resizer to compress the pictures to be included in my repo. FastStone is easy to use, you just choose the files to be compressed and define the output folder, then press Convert-button.

I also copied and signed the student agreement in About -page.

Next I started to update week01.md and week02.md pages to document the assignments. I am using GitLab editor for the text changes and the pictures I am adding via file explorer directly in my local repository.

After adding a new pictures, I am doing git pull, git add, git commit and git push commands to make changes effective in the web site.

Problems

When modifying MKdocs.yml I changed along my personal information site_dir: _site to site_dir: _oulu. I was not supposed to. My web page was not published on the server and I had to change site_dir back to original. After that it worked.

FastStone Photo Resizer is not always compressing enough pictures to be under 100 kB. In addition I am using Paint to resize pictures to fit to the needed size.