Quang’s Tech Blog

Commands

2021-10-30T03:00:00+00:00

The TOML (Tom’s Obvious, Minimal Language) format,

We can build a project using cargo build.
We can build and run a project in one step using cargo run.
We can build a project without producing a binary to check for errors using cargo check.
Instead of saving the result of the build in the same directory as our code, Cargo stores it in the target/debug directory.
cargo build --release to compile it with optimizations.

Programming Concepts

2021-10-29T17:00:10+00:00

const vs let

const	let
only immutable	- immutable by default - mut mutable
always annotate the type
only assign a constant expression

Shadowing

We can shadow a variable by using the same variable’s name and repeating the use of the let keyword.

Integer types

Length	Signed	Unsigned
8-bit	`i8`	`u8`
16-bit	`i16`	`u16`
32-bit	`i32`	`u32`
64-bit	`i64`	`u64`
128-bit	`i128`	`u128`
arch	`isize`	`usize`

Signed numbers from -(2^n-1) to 2^n-1 - 1
Unsigned numbers from 0 to 2ⁿ - 1
The isize and usize types depend on the kind of computer your program is running on: 64 bits if you’re on a 64-bit architecture and 32 bits if you’re on a 32-bit architecture.

Integer Literals

Number literals	Example
Decimal	`98_222`
Hex	`0xff`
Octal	`0o77`
Binary	`0b1111_0000`
Byte (`u8` only)	`b'A'`

_ use as a visual separator.

Floating-Point Types

There are 2 types of floating-point types:

f32 type is a single-precision float.
f64 is default type that has double precision.

Compound Types

Compound types can group multiple values into one type. Rust has two primitive compound types:

tuple is a general way of grouping together a number of values with variety of types into one compound type. Tuples have a fixed length: once declared, they cannot grow or shrink in size.

fn main() {
    let tup: (i32, f64, u8) = (500, 6.4, 1);
    // let tup = (500, 6.4, 1);
    
    // access a tuple element directly
    println!("The value of tup0: {}, tup1: {}, tup2: {}", tup.0, tup.1 , tup.2);

    // destructuring
    let (x, y, z) = tup;
    println!("The value of x: {}, y: {}, z: {}", x, y , z);

}

array:
- Every element must have the same type.
- Fixed length.

fn main() {
    let a = [1, 2, 3, 4, 5];
    let b: [i32; 5] = [1, 2, 3, 4, 5];
    let c = [3; 5]; // = [3, 3, 3, 3, 3];
    let first = a[0];
    let second = a[1];
}

Link to Next/Previous post in a category

2021-09-25T17:00:00+00:00

When in a post, we usually need to go next/back to another post. So it would be great if our post has links to next/previous post.

Get the Next/Previous post link

Use the following code to get the next/previous post link then assign to next_post/prev_post.

    {% assign cat = page.category %}
    {% for post in site.categories[cat] %}
        {% if post.url == page.url %}
            {% assign post_index0 = forloop.index0 %}
            {% assign post_index1 = forloop.index %}
        {% endif %}
    {% endfor %}
    {% for post in site.categories[cat] %}
        {% if post_index0 == forloop.index %}
            {% assign next_post = post %}
        {% endif %}
        {% if post_index1 == forloop.index0 %}
            {% assign prev_post = post %}
        {% endif %}
    {% endfor %}

Display the Next/Previous post link

Use the following code to display the next/previous post.

    {% if prev_post %}
        <div class="article-previous">
            <a href="{{ prev_post.url }}">
                <span class="iconify-inline" data-icon="akar-icons:arrow-left"></span>
                &nbsp;&nbsp;&nbsp;&nbsp;{{ prev_post.title }}</a>
        </div>
    {% endif %}
    {% if next_post %}
        <div class="article-next">
            <a href="{{ next_post.url }}">
                {{ next_post.title }}&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="iconify-inline" data-icon="akar-icons:arrow-right"></span>
            </a>
        </div>
    {% endif %}

Add links to Post layout

Now I want to add the next/previous post link to the Post layout so that these links will display as default for all posts. So that we will override the Post layout.

Create a _layouts folder under docs folder.
Get the theme path, run bundle info --path followed by the name of the theme’s gem, e.g., bundle info --path minima for Jekyll’s default theme.

Browse to the theme path, you will see the following structure folders.

.
├── LICENSE.txt
├── README.md
├── _includes
│   ├── disqus_comments.html
│   ├── footer.html
│   ├── google-analytics.html
│   ├── head.html
│   ├── header.html
│   ├── icon-github.html
│   ├── icon-github.svg
│   ├── icon-twitter.html
│   └── icon-twitter.svg
├── _layouts
│   ├── default.html
│   ├── home.html
│   ├── page.html
│   └── post.html
├── _sass
│   ├── minima
│   │   ├── _base.scss
│   │   ├── _layout.scss
│   │   └── _syntax-highlighting.scss
│   └── minima.scss
└── assets
 └── main.scss

Copy the post.html to our _layouts folder.
Update the post.html file to display next/previous post link as the following:

---
layout: default
---

{% assign cat = page.category %}
{% for post in site.categories[cat] %}
    {% if post.url == page.url %}
        {% assign post_index0 = forloop.index0 %}
        {% assign post_index1 = forloop.index %}
    {% endif %}
{% endfor %}
{% for post in site.categories[cat] %}
    {% if post_index0 == forloop.index %}
        {% assign
next_post = post %}
    {% endif %}
    {% if post_index1 == forloop.index0 %}
        {% assign prev_post = post %}
    {% endif %}
{% endfor %}


<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
    <header class="post-header">
        <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
    </header>

    
    {% if prev_post %}
        <div class="article-previous">
            <a href="{{ prev_post.url }}">
                <span class="iconify-inline" data-icon="akar-icons:arrow-left"></span>
                &nbsp;&nbsp;&nbsp;&nbsp;{{ prev_post.title }}</a>
        </div>
    {% endif %}
    {% if next_post %}
        <div class="article-next">
            <a href="{{ next_post.url }}">
                {{ next_post.title }}&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="iconify-inline" data-icon="akar-icons:arrow-right"></span>
            </a>
        </div>
    {% endif %}
    
    <div class="post-content e-content" itemprop="articleBody">{{ content }}</div>

    
    {%- if site.disqus.shortname -%}
        {%- include disqus_comments.html -%}
    {%- endif -%}
    
    <a class="u-url" href="{{ page.url | relative_url }}"></a>
</article>


{% if prev_post %}
    <div class="article-previous">
        <a href="{{ prev_post.url }}">
            <span class="iconify-inline" data-icon="akar-icons:arrow-left"></span>
            &nbsp;&nbsp;&nbsp;&nbsp;{{ prev_post.title }}</a>
    </div>
{% endif %}
{% if next_post %}
    <div class="article-next">
        <a href="{{ next_post.url }}">
            {{ next_post.title }}&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="iconify-inline" data-icon="akar-icons:arrow-right"></span>
        </a>
    </div>
{% endif %}

Add style for next/previous post link

Create a _sass folder under docs folder.
Create a _pager.scss file under _sass folder with the following code: ```css .article-previous, .article-next { display: inline; a { text-decoration: none; } }

.article-next { float: right; }

3. Create `css` folder under `assets` folder.

4. Create `styles.scss` file under `css` folder with the following code:
```css
---
---

@import "pager";

Add the following code at the end of _config.yml file:
```
sass:
  sass_dir: _sass
```
Add the following code to default.html file: ```HTML

```

Finally we will get the result.

Reference

Overriding theme defaults

GitHub Actions

2021-09-24T17:00:00+00:00

When building a Jekyll site with GitHub Pages, the standard flow is restricted for security reasons and to make it simpler to get a site setup. For more control over the build and still host the site with GitHub Pages you can use GitHub Actions.

Jekyll version — Instead of using the currently enabled version at 3.9.0, you can use any version of Jekyll you want. For example 4.2.1, or point directly to the repository.

