How to Write a GitHub Blog Post

Updated 2024-02-20

Top-of-post frontmatter

Indicates that the page is a Post

  ---
  title: "GitBlog"
  date: 2022-02-15
  categories: Gitblog
  tags: [Temaplte]
  ---

  '''
  Post metadata

  * categories
  - Match against the categories you created
  - C / C++ / css / docker / excel / git / gitblog / html / k8s / linux / python /storage / vscode / windows
  - Capitalize the first letter
  * tags
  - Free-form
  '''

This document summarizes how to write a Post. The text below is lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[01] Content Sections

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac dolor sit amet purus malesuada congue. Duis molestie tincidunt orci a venenatis. Praesent vehicula lectus vel risus convallis, in faucibus erat luctus.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim luctus dui, vitae cursus risus venenatis non. Praesent at vehicula erat. Donec ornare dapibus turpis, eu fringilla nibh fermentum a. Nullam eget metus a justo malesuada tristique.

Section 2

Praesent vestibulum, lectus quis venenatis venenatis, nibh dui mattis tellus, eget feugiat orci ligula sed mauris. Phasellus blandit, mauris nec hendrerit faucibus, tortor nibh lobortis lectus, in lobortis dolor nisl in nisl.

Section 3

Vivamus a justo at urna sollicitudin auctor. Cras commodo, ipsum at consequat efficitur, ipsum massa congue justo, vel egestas sapien magna sed metus.

[02] Syntax

Line Break

Two spaces at the end of the first line, then Enter: Space, Space, Enter

This is the first line. #Space#Space#Enter
This is the second line.

Bold, Italic, Strikethrough, Underline

bold **bold** italic *italic* ~~strikethrough~~ ~~strikethrough~~ underline <u>underline</u>

Code Block

# Wrap code with triple backticks as shown below

# ```
# code
# ```

Major supported languages:
- bash, bat, console,
- c, cpp, go, java, python,
- cmake, console, make, vim
- css, html, js, jsp, markdown, r, sass
- sql, sqlite3,
- xml, yaml

Example:

  ### --- file created/modified

  # comment
  import os

  class Class():
      value1 = 0

      def __str__(self):
          return self.value1
        
      def function(parm1, parm2):
          values = 0
          return

  if __name__ == '__main__':
      main()

Emoji

is written as :bulb:

Reference: https://gist.github.com/rxaviers/7360908

Common Emoji

:exclamation: :fire: :star: :cloud: :sunny: :zap: :milky_way: :computer: :loudspeaker: :scroll: :page_with_curl: :clipboard: :closed_book: :green_book: :memo: :rocket: :beginner: :round_pushpin: :triangular_flag_on_post: :arrow_forward: :arrow_backward: :arrow_left: :arrow_right: :red_circle: :diamonds: :large_blue_circle: :large_blue_diamond: :large_orange_diamond: :small_blue_diamond: :small_orange_diamond: :ballot_box_with_check:

Links

Open in the same window

Reference: Open in the same window

Open in a new window

Reference: Open in a new window

# Open in the same window
:small_blue_diamond: Reference: [Open in the same window](http://google.co.kr)

# Open in a new window
:small_blue_diamond: Reference: [Open in a new window](http://google.co.kr){:target="_blank"}

Images

Images are hosted via GitHub Issues. The repository hosting the Issues must be public.

Uploading an Image

Issues New Issue Open a blank issue paste the image into the Write field. Then copy the generated link and paste it into the page.

2024-02-20 18 15 52

2024-02-20 18 16 11

2024-02-20 18 17 39

2024-02-20 18 18 02

Example:

Wrapping an Image in a Link

Make the image clickable to navigate to another URL.

description is the tooltip shown when hovering over the image.

# Open in the same window
[![unsplash-image-9](https://github.com/cmaven/cmaven.github.io/assets/76153041/0ed9c920-d723-4edd-8c72-60f58514875f "description")](http://google.com)

# Open in a new window
[![unsplash-image-9](https://github.com/cmaven/cmaven.github.io/assets/76153041/0ed9c920-d723-4edd-8c72-60f58514875f "description")](http://google.com){:target="_blank"}

Image Sizing and Alignment

Resize

  # Resize (using html)
  <img src="https://github.com/cmaven/cmaven.github.io/assets/76153041/0ed9c920-d723-4edd-8c72-60f58514875f" width="100px" height="100px">{: .align-center}

Alignment

  # Center
  ![unsplash-image-9](https://76153041/0ed9c920-d723-4edd-8c72-60f58514875f)
  {: .align-center} 
  # Left
  ![unsplash-image-9](https://76153041/0ed9c920-d723-4edd-8c72-60f58514875f)
  {: .align-left} 
  # Right
  ![unsplash-image-9](https://76153041/0ed9c920-d723-4edd-8c72-60f58514875f)
  {: .align-right} 

Example (300px, centered)

Lists

list
- list
  - list

list
1. list
  - list
2. list
3. list
list

unchecked
checked

- list
  - list
    - list

1. list
   1. list
      - list
   2. list
   3. list
2. list

- [ ] unchecked
- [x] checked

BlockQuote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac dolor sit amet purus malesuada congue.

Nested block quote. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit.

>> Nested block quote. Vestibulum ante ipsum primis in faucibus orci luctus.

Footnotes

Here is a simple footnote¹.

A footnote can also have multiple lines².

This is a second line.

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].

[^1]: My reference.
[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.

This is a second line.

My reference. ↩
To add line breaks within a footnote, prefix new lines with 2 spaces. ↩

cmaven