Project Management

How to create first GitLab repository from scratch

In this week, I created my first GitLab repository and explored Git, Html, Markdown, Hugo, Bootstrap, ImageMagick and FFmpeg. The text editor I chose is Visual Studio Code because I have used it for quite a long time.

The first thing I did is to make my terminal fancy. I installed iTerm2 and Oh My Zsh and powerline font. Here is a screenshot of what it looks now:

(Play around with “ls”)

ls

To insert code snippets with nice format, I used syntax highlighting in Hugo. Please find it in the section below.

Syntax Highlighting in Hugo

Hugo has built-in code highligher - Chroma. To use it, I include following line in config.toml:

pygmentsStyle = "monokai"

“monokai” is one of the styles Chroma has. There are other Chroma Styles.

Check out Hugo tutorial here.

Git

Here is a good reference material - Git book

Install Git via Homebrew

brew install git

Open the terminal and go to that directory

cd /Users/dinan/Documents/AALTO/20p3/fab/demo

Initialize a repository

git init

Config name and email

git config --global user.name "Dinan Yan"
git config --global user.email "dinanyan@example.com"

Check current status of repository

git status

Sync the change

git add .

Commit and add message

git commit -m "Initial version"

Show changes

git diff

Check the history

git log

Push to GitLab

git push

Set up GitLab

Generate SSH

ssh-keygen -t ed25519 -C "Demo Key"

Show SSH

cat id_ed25519.pub

Add that SSH key on User Settings page

Create a blank project and copy paste the code snippet on gitlab to initialize

Create README.md

touch README.md

Add gitlab-ci.yml from dropdown on repository page

Markdown

Markdown guide

ImageMagick

ImageMagick is a command-line tool for image conversion and processing

Following are a few useful command:

Display image info

identify "portrait.jpg"

Resize

convert -resize 1280x720 "portrait.jpg" "portrait.jpg_resize.jpg"
convert -resize 1280x720 -quality 65 "portrait.jpg" "portrait_resized_65.jpg"

FFmpeg

FFmpeg is a collection of libraries and tools to process multimedia content such as audio, video, subtitles and related metadata.

Display video info

ffmpeg -i "ex.mp4"

Resize and cut the video

ffmpeg -i "ex.mp4" -ss 4 -t 5 -vf scale=1280x720 "ex_resize.mp4"

Hugo

Hugo is an open-source static site generator. Shortcodes in Hugo are quite handy. They are simple snippets inside content files calling built-in or custom templates.

Shortcode example <video>

To use it, first create a folder under layouts called “shortcodes”. Create video.html file.

<video controls muted = "true" autoplay = "true" loop = "true" width="500">
    <source src = "{{ .Inner}}" 
            type = "video/mp4">
    Sorry, your browser doesn't support embeded videos.
</video>

Then go to markdown file where you want to insert the video

{{\<video>\}}ex.mp4{{\</video >\}}

Bootstrap

Bootstrap is used to design and customize responsive mobile-first sites.

Quickstart: copy paste boostrap.min.css file into static/assets/css and boostrap.min.js file into static/assets/js