Hugo Theme : Jack

Hugo Theme Development
hugojacktailwindtheme

Intro

This is a short guide on how to use Hugo Jack theme. If you are interested in the theme development, check out my theme development series. You can also view the code at https://github.com/yasakdogra/jack

Setup

The recommended way to add this theme is using git submodule

git submodule add https://github.com/yasakdogra/jack themes/jack

Add jack theme to Hugo config file

In hugo.toml

theme = 'jack'

Next we need to add dependencies and set up development and build commands using NPM.

In package.json

{
  "scripts": {
    "dev:jack": "tailwindcss -c ./themes/jack/tailwind.config.js -i ./themes/jack/assets/css/main.css -o ./themes/jack/assets/_gen/css/main.css --watch",
    "dev:hugo": "hugo server --noHTTPCache",
    "dev:all": "npm-run-all -p dev:jack dev:hugo",
    "dev": "npm-run-all -p dev:jack dev:hugo",
    "build": "hugo --cleanDestinationDir --minify"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.10",
    "autoprefixer": "^10.4.16",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.33",
    "postcss-cli": "^11.0.0",
    "tailwindcss": "^3.4.1"
  }
}

Install dependencies for development environment

npm install

Install dependencies in production

npm ci

The dev or dev:all command will start a Hugo development server and a Tailwind file change watcher.

You can also start Hugo server and Tailwind CSS separately using dev:hugo and dev:all.

The build command can be used to build locally or on a hosting provider like Cloudflare Pages or Netlify.

Features

Absolute links

[Google](https://www.google.com)

Relative links

[Theme Development](./hugo-theme)

Taxonomies

Support is built in for categories, series and tags.

hugo.toml

[taxonomies]
category = 'categories'
series = 'series'
tag = 'tags'

hugo.toml

[[menus.main]]
name = 'Home'
pageRef = '/'
weight = 10

[[menus.main]]
name = 'Posts'
pageRef = '/posts'
weight = 20

[[menus.main]]
name = 'Tags'
pageRef = '/tags'
weight = 30

[[menus.main]]
name = 'Series'
pageRef = '/series'
weight = 40

Image zoom

hugo.toml

[params]
mediumZoom = true

hugo.toml

[params]
glightbox = true

Usage in markdown

{{< gallery >}}
![Image 1](image1.jpg)
![Image 2](image2.jpg)
![Image 3](image3.jpg)
{{< /gallery >}}

Named galleries where images are split in different locations

{{< gallery name="gallery1" >}}
![Image 1](image1.jpg)
![Image 2](image2.jpg)
![Image 3](image3.jpg)
{{< /gallery >}}

{{< gallery name="gallery2" >}}
![Image 4](image4.jpg)
{{< /gallery >}}

Code blocks

hugo.toml

pygmentsCodeFences = true
pygmentsUseClasses = true

Usage in markdown

```js
const x = 1;
```

Sample output in code blocks

```js
console.log("hello")
```samp
hello
```
```

GitHub style alerts

hugo.toml

[markup.goldmark.parser.attribute]
block = true

Usage in markdown

> [!NOTE]
> {.note}
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> {.tip}
> Optional information to help a user be more successful.

> [!IMPORTANT]  
> {.important}
> Crucial information necessary for users to succeed.

> [!WARNING]  
> {.warning}
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> {.caution}
> Negative potential consequences of an action.

Posts in this series