Setting up the ActionPermalink

GitHub Actions are registered for a repository by using a YAML file inside the directory path .github/workflows.

Create a workflow file, say github-pages.yml, using either the GitHub interface or by pushing a YAML file to the workflow directory path manually. The base contents are:

name: Build and deploy Jekyll site to GitHub Pages
on:
  push:
    branches:
      - master
jobs:
  github-pages:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2

    # Use GitHub Actions' cache to shorten build times and decrease load on servers
    - uses: actions/cache@v2
      with:
        path: vendor/bundle
        key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
        restore-keys: |
          ${{ runner.os }}-gems-

    # Specify the Jekyll source location as a parameter
    # Specify the target branch (optional)
    - uses: helaili/jekyll-action@v2
      with:
        token: $
        jekyll_src: 'docs'
        target_branch: 'gh-pages'

The above workflow can be explained as the following:

We trigger the build using on.push condition for master branch only - this prevents the Action from overwriting the gh-pages branch on any feature branch pushes.
The name of the job matches our YAML filename: github-pages.
The checkout action takes care of cloning your repository.
We specify our selected action and version number using helaili/jekyll-action@2.0.5. This handles the build and deploy.
- jekyll_src: The Jekyll website source directory.
- target_branch: The target branch name the sources get pushed to.

Build and Deploy

On pushing any local changes onto master, the action will be triggered and the build will start.

To watch the progress and see any build errors, check on the build status using one of the following approaches:

View by commit: Go to the repository level view in GitHub. Under the most recent commit (near the top) you’ll see a status symbol next to the commit message as a tick or X. Hover over it and click the details link.
Actions tab: Go to the repository’s Action tab. Click on the jekyll workflow tab.

Update GitHub Pages

Update Source folder to point to the root folder

Reference

Permalinks

2021-09-23T17:00:00+00:00

Permalinks are the output path for your pages, posts, or collections. They allow you to structure the directories of your source code different from the directories in your output.

Front Matter

The simplest way to set a permalink is using front matter. You set the permalink variable in front matter to the output path you’d like.

For example, you might have a page on your site located at /my_pages/about-me.html and you want the output url to be /about/. In front matter of the page you would set:

---
permalink: /about/
---

Global

Setting a permalink in front matter for every page on your site is no fun. Luckily, Jekyll lets you set the permalink structure globally in your _config.yml.

To set a global permalink, you use the permalink variable in _config.yml. You can use placeholders to your desired output. For example:

permalink: /:slugified_categories/:title

Placeholders

Here’s the full list of placeholders available: Placeholders

There is one placeholder that I prefer to use is slugified_categories.

The specified categories for this post but slugified. If a category is a composite of multiple words, Jekyll will downcase all alphabets and replace any non-alphanumeric character with a hyphen. (e.g. "Work 2 Progress" will be converted into "work-2-progress")

If a post has multiple categories, Jekyll will create a hierarchy (e.g. /work-2-progress/category2). Also Jekyll automatically parses out double slashes in the URLs, so if no categories are present, it will ignore this.

Problem

The slugified_categories is only supported by Jekyll version 4.1, but the GitHub Pages support Jekyll version 3.9.0.

We can solve this problem by using GitHub Actions

Reference

Permalinks

Creating Posts

2021-09-22T17:00:00+00:00

The Posts Folder

The _posts folder is where your blog posts live. You typically write posts in Markdown, HTML is also supported.

Creating Posts

To create a post, add a file to your _posts directory with the following format:

YEAR-MONTH-DAY-title.md

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and md is the file extension representing the format used in the file. For example, the following are examples of valid post filenames:

2021-09-25-installation-windows.md
2021-09-25-creating-posts.md

All blog post files must begin with front matter which is typically used to set a layout or other meta data. For a simple example this can just be empty:

---
layout: post
title:  "Welcome to Jekyll!"
---

# Welcome

**Hello world**, this is my first Jekyll blog post.

I hope you like it!

Custom

