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”)
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
-
# h1
h1
-
## h2
h2
-
###### h6
h6
-
[GitLab](http://gitlab.com)
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