Welcome to Hugo Toigian on Toigian

Getting Started with Hugo

kiennt2609@gmail.com (Kien Nguyen-Tuan) — Wed, 26 Oct 2022 17:12:11 +0700

Step 1. Install Hugo

Go to Hugo releases and download the appropriate version for your OS and architecture.

Save it somewhere specific as we will be using it in the next step.

More complete instructions are available at Install Hugo

Step 2. Build the Docs

Hugo has its own example site which happens to also be the documentation site you are reading right now.

Follow the following steps:

1. Clone the [Hugo repository](http://github.com/spf13/hugo)
2. Go into the repo
3. Run hugo in server mode and build the docs
4. Open your browser to http://localhost:1313

Corresponding pseudo commands:

Welcome to Hugo Toigian

kiennt2609@gmail.com (Kien Nguyen-Tuan) — Tue, 25 Oct 2022 18:12:11 +0700

Toigian - Tối giản (vietnamese): Minimalist (english)

Disclaimer: I’m not a front-end developer, just a guy who like tweaking stuff, so my code may not be pretty/clean. I attempt to learn Tailwind CSS, and hugo-toigian is the result.

Showcase

Take a look at demo site.

Dark	Light

Features

Minimalist (tối giản) design. Highly inspired by mellow.dev.
Use the classy minimalist Rosé Pine color palette.
Customizable.
Support light/dark mode.
Useful shortcodes.
Comments support.
Syntax highlighting: use server-side solution (Chroma, hugo built-in), I’ve added Rosé Pine styles to Chroma, so everything is the same vibe.

Prerequisites

git, npm installed.
A minimum Hugo “extended” version of v0.93.0 and above.

snap install hugo --channel=extended

Hugo Pipe’s PostCSS requires the postcss-cli JavaScript package to be installed in the environment (npm install -g postcss postcss-cli) along with any PostCSS plugin(s) used (e.g., npm install -g autoprefixer). If you are using the Hugo Snap package, PostCSS and plugin(s) need to be installed locally within your Hugo site directory, e.g., npm install postcss-cli without the -g flag.

Installation

Go to root directory of your Hugo website, or create a new site with:

hugo new site hugo-example-site
cd hugo-example-site
git init

Add the theme.

git submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian

Install Nodejs modules.

cd themes/hugo-toigian
npm install

Finally, update theme in your configuration config.toml file in the root directory of your Hugo website.

theme = "hugo-toigian"

Run server to see a live preview of it.

hugo server -DF --disableFastRender

Build static pages

hugo --environment production --minify

Configuration

Site configuration

There are a few configuration options that you can add to config.toml file.

Hugo Diagrams

kiennt2609@gmail.com (Kien Nguyen-Tuan) — Tue, 25 Oct 2022 17:12:11 +0700

Hugo version >= 0.93.0

GoAT Diagrams (Ascii)

Hugo! supports GoAT natively. This means that this code block:

```goat
 . . . .--- 1 .-- 1 / 1
 / \ | | .---+ .-+ +
 / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
 + + | | | | ---+ ---+ +
 / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
 / \ / \ | | | | | | | | '---+ '-+ +
 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4

```

Will be rendered as:

Hugo Shortcodes

kiennt2609@gmail.com (Kien Nguyen-Tuan) — Fri, 21 Oct 2022 17:12:11 +0700

Details

Details shortcode is a helper for details html5 element. It is going to replace expand shortcode.

Example

{{< details "Title" [open] >}}
## Markdown content
Lorem markdownum insigne...
{{< /details >}}

{{< details title="Title" open=true >}}
## Markdown content
Lorem markdownum insigne...
{{< /details >}}

Title

Markdown content

Lorem markdownum insigne…

Quote

Quote shortcode can be used with 3 colors: info, warn and critical.

{{< quote [info|warn|critical] >}}
**Markdown content**
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{< /quote >}}

Example

Markdown content Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa

Mermaid

Mermaid is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.

Introduce Hugo

kiennt2609@gmail.com (Kien Nguyen-Tuan) — Thu, 20 Oct 2022 17:12:11 +0700

Introduction

This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.

We’ll start with creating a new site with a very basic template. Then we’ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.

Creating a New Theme

kiennt2609@gmail.com (Kien Nguyen-Tuan) — Fri, 22 Oct 2021 17:12:11 +0700

Introduction

Migrate to Hugo from Jekyll

kiennt2609@gmail.com (Kien Nguyen-Tuan) — Fri, 22 Oct 2021 17:12:11 +0700

Move static content to `static`

Jekyll has a rule that any directory not starting with _ will be copied as-is to the _site output. Hugo keeps all static content under static. You should therefore move it all there. With Jekyll, something that looked like

▾ <root>/
 ▾ images/
 logo.png

should become

▾ <root>/
 ▾ static/
 ▾ images/
 logo.png

Additionally, you’ll want any files that should reside at the root (such as CNAME) to be moved to static.

About

kiennt2609@gmail.com (Kien Nguyen-Tuan) — Mon, 01 Jan 0001 00:00:00 +0000

Something about yourself.

Welcome to Hugo Toigian on Toigian

Getting Started with Hugo

Step 1. Install Hugo

Step 2. Build the Docs

Welcome to Hugo Toigian

Showcase

Features

Prerequisites

Installation

Configuration

Site configuration

Hugo Diagrams

GoAT Diagrams (Ascii)

Hugo Shortcodes

Details

Example

Markdown content

Quote

Example

Mermaid

Introduce Hugo

Introduction

Creating a New Theme

Introduction

Migrate to Hugo from Jekyll

Move static content to static

About

Move static content to `static`