But I don’t want organize the categories above the _post, I want put all the categories under the _post folder. For example, if a post is at path _posts/GitHub Pages and Jekyll/2021-09-25-creating-posts.md. But in this case the Jekyll cannot find our posts, so that we need to add the category: "GitHub Pages and Jekyll" to the front matter. And we have the URL like github%20pages%20and%20jekyll/2021/09/25/installation-windows.html.

Reference

Posts

Creating a GitHub Pages site with Jekyll

2021-09-21T17:00:00+00:00

Creating your site

Clone the repository that you created before to your local machine.

Change directories to the repository.

$ cd REPOSITORY-NAME
# Changes the working directory

If you choose to publish your site from the gh-pages branch, create and checkout the gh-pages branch.

$ git checkout --orphan gh-pages
# Creates a new branch, with no history or contents, called gh-pages and switches to the gh-pages branch

Create a new Jekyll site at ./docs
```
jekyll new docs
```
Change into your new directory.
```
cd docs
```
Open the Gemfile, then add the following code to the end of the file.
```
gem "webrick", "~> 1.7"
```
Install the bundler gems.
```
gem install bundler
```
Build the site and make it available on a local server.
```
bundle exec jekyll serve
```
Browse to http://localhost:4000
Optionally, make any necessary edits to the _config.yml file.
```
title: Quang's Tech Blog
email: quang.sunlight@gmail.com
```

Add and commit your work.

git add .
git commit -m 'Initial GitHub pages site with Jekyll'

Push to GitHub.
```
git push -u origin gh-pages
```
On GitHub, navigate to your site’s repository.
Under your repository name, click Settings.
In the left sidebar, click Pages.
Under “GitHub Pages”, select gh-pages on Branch drop-down menu.
Select /docs folder for your publishing source.
Click Save.
To see your published site, under “GitHub Pages”, click your site’s URL.

Reference

Installation Jekyll on Windows

2021-09-20T17:00:00+00:00

About Jekyll

Jekyll is a static site generator with built-in support for GitHub Pages and a simplified build process. Jekyll takes Markdown and HTML files and creates a complete static website based on your choice of layouts. Jekyll supports Markdown and Liquid, a templating language that loads dynamic content on your site.

Install Requirements

Use Chocolatey to install ruby and msys2
```
choco install ruby
choco install msys2
```
Open a new command prompt window from the start menu, so that changes to the PATH environment variable becomes effective.
Check your Ruby version using ruby -v. Ruby version 3.0 or higher.
Check you Gems version using gem -v
Install Jekyll and Bundler using gem install jekyll bundler
Check if Jekyll has been installed properly jekyll -v

Reference

GitHub Pages

2021-09-19T17:00:00+00:00

About GitHub Pages

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

You can host your site on GitHub’s github.io domain or your own custom domain. For more information, see Using a custom domain with GitHub Pages

Creating a repository for your site

In the upper-right corner of any page, use the menu, and select New repository.
Use the Owner drop-down menu, and select the account you want to own the repository.
Type a name for your repository and an optional description. If you’re creating a user or organization site, your repository must be named <user>.github.io or <organization>.github.io. If your user or organization name contains uppercase letters, you must lowercase the letters.
Choose a repository visibility.
Click Create repository.

Reference

About GitHub Pages

Quang’s Tech Blog

Commands

Programming Concepts

const vs let

Shadowing

Integer types

Integer Literals

Floating-Point Types

Compound Types

Link to Next/Previous post in a category

Get the Next/Previous post link

Display the Next/Previous post link

Add links to Post layout

Add style for next/previous post link

Reference

GitHub Actions

Setting up the ActionPermalink

Build and Deploy

Update GitHub Pages

Reference

Permalinks

Front Matter

Global

Placeholders

Problem

Reference

Creating Posts

The Posts Folder

Creating Posts

Categories

Custom

Reference

Creating a GitHub Pages site with Jekyll

Creating your site

Reference

Installation Jekyll on Windows

About Jekyll

Install Requirements

Reference

GitHub Pages

About GitHub Pages

Creating a repository for your site

Reference