Tutorial

A simple tutorial that offers samples and code snippets show how to create rich content.

Installation

Please check out the installation section.

Install Dependencies

1npm ci

Or install globally.

1sudo npm i -g postcss-cli @fullhuman/postcss-purgecss autoprefixer rtlcss

The later is best for multiple HB sites, since it’s required to executed once. Both of them are valid, choose the one you like.

Start Hugo Server

1npm run dev

Now you can access the site via http://localhost:1313.

This template predefined a script npm run prod for previewing the site on production mode, which can be accessed on http://localhost:1314.

Create Content

1hugo new blog/new-post/index.md

The created content is in draft stage, you’ll need to publish the content by removing the draft or setting the draft as true on front matter.

To preview the drafts, please use the --buildDrafts (-D) flag on hugo server, such as hugo server --gc -D --disableFastRender.

npm run dev will build drafts by default.

Code Block

1```[lang]
2CODE
3```

Replace [lang] with corresponding language identifier, such as js, php, go, html and so on.

1console.log('Hello world!')

Code Syntax Highlighting Styles

HB offers dozens of syntax highlighting styles, find more on syntax highlighting styles modules.

Import the desired style module and restart the Hugo server (load module’s assets fully) to preview.

hugo.toml

1[module]
2[[module.imports]]
3  path = 'github.com/hbstack/syntax-highlighting/styles/github-dark'

hugo.yaml

1module:
2  imports:
3  - path: github.com/hbstack/syntax-highlighting/styles/github-dark

hugo.json

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/hbstack/syntax-highlighting/styles/github-dark"
6         }
7      ]
8   }
9}

KaTex

1```katex
2MATH
3```

f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

Mermaid

1```mermaid
2DIAGRAM
3```

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

Shortcodes

In addition to Hugo built-in shortcodes, HB integrated the Bootstrap module, which ships several useful shortcodes: