Geekdoc Theme Overview

Install Geekdoc theme with the default configuration.

Version

Hugo 0.108

Create New Site

$ hugo new site my-geekdoc

hugo new site : create a new site with a default skeleton

Create NPM Config

$ cd my-geekdoc
$ npm init -y

Create an empty NPM config.

NPM Config

package.json

{
  "name": "my-geekdoc",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "hugo server",
    "build": "hugo --minify"
  }
}

Line 5

"scripts": {
  "dev": "hugo server",
  "build": "hugo --minify"
}

dev : run web server under development mode
build : build HTML/CSS/JavaScript under production mode

Install Geekdoc Theme

$ mkdir -p themes/hugo-geekdoc/
$ curl -L https://github.com/thegeeklab/hugo-geekdoc/releases/latest/download/hugo-geekdoc.tar.gz | tar -xz -C themes/hugo-geekdoc/ --strip-components=1

mkdir：create hugo-geekdoc folder under the themes folder
curl：use curl to install the prebuilt bundle of the Geekdoc theme

Hugo Config

config.toml

baseURL = "http://localhost"
title = "Geekdocs"
theme = "hugo-geekdoc"

pluralizeListTitles = false

# Geekdoc required configuration
pygmentsUseClasses = true
pygmentsCodeFences = true
disablePathToLower = true

# Required if you want to render robots.txt template
enableRobotsTXT = true

# Needed for mermaid shortcodes
[markup]
  [markup.goldmark.renderer]
    # Needed for mermaid shortcode
    unsafe = true
  [markup.tableOfContents]
    startLevel = 1
    endLevel = 9

[taxonomies]
   tag = "tags"

Default config.toml provided by Geekdoc theme.

Development Mode

$ npm run dev

Start web server under development mode.

Production Mode

$ npm run build
$ serve public

Build HTML/CSS/JavaScript under production mode
Start web server under production mode

Conclusion

If we just clone the repository from Git, we have to use Webpack to build the whole theme

Reference

Geekdoc, Getting Started