2. Project management

This assignment is dedicated to how this website is built.

Assignment :

   work through a git tutorial
   build a personal site in the class archive describing you and your final project

MkDocs

First of all, the website was configured with mkdocs, so I wanted to see how mkdocs was working to create website. I followed the mkdocs tutorial on its website in order to create a local website.

Follows the step to create the previous website.

How mkdocs was installed locally :

$ python get-pip.py

  • install mkdocs

$ pip install mkdocs

$ mkdocs new my-project create a new website with default settings defined by Mkdocs.

Then I built differents settings to customize the website such as

site_name: MkLorum
nav:
    - Home: index.md
    - About: about.md

theme: readthedocs

There is the name of the website, then 2 pages, the index and the about page, and finally the theme of the website.

The mkdocs serve command built the website locally as soon as a modification in the file is saved.

FabAcademy website

To link the modification we make locally and the server that storage the website, we need a key.

I am currently using GitBash to upload the content of my website. I wrote these following steps in GitBash, first setting the users, then generate the key and copy the key.

git config --global user.name “myusername”
git config --global user.email “myemail”
ssh-keygen -t rsa -C "myemail"
cat ~/.ssh/id_rsa.pub
clip < ~/.ssh/id_rsa.pub

Then go in my GitLab profil settings, and add the SSH keygen copied.

To edit my content on my laptop, I cloned my personnal repository

git clone git@gitlab.fabcloud.org:academany/fabacademy/2021/labs/agrilab/students/elina-nguyen-cadoret.git

Everytime a modification is edit, I am using these commands on GitBash

Customization

After running the website preconfigured by gitlab, I made a list to add some settings on the website. I started with the navigation bar to add a dropdown menu. The theme used at the beggining of the building of the website is mkdocs-material. First I wanted to keep this theme with color changing. So I started to looking for a way that allows me to have dropdowns menus.

I checked how to do on the mkdocs website. To customize the theme I can add in mkdocs.yml file the custom_dir option with writing in a html file. So I started looking for the main.html file.

$ mkdocs build makes me collect all the html files from the website.

I had to install the missings plugins and themes with pip to get the files.

At that moment and with some help, i learnt with some help that we can customize directly the theme and dropdowns menus are included with some themes. So in the documentation of mkdocs I looked for themes that allows me to have the customization I want. I finally used bootswatch with this theme :

theme:
  name: darkly
  nav_style: dark

Don’t forget to had the download of the theme in the requirement.txt file.

I am using Sublime Text to edit the content. Sublime Text is a software that I already used to programm basics in C language, that’s why I am still using it. It is visually nice because there are colors depending on the language you use.

Add videos on the website

I wanted to add YouTube videos on my website, first I copied the Url like this :

https://www.youtube.com/watch?v=BvRXKXwWuKI

but it was not working.

So I checked on the help page to know what was going on, and after comparing the Url added previously by the web manager, there was the “embed” word added so I changed the Url and now it works.

https://www.youtube.com/embed/BvRXKXwWuKI

During the week 1, here is the line I wrote to add the video in my webpage.

<iframe width="560" height="315" src="https://www.youtube.com/embed/BvRXKXwWuKI" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>

Update:

I also reached to add videos directly on my website, you can learn more about it here during the week 9.

Debugging

After having the right theme is choose, there was some mistake in loading the web page. Everytime I actualized the page, the browser had showed a different page between these both :

In order to repare the problem, I tried many things

  • check the IC on GitLab, the pipelines passed but nothing visible changed
  • change the name of the bootswatch theme, nothing changed
  • google the problem, but it was hard for me to understand the answer so I kept trying to change a thing to see what changed on the web page
  • change other customize setting nav_style: dark the theme didn’t change but navigation did so I deduced that bootswatch was installed because the web page worked but not the library of the themes, it keep displays the default theme of bootswatch
  • check in Jobs in IC on GitLab if bootswatch was correctly download
  • add an other theme library in requirement.txt to check if get read it
  • put again other themes but not from bootswatch, that was working

Finally I couldn’t see where the problem was, I decided to recover an older mkdocs.yml file that worked before I add the bootswatch themes library.

Recover older file with GitLab

After web researches, this is what I have done to receover an older file. The tutorial of how to restore older with git on opensource.com was very helpfull.

$ git log --oneline show every commit that was made on the website

I located the commit where was the file I needed

$ git checkout 69747b12 . take all the files of the commit

$ git add .
$ git commit -m '...'
$ git push

push all the files from the the previous website.

And now that I recovered my older web site I did all the modifications again with adding bootswatch library and setting my theme and finally it worked.

Resize images

First, there are 2 main kind of image format for website, PNG images and JPG images. I downloaded an image with which I see my final project. So I took an image of panda plush and I resized and compressed it with differents softwares.

with Gimp

with Image Magick

with paint.net

We can resize the image when we save it and chose the format.

After tried these 3 softwares to make my images suitable for the web, I choose to use ImageMagick to resize images and Paint.net because the software are quick and easy to use and visually shows the changes of quality for paint.net.