2. Project management (Jan 30)¶

This week I worked on creating my website and pushing it to the online repository for publishing on the web. We are using a version control system for keeping track of changes in the source code. This workflow is also handy for collaborations among people for large scale software development. The online repository is developed in Gitlab. I would like to let you know that I am familiar with Linux command line but not an expert. I have also very briefly used Git before so its not totally new for me. Using Git to create a website is something which I haven’t done before. I am outlining the steps followed for this week’s assignment. I kept in mind the instructions for the assessment of this week’s assignment.

Set up Git¶

I followed the instructions on the Git simple cheat sheet. I have a laptop running Windows 10 so I installed Gitbash. On the Gitbash command line, I entered the following commands to provide my user name and email id.

git config --global user.name "Jay Dhariwal"

git config --global user.email "jaydhariwal@gmail.com"

I generated ssh key so that I don’t have to enter my login information everytime I push as well as encrypting the data being transferred.

ssh-keygen -t rsa -C "$jaydhariwal@gmail.com"

View ssh key using

cat ~/.ssh/id_rsa.pub

I copied the ssh key using the clip command.

clip < ~/.ssh/id_rsa.pub

Add the ssh key to the web version. There is also a video on how to do it.

Clone repo locally¶

Use pwd command on bash terminal to know the present working directory. Find a folder under this tree to clone the git repo locally. Navigate to the path of this folder by using

cd 'absolute path'

Then I cloned the repository locally using

git clone https://gitlab.fabcloud.org/academany/fabacademy/2019/labs/akgec/students/jay-dhariwal.git

Upload repo online¶

Before using the git commands, please remember to change the folder to the root folder.

The git commands that I have mainly used to upload my repo online are

git add .

git commit -m 'comment for what is done with this push'

git push

“add” adds the files to the staging area, “commit” commits the changes and “push” pushes them to the master branch of the remote repo.

Choice of web development tools¶

I have a fair idea of using html and have created this website using Dreamweaver and editing html directly. But since we were given a ready made template using markdown and the static site generator mkdocs so I wanted to give it a try. I would be editing the different .md files and add more .md files if needed. This way I can focus on content for now (Fiore confirmed this way of thinking in the recitation on Jan 28) and higher priority things such as detailing my project and modify my website later on, if I wanted to. The text editor that I am using for editing my .md files is Sublime.

Setting up mkdocs¶

I followed this tutorial to set up mkdocs. I didn’t have python and pip installed which are needed to install mkdocs so as per the advice in this tutorial, I installed python and pip for windows using this link. Please remember to check the box when installing python for windows.

I then installed mkdocs and its user manual using the same Gitbash terminal with

pip install mkdocs
python --version
pip --version
mkdocs --version
pip install click-man
click-man --target path/to/man/pages mkdocs

Before being able to use mkdocs, I also had to install the material theme as per the [advice] (https://github.com/squidfunk/mkdocs-material/issues/52 ) which was not present and gave an error to me.

pip install mkdocs-material

Launch test server locally¶

Please return to mkdocs tutorial on FabAcademy website and follow along. I didn’t create a new mkdocs folder as we already had a template created by Fiore. The test server can be run by first navigating to the folder where the Git folder has been created. The command is

mkdocs serve

The website changes can be seen locally by typing http://localhost:8000 on your browser. This is amazing as we can validate if our modifications to the website work or not imediately before pushing to our repo online and then waiting for a minute for them to be visible.

If one wants to come back to the terminal prompt from the test server, then the command to be used on this bash screen is Ctrl+C.

Commands used in mkdocs¶

Since I had never used markdown before so I browsed through this Markdown cheatsheet. It would also be handy to browse through the template files such as week01.md, etc. to know the different methods used to paste images, videos, etc. with markdown. Some of the commands that I used with markdown are mentioned below.

For headers

# H1
## H2

For emphasis, bold

**bold**

For hyperlinks

[advice] (https://github.com/squidfunk/mkdocs-material/issues/52)

For images

![](../images/week02/screenshot_local host.jpg)

For code blocks

back ticks to start  ```

code block in here

back ticks to end  ```

For embedding youtube videos

<iframe width="560" height="315" src="https://www.youtube.com/embed/sZwOZqKoKoM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Problems faced¶

The mkdocs build did fail at times for me and I received an email for it. But I didn’t find time to understand how to debug the source of the problem using what the pipeline shows. It is on my wishlist.

The way I fixed the errors was to try to send the update little by little and observing if it got accepted or not and it worked for me for now.

Video compression for website¶

We were suggested about video compression using ffmpeg by Neil.

After downloading ffmpeg windows build, please watch this video for installing ffmpeg in windows.

For video compression using ffmpeg, I followed advice from this fab lab student. The command that I used to reduce the video size was

ffmpeg -i jay-riding-bike.mov -b:v 512k jay-bike-riding512.mp4

I still need to find out how to embed a local video in my repo. For now, I am uploading the video on my youtube channel and embedding this youtube video using markdown.

Notes¶

These notes were taken during the review for the previous week and lecture for this week (23 Jan). Neil asked the students about their projects during the review. Neil suggested that it would be good to be able to use the assignments to build the project. But some projects only happen at the every end and that is also alright.

These are the notes taken during Neil’s lecture. They are only for my reference and others can ignore this part of my webpage.

Templates used by Fab Academy are based on CI and YAML.

WebRTC for open source video

OBS studio for broadcasting

SimpleScreenRecorder to record.

Supply side time mgmt. is better than demand side time mgmt.

Spiral development is to improve incrementally such that you complete the loop everytime.

Make the project modular.

Document as you work.

Using Git, edit website on the server or locally.

Imagemagick to compress pictures in a folder all together.

Video compression ffmpeg.

Instead of mailing list, use issue trackers.

Notes from Recitation on Git (Jan 28).

Instructor is fiore.basil@gmail.com

Html5up templates

Git LFS for large files

Neil talked about trans code videos to have them few MBs.

Sites can be different too. Not just the template fiore gave.

Gitbook?

Git Origin master?

Github account

“Your name.fabcloud.io/project”

Wishlist¶

Understand how to use the pipeline error to debug the code.
I would like to use git to manage my own website.
Video compression with ffmpeg
Understand Git better.
Go through Fiore’s recitations from 2018.

Solar powered electric bike con kit by Jay Dhariwal is licensed under a Creative Commons Attribution 4.0 International License