1. Project management

Project management is the key to create something with proper manner and organizing the progress and cooperative teams. Working with team members, even by yourself, without proper version control and file management, the project becomes just mess… without control, eventually waste time, or even loose your project success. How to control the files, versions, revisions,,, Git is good system creating repository (the place to store files) in your local computer but also on common place on the server sharing/synchronizing to team and public.

Version control and Gitlab

Tutorial link
Version Control - Fab Academy 1st Feb 2021

1.5hours long tutorial of lecture, this video covers
- Fab Cloud setup
- Gitlab page how to use
- Fab Academy global structure
- Set up Git environment on your PC
- How Gitlab works
- How to care master, branch versions
- How CI/CD pipeline run

1. How Gitlab works

My local PC environment is Windows10, I needed to install Git-bash app first.
Git apps
And open Git bash which looks very linux based command prompts. And same command of linux (showing the files of directory is “ls”, not “dir”)

1. SSH key generation

At first what need is creating SSH key connecting the local PC into the Gitlab server.

ssh-keygen

The ssh public/private files are created under C:\Users(username).ssh Copy id_rsa.pub file content, into Gitlab Account -> Settings -> SSH keys
(note) don’t copy the same name of without .pub file, this is private SSH key identifying the local user. If other people know this, they can connect instead of you.

Then my local PC can connect to Gitlab through SSH connection.

2. GIT workflow

clone - pull – add – commit – push
is the Git workflow basic. Clone is copy the whole image of Git repository to local repository, it needs to do for the first time download, but not necessary later instead you can pull the differences between the repositories.

At very first, I did clone from remote repository (Gitlab) to my local scratch repository (my PC). I got the clone URL from Gitlab website, it was on the front page shows “clone” button, click and choose SSH side info.

On the local PC Git-bash, move to folder where you want to create the repository, and command

git clone (copied text URL of clone above)

Then clone was made, copied all Gitlab files into my PC repository.

Once clone is done, later Pull command is enough to get the difference from remote repository.

git pull  

After some modification of local files, let’s sync with remote repository. Check what was the difference from last Pull, you can check by

git status  

This command can use any time to check the state of the different files: no changed, modified or in stage area ready to be committed. IN addition, it provides information on the current branch and if it is synchronized with remote server.

git add -all  

git add marks as file to be tracked and to be included in the following commit. There are two ways for add, “add .” means all file of new files and files already tracked in current directory (including sub directories), modified and deleted files are not added. You can also use “–all” and this includes new files, modified and remove files from index that are no longer in the working tree.

After add the files, you need commit with comments. Comments are also important that you can check by yourself later with good reminder but also other team members can see what was the difference to communicate.

git commit -m "(comment is here)"  

git commit stores files in the stage area to the local repository, and the option of “-m” gives putting comment in history for easier tracking. After commit, finally you need push to remote server to upload and sync all files which committed.

git push origin master  

Then now all the files are updated on remote repository on the gitlab.

After pushed the files to Gitlab, the gitlab-ci.yml file is called automatically, which contains the CI/CD configuration.

In the .gitlab-ci.yml 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.

2. Building a personal site

I used MkDocs to build my site. It is a tool to build static websited from input files generally written in raw text or lightweight markup languages such as markdown. Documentation source files are written in Markdown, and configured with a YAML configuration file.
I tried React, Javascript library. But the installation and development need generate dynamic code, proper gitlab-ci.yml setting for DevOps of Fab Cloud. So simply I chose Mkdocs and this is the first time to use Mkdocs, good opportunity.

1. MKdocs installation to windows PC

First install Python by downloading an installer

Then open command prompt,

pip install mkdocs

And first run the server

mkdocs serve

failed… need plugin as shown

pip install mkdocs-git-revision-date-localized-plugin

2. Run the local server

Go to the folder located the local Mkdocs files which clone/pulled from Gitlab, then command

mkdocs server

Check by browser with putting “127.0.0.1:8000”.
Yeah! run, and this is the first template view from my local PC.

3. My website yml settings

I’m using visual studio code of Microsoft, this is good to see the preview almost real time on the editor.

At first I modified Mkdocs.yml which is the configuration site for mkdocs static site.

As highlighted, I changed the site related information, theme, color set and font.

Change the color theme now my website is being created.

I tried other theme of MKdocs, bootstrap but the original FabCloud files are not fit with this. Also tried theme of Readthedocs but finally I liked the original material theme, so I continue this with my own modification from now on!

4. How to edit and upload the files

I modified front page (/docs/index.md) and about page index.md files (/docs/about/index) and weekly assignments (weekXX.md in /docs/assignments/). For weekly assignments, in order to distinguish the up coming weeks assignment, I created a new folder of /backlog and put all future assignment files.

memo, reflections

Learned how to use Gitlab with practical operations. I learned a bit before, so it was no difficulty for Gitlab but Mkdocs is the first time. Actually I used Markdown language already before with just direct modifying the Gitlab documents. Now I have good knowledge with Mkdocs which is good tool that can run the server locally as well. Tricky failure of MKdocs is file name. When I made a image filename as “*.PNG” with capital letters file extension (not .png). Then Markdown script is written small capitals .png even the image file name with .PNG, Visual studio code can show the image correctly in preview but the image is crashed in the server FabCloud. Need to check the extension, and also modification of extension from capital to small (.PNG to .png) this cannot update on Git.

---

Last update: June 19, 2021