Writing with Light Blog

In “Getting Started with Light Blog”, I have presented how to build a new blog with Light Blog. The next step is how to write a post for it.

Chose an Editor

The post in website based on Jekyll is typically written with Markdown, which is just a lightweight markup language with plain text formatting syntax. That means you can write it with any text editor like Notepad++, Sublime Text, and Atom, but I recommend Visual Studio Code (aka VS Code).

Extensions

The main reason I recommend VS Code is to have an active community that develops a number of extensions to extend its capabilities. Here are some extensions I used for Markdown.

Create a Post

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

YEAR-MONTH-DAY-name-of-post.md

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers. For example, the following are examples of valid post filenames:

2019-04-18-getting-started-with-light-blog.md
2019-07-19-writing-with-light-blog.md

All blog post files must begin with front matter which is typically used to set a layout or other metadata. So far the Light Blog supports title and tags variables, and only title is required for every post. For example, the post you are reading now is like this:

---
title: Writing with Light Blog
tags: [Jekyll, Markdown]
---

More content here.

Add More Content

After you create the post file, it’s time to add some content. Below is a simple list of Markdown syntax and extensions.

Block Elements

Headers

# H1

## H2

### H3

#### H4

##### H5

You may not use # H1 in your post, because the title variable in front matter is considered as H1 and showed on the top of the page.

Lists

Unordered
```
  - Red
  - Green
  - Blue
```
- Red
- Green
- Blue
Ordered
```
  1. Red
  1. Green
  1. Blue
```
1. Red
2. Green
3. Blue

Task

  - [x] Task 1
  - [ ] Task 2
  - [ ] Task 3

Task 1
Task 2
Task 3

Code Blocks

There are many different ways to style code blocks, you can indent with four spaces:

    if (2 > 1) {
        return true
    }

if (2 > 1) {
    return true
}

GitHub also supports something called code fencing, which allows for multiple lines without indentation, and if you’d like to use syntax highlighting, include the languages:

```java
if (2 > 1) {
    return true
}
```

if (2 > 1) {
    return true
}

We use Linguist to perform language detection and syntax highlighting. You can find out which keywords are valid in the languages YAML file.

Blockquotes

> Blockquotes uses `>` characters for blockquoting. And blockquotes can be nested by adding additional levels of `>`:
>
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Blockquotes can also contain other Markdown elements:
>
> 1. This is the first list item.
> 1. This is the second list item.
>
> Here's some example code:
>
> ```java
>  if (2 > 1) {
>      return true
>  }
> ```

Blockquotes uses > characters for blockquoting. And blockquotes can be nested by adding additional levels of >:

This is the first level of quoting.

This is nested blockquote.

Blockquotes can also contain other Markdown elements:

This is the first list item.

This is the second list item.

Here’s some example code:
 if (2 > 1) {
     return true
 }

Span Elements

Links

Hyperlinks

  [Lynn's Blog](https://lynn9388.github.io)

Lynn’s Blog

Anchor Links

An anchor link is a link on a page that brings you to a specific place on that page.
```
  [Span Elements](#span-elements)
```
Span Elements

Note that the link must be a lowercase header, even if the original header contains uppercase letters. If the header contains multiple words, they must be connected by -. If your header contains complex symbols, you should pre-generate the HTML page from Markdown and see what the id attribute of that header with your browser’s web developer tools.
Post Links

If you want to include a link to a post on your site, the post_url tag will generate the correct permalink URL for the post you specify.

Linking to posts
```
  [Getting Started with Light Blog]({{ site.baseurl }}{% post_url 2019-04-18-getting-started-with-light-blog %})
```
Getting Started with Light Blog

site.baseurl is required before GitHub Pages’ Jekyll dependency version updates to v4.0.

Since v4.0 you don’t need to prepend link tags with site.baseurl

Jekyll Links
Anchor Links for Another Post

If you want to link a specific place in another post, just combine anchor links and post links showed above. There is a simple example:
```
  [Usage of Light Blog]({{ site.baseurl }}{% post_url 2019-04-18-getting-started-with-light-blog %}#usage)
```
Usage of Light Blog

Text Formatting

*Italic*

**Bold**

~~Strikethrough~~

Italic

Bold

~~Strikethrough~~

Inline Code

Inline `code` has `backticks` around it.

Inline code has backticks around it.

Multimedia Elements

Images

The image syntax is very similar to hyperlinks, except that there is an exclamation mark (!) at the beginning, like:

![Alt Text](link)

If you want to embed images of yourself, just put your images in /assets/images/ folder, and reference it like this:

![Stones on the beach]({{ site.baseurl }}/assets/images/Stones on the beach.jpeg)

Stones on the beach

YouTube Videos

Light Blog provides a simple include tag for YouTube video, which is easy to embed and responsive. You just need to find out the id of a video in YouTube, which is a combination of numbers and letters after an equal sign (=) at the end of video page’s URL. And don’t forget the double quotes (") on both sides of the id.

{% include youtube.html id="gUZpjXwbqvM" %}

Extras

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

| HEADER1 | HEADER2 | HEADER3 | HEADER4 |
| ------- | :------ | :-----: | ------: |
| content | content | content | content |

HEADER1	HEADER2	HEADER3	HEADER4
content	content	content	content

You can choose a different alignment style for each column:

:----- Align left
:----: Align center
-----: Align right

You may want to use a table generator for complicated tables.

MathJax

Light Blog supports MathJax, which means you can embed mathematics with $\rm\LaTeX$ .

$$E = mc^2$$

$E = mc^2$