From daaad546bbcb15d2452ce6b60318ef46186f4d6d Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 30 Sep 2019 20:38:58 +0800
Subject: [PATCH] Import the tutorial.

---
 _posts/2019-08-08-text-and-typography.md   | 157 +++++++++++++++++++++
 _posts/2019-08-08-write-a-new-post.md      | 108 ++++++++++++++
 _posts/2019-08-09-getting-started.md       |  95 +++++++++++++
 _posts/2019-08-11-customize-the-favicon.md |  28 ++++
 4 files changed, 388 insertions(+)
 create mode 100644 _posts/2019-08-08-text-and-typography.md
 create mode 100644 _posts/2019-08-08-write-a-new-post.md
 create mode 100644 _posts/2019-08-09-getting-started.md
 create mode 100644 _posts/2019-08-11-customize-the-favicon.md

diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
new file mode 100644
index 0000000..21e59b8
--- /dev/null
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -0,0 +1,157 @@
+---
+title: "Text and Typography"
+date: 2019-08-08 11:33:00 +0800
+categories: [Blogging, Demo]
+tags: [typography]
+---
+
+This Jekyll template totally compatible with Markdown syntax. Now, let's take a look for the text and typography in this theme.
+
+## Titles
+
+***
+# H1
+
+<h2 data-toc-skip>H2</h2>
+
+<h3 data-toc-skip>H3</h3>
+
+#### H4
+
+***
+
+## Paragraph
+
+I wandered lonely as a cloud
+
+That floats on high o'er vales and hills,
+
+When all at once I saw a crowd,
+
+A host, of golden daffodils;
+
+Beside the lake, beneath the trees,
+
+Fluttering and dancing in the breeze.
+
+## Block Quote
+
+> This line to shows the Block Quote.
+
+## Tables
+
+|Company|Contact|Country|
+|:---|:--|---:|
+|Alfreds Futterkiste | Maria Anders | Germany
+|Island Trading | Helen Bennett | UK
+|Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy
+
+## Link
+
+[http://127.0.0.1:4000](http://127.0.0.1:4000)
+
+
+## Footnote
+
+Click the hook will locate the footnote[^footnote].
+
+
+## Image
+
+![Desktop View](/assets/img/sample/mockup.png)
+
+
+## Inline code
+
+This is an example of `Inline Code`.
+
+
+## Code Snippet
+
+### Common
+
+```
+This is a common code snippet, without syntax highlight and line number.
+```
+
+### Specific Languages
+
+#### Console
+
+```console
+$ date
+Sun Nov  3 15:11:12 CST 2019
+```
+
+
+#### Terminal
+
+```terminal
+$ env |grep SHELL
+SHELL=/usr/local/bin/bash
+PYENV_SHELL=bash
+```
+
+#### Ruby
+
+```ruby
+def sum_eq_n?(arr, n)
+  return true if arr.empty? && n == 0
+  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
+end
+```
+
+#### Shell
+
+```shell
+if [ $? -ne 0 ]; then
+    echo "The command was not successful.";
+    #do the needful / exit
+fi;
+```
+
+#### Liquid
+
+{% raw %}
+```liquid
+{% if product.title contains 'Pack' %}
+  This product's title contains the word Pack.
+{% endif %}
+```
+{% endraw %}
+
+#### HTML
+
+```html
+<div class="sidenav">
+  <a href="#contact">Contact</a>
+  <button class="dropdown-btn">Dropdown
+    <i class="fa fa-caret-down"></i>
+  </button>
+  <div class="dropdown-container">
+    <a href="#">Link 1</a>
+    <a href="#">Link 2</a>
+    <a href="#">Link 3</a>
+  </div>
+  <a href="#contact">Search</a>
+</div>
+```
+
+**Horizontal Scrolling**
+
+```html
+<div class="panel-group">
+  <div class="panel panel-default">
+    <div class="panel-heading" id="{{ category_name }}">
+      <i class="far fa-folder"></i>
+      <p>This is a very long long long long long long long long long long long long long long long long long long long long long line.</p>
+      </a>
+    </div>
+  </div>
+</div>
+```
+
+
+## Reverse Footnote
+
+[^footnote]: The footnote source.
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
new file mode 100644
index 0000000..c717482
--- /dev/null
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -0,0 +1,108 @@
+---
+title: "Write a new Post"
+date: 2019-08-08 14:10:00 +0800
+categories: [Blogging, Tutorial]
+tags: [writting]
+---
+
+## Naming and Path
+
+Create a new file name with the format `YYYY-MM-DD-title.md` then put it into `_post` of the root directory.
+
+## Front Matter
+
+Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-matter/) as below at the top of the post:
+
+```yaml
+---
+title: TITLE
+date: YYYY-MM-DD HH:MM:SS +/-TTTT
+categories: [TOP_CATEGORIE, SUB_CATEGORIE]
+tags: [TAG]
+---
+```
+
+> **Note**: The posts' ***layout*** has been set to `post` by default, so there is no need to add the variable ***layout*** in Front Matter block.
+
+### Categories and Tags
+
+The pages for all the categories and tags are placed in the `categoreis` and `tags` respectively.
+
+Let's say there is a post with title `The Beautify Rose`, it's Front Matter as follow:
+
+```yaml
+---
+title: "The Beautify Rose"
+categories: [Plant]
+tags: [flower]
+---
+```
+
+> **Note**: `categories` is designed to contain up to two elements.
+
+
+## Table of Contents
+
+By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml` and set the variable `toc` to `false`. If you want to turn off TOC for specific post, add the following to post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
+
+```yaml
+---
+toc: false
+---
+```
+
+
+## Comments
+
+Similar to TOC, the [Disqus](https://disqus.com/) comments is loaded by default in each post, and the global switch is defined by variable `comments` in file `_config.yml` . If you want to close the comment for specific post, add the following to the **Front Matter** of the post:
+
+```yaml
+---
+comments: false
+---
+```
+
+
+## Code Block
+
+Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
+
+```
+This is a common code snippet, without syntax highlight and line number.
+```
+
+## Specific Language
+
+Using <code class="highlighter-rouge">```Language</code> you will get code snippets with line Numbers and syntax highlight.
+
+> **Note**: The Jekyll style `{% raw %}{%{% endraw %} highlight LANGUAGE {% raw %}%}{% endraw %}` or `{% raw %}{%{% endraw %} highlight LANGUAGE linenos {% raw %}%}{% endraw %}` are not allowed to be used in this theme !
+
+```yaml
+# Yaml code snippet
+items:
+    - part_no:   A4786
+      descrip:   Water Bucket (Filled)
+      price:     1.47
+      quantity:  4
+```
+
+#### Liquid codes
+
+If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
+
+{% raw %}
+```liquid
+{% if product.title contains 'Pack' %}
+  This product's title contains the word Pack.
+{% endif %}
+```
+{% endraw %}
+
+## Learn More
+For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
+
+## See Also
+
+* [Getting Started]({{ site.baseurl }}/posts/getting-started/)
+* [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)
+* [Customize the Favicon]({{ site.baseurl }}/posts/customize-the-favicon/)
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
new file mode 100644
index 0000000..de14932
--- /dev/null
+++ b/_posts/2019-08-09-getting-started.md
@@ -0,0 +1,95 @@
+---
+title: Getting Started
+date: 2019-08-09 20:55:00 +0800
+categories: [Blogging, Tutorial]
+tags: [usage]
+---
+
+
+## Basic Environment
+
+First of all, follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/)  to complete the basic environment (Ruby, RubyGem, Bundler and Jekyll)  installation.
+
+In addition, the [python](https://www.python.org/downloads/) and [ruamel.yaml](https://pypi.org/project/ruamel.yaml/) are also required.
+
+## Configuration
+
+Customize the variables in file `_config.yml` as needed.
+
+## Atom Feed
+
+The Atom feed url of your site will be:
+
+```
+<site_url>/feed.xml
+```
+
+The `site_url` was defined by variable **url** in `_config.yml`.
+
+## Install Jekyll Plugins
+
+In the root direcoty of the project, run the following command:
+
+```terminal
+$ bundle install
+```
+
+`bundle` will install all dependent Jekyll Plugins declared in `Gemfile` that stored in the root automatically.
+
+##  Run Locally
+
+You may want to preview the site before publishing. Run the script in the root directory:
+
+```terminal
+$ bash run.sh
+```
+>**Note**: Because the *Recent Update* required the latest git-log date of posts, make sure the changes of `_posts` have been committed before running this command.
+
+Open the brower and visit [http://127.0.0.1:4000](http://127.0.0.1:4000)
+
+##  Deploying to GitHub Pages
+
+### Option 1: Build locally
+
+For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts will not work. If you want to use any another third-party Jekyll plugins, **your have to build locally rather than on GitHub Pages**.
+
+**1**. On GitHub website, create a new blank repository named `<username>.github.io`.
+
+**2**. Build your site by:
+
+```console
+$ bash build.sh -d /path/to/<username>.github.io/
+```
+
+The build results will be stored in the root directory of `<username>.github.io` and don't forget to push the changes of `<username>.github.io` to branch `master` on GitHub.
+
+**3**. Go to GitHub website and enable GitHub Pages service for the new repository `<username>.github.io`.
+
+**4**. Visit `https://<username>.github.io` and enjoy.
+
+
+### Option 2: Build by GitHub Pages
+
+By deploying your site in this way, you can push the source code to GitHub repository directly.
+
+> **Note**: If you want to add any third-party Jekyll plugins or custom scripts to your project, please refer to [*Option 1: Build locally*](#option-1-build-locally).
+
+**1**. Rename your repository as `<username>.github.io`.
+
+**2**. Commit the changes of your repository before running the initialization script:
+
+```console
+$ bash init.sh
+```
+
+It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
+
+**3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repository `<username>.github.io`.
+
+**4**. Visit `https://<username>.github.io` and enjoy.
+
+## See Also
+
+* [Write a new post]({{ site.baseurl }}/posts/write-a-new-post/)
+* [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)
+* [Customize the Favicon]({{ site.baseurl }}/posts/customize-the-favicon/)
diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md
new file mode 100644
index 0000000..fc20760
--- /dev/null
+++ b/_posts/2019-08-11-customize-the-favicon.md
@@ -0,0 +1,28 @@
+---
+title: "Customize the Favicon"
+date: 2019-08-11 00:34:00 +0800
+categories: [Blogging, Tutorial]
+tags: [favicon]
+toc: false
+---
+
+The image files of [Favicons](https://www.favicon-generator.org/about/) are placed in `assets/img/favicons`. You may need to replace them with your own. So let's see how to customize these Favicons.
+
+Whit a square image (PNG, JPG or GIF) in hand, open the site [*Favicon & App Icon Generator*](https://www.favicon-generator.org/) and upload your original image.
+
+![upload-image]({{ site.baseurl }}/assets/img/sample/upload-image.png)
+
+Wait a moment for the website to generate icons of various sizes automatically.
+
+![download-icons]({{ site.baseurl }}/assets/img/sample/download-icons.png)
+
+Download the generated package and extract to override the files in directory `assets/img/favicons`.
+
+At last, rebuild the site so that the icon becomes your custom edition.
+
+## See Also
+
+* [Getting Started]({{ site.baseurl }}/posts/getting-started/)
+* [Write a new post]({{ site.baseurl }}/posts/write-a-new-post/)
+* [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)
+