HugoBlog

blist-hugo-theme — Hugo Blog Template

By apvarun

Blist is a blog theme for Hugo sites, released under the MIT license, offering a responsive layout, pagination, search, table of contents, dark mode, and integration with multiple comment systems.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided previewTop of page

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-09-30View source

What stands out

A quick read of the recorded project description.

01

Responsive layout optimized for mobile

02

Supports post pagination and table of contents navigation

03

Built-in text search based on fuse.js, requiring JSON output enabled for the home page

04

Supports dark mode toggle and remembers user preference

05

Can integrate Disqus, giscus, and utterances comment systems

06

Customize theme accent color via Tailwind CSS color names

Template Details

Blist is a blog theme for Hugo static sites, maintained by apvarun and released under the MIT license. The theme is positioned for blog content display, providing a responsive layout with mobile adaptation, post pagination, table of contents, social links, code highlighting, color customization, dark mode, i18n multilingual support, and SEO-related configuration. The search function is implemented with fuse.js and requires enabling JSON output for the home page in Hugo's outputs; comments support Hugo's native Disqus, as well as giscus and utterances. The theme requires a minimum Hugo version of 0.110.0, and the build process depends on npm and PostCSS. When deploying to platforms such as Netlify or Vercel, use the command npm i && HUGO_ENVIRONMENT=production hugo --gc, where the production environment variable is used to enable CSS purging. The repository includes a fully configured exampleSite; you can copy its hugo.toml and package.json to your site root and run a preview.

HugoBlog

Is it right for your project?

Use Cases

  • Building a personal technical blog or writing site with Hugo
  • Blogs that need multilingual content and localized site configuration
  • Static sites that want to integrate third-party comment systems for posts
  • Blogs that need search, table of contents, and dark reading mode

Suitable For

  • Developers using Hugo and familiar with npm build processes
  • Blog sites focused on article lists and body reading
  • Personal sites that need multilingual and comment features

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Minimum Hugo version requirement is 0.110.0

  2. 2

    Place the theme into themes/blist via git clone or git submodule

  3. 3

    Copy the theme's package.json and package-lock.json to the site root and run npm install

  4. 4

    Set theme = 'blist' in hugo.toml, and refer to the exampleSite configuration

  5. 5

    To enable search, add JSON output for home in outputs

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope is the code of this version and does not imply that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Enabling Google Analytics requires configuring services.googleAnalytics.ID in hugo.toml; it is an external third-party service, and you must confirm its terms and fees yourself before use.
  • Comment functionality depends on third-party external services such as Disqus, giscus, or utterances; you need to register and configure the corresponding account or repository yourself, and it may be subject to their respective terms.
  • The build process depends on npm and a globally installed postcss-cli, requiring a Node.js environment and corresponding network access.
  • Using this theme requires Hugo version 0.110.0 or higher; lower versions cannot build properly.
  • The search function depends on the fuse.js library, which must be installed via npm and requires enabling JSON output for the home page in outputs.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; they cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Set `services.googleAnalytics.ID` in `hugo.toml` to activate Hugo's [embedded Google Analytics template]

Original README

Support comments systems - Disqus (hugo native) - giscus - utterances

Original README

Run `npm i -g postcss-cli` to use PostCSS with Hugo build

Original README

Minimum Hugo Version: **0.110.0**

Original README

Uses fuse.js to enable searching through content

Original README
https://github.com/apvarun/blist-hugo-theme/blob/main/LICENSEhttps://github.com/apvarun/blist-hugo-theme/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-01. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 91 / 100
Technologies
Hugo
Website type
Blog
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2025-12-31
Screenshot last checked
2026-10-01

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Hugo as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: cb56d400f90a52575aa79a313a30d06c809a466e64ba12b8a33c1381c3ad3134

2026-10-01T14:25:55.190Z

Source file / repository
# Blist theme for Hugo

![Latest Release](https://img.shields.io/github/tag/apvarun/blist-hugo-theme.svg)
![Blist hugo theme](https://img.shields.io/github/license/apvarun/blist-hugo-theme)
![Hugo generator](https://img.shields.io/badge/generator-hugo-brightgreen)

Blist is a clean and fast blog theme for your Hugo site.

![Blist Icon](https://github.com/apvarun/blist-hugo-theme/raw/main/images/blist-logo.png)

**Features:**

- Responsive content / Mobile-optimized
- Blog pagination
- Customizable Text Search
- Table of contents
- Social links
- Code highlighting
- Color customization
- Dark mode
- Fast performance
- SEO optimized
- i18n support
- Support comments systems
  - Disqus (hugo native)
  - giscus
  - utterances

## Preview

![Preview](https://github.com/apvarun/blist-hugo-theme/raw/main/images/screenshot.png)

➡️ [DEMO](https://blist.vercel.app/)

## Get the theme

Minimum Hugo Version: **0.110.0**

Run from the root of your Hugo site:

```sh
git clone https://github.com/apvarun/blist-hugo-theme.git themes/blist
```

Alternatively, you can include this repository as a [git submodule](https://git-scm.com/docs/gitsubmodules). This makes it easier to update this theme if you have your Hugo site in git as well:

```sh
git submodule add https://github.com/apvarun/blist-hugo-theme.git themes/blist
```

## Preview the theme with example content

Blist theme ships with an fully configured example site. For a quick preview:

Copy the `package.json` file from `themes/blist` folder to your hugo website root folder, and run `npm install`.

```sh
cd themes/blist/exampleSite/
hugo serve --themesDir ../..
```

Then visit `http://localhost:1313/` in your browser to view the example site.

## Configuring theme to a hugo website

1. Copy `package.json` and `package-lock.json` to the root folder of your website
2. Run `npm install` to install required packages for theme
3. Run `npm i -g postcss-cli` to use PostCSS with Hugo build
4. Set `theme = 'blist'` in hugo.toml
5. Run `npm start` to start your local server

Make sure to commit the above changes to your repository.

## Publish your website

When deploying to services like Netlify or Vercel, use the following command for building your site:

```sh
npm i && HUGO_ENVIRONMENT=production hugo --gc
```
The parameter `HUGO_ENVIRONMENT=production` enables the execution of css purging.

## Add content

The following explains how to add content to your Hugo site. You can find sample content in the `exampleSite/` folder.

### Structure:

    .
    ├── ...
    ├── blog       # Blog Section
    │   ├── post1   # Post 1
    │   ├── post2   # Post 2
    │   └── _index
    └── ...

## Configure your site

From `exampleSite/`, copy `hugo.toml` to the root folder of your Hugo site and change the fields as you like. Helpful comments are provided.

### Menu

Menu in Blist theme is pre-set to have all section names. You can include custom links in header using the `menu.main` option hugo.toml.

### Logo

`logo` param in the site config will allow to use an image as the logo instead of the website name. It is localizable and so can have different logo for different languages

### Darkmode

`[params.darkModeToggle]` enables the dark mode toggle in header. The preference is then saved so that the mode is automatically chosen for return visits.

### Customize Ascent Color

Use `[params.ascentColor]` to change the default `pink` color to any supported color from the [list of default colors](https://tailwindcss.com/docs/customizing-colors) from Tailwind CSS.

Some example values: bg-blue-200, bg-yellow-300

### Search

`[params.enableSearch]` option is used to enable search option in the theme.

- Adds the search icon in header
- Generates the search index
- Uses fuse.js to enable searching through content

In order to search, you can either click on the search icon from header or press `Ctrl/Cmd + /` key combination.

**Note:**

Make sure to enable JSON in outputs array.

```
[outputs]
  home = ["HTML", "RSS", "JSON"]
```

### LaTeX

Enable mathematical options: set `math: true` in your markdown frontmatter

### Google Analytics

Set `services.googleAnalytics.ID` in `hugo.toml` to activate Hugo's [embedded Google Analytics template](https://gohugo.io/templates/embedded/#google-analytics).

## Performance

[![Pagespeed Insights Performance](https://github.com/apvarun/blist-hugo-theme/raw/main/images/pagespeed-performance.png)](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblist.vercel.app&tab=mobile)

## Issues

If you have a question, please [open an issue](https://github.com/apvarun/blist-hugo-theme/issues) for help and to help those who come after you. The more information you can provide, the better!

## Contributing

Contributions, issues, and feature requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

<table>
  <tr>
    <td align="center"><a href="https://github.com/apvarun"><img alt="apvarun"
          src="https://avatars.githubusercontent.com/u/8411309?v=4" width="117" /><br />apvarun</a></td>
    <td align="center"><a href="https://github.com/Ravinou"><img alt="Ravinou"
          src="https://avatars.githubusercontent.com/u/39600829?v=4" width="117" /><br />Ravinou</a></td>
    <td align="center"><a href="https://github.com/engel-b"><img alt="engel-b"
          src="https://avatars.githubusercontent.com/u/5812810?v=4" width="117" /><br />engel-b</a></td>
    <td align="center"><a href="https://github.com/chris-gillatt"><img alt="chris-gillatt"
          src="https://avatars.githubusercontent.com/u/9963006?v=4" width="117" /><br />chris-gillatt</a></td>
    <td align="center"><a href="https://github.com/apps/dependabot"><img alt="dependabot[bot]"
          src="https://avatars.githubusercontent.com/in/29110?v=4" width="117" /><br />dependabot[bot]</a></td>
    <td align="center"><a href="https://github.com/xLexip"><img alt="xLexip"
          src="https://avatars.githubusercontent.com/u/46321162?v=4" width="117" /><br />xLexip</a></td>
  </tr>
  <tr>
    <td align="center"><a href="https://github.com/AntoineSoetewey"><img alt="AntoineSoetewey"
          src="https://avatars.githubusercontent.com/u/17910063?v=4" width="117" /><br />AntoineSoetewey</a></td>
    <td align="center"><a href="https://github.com/chiragksharma"><img alt="chiragksharma"
          src="https://avatars.githubusercontent.com/u/74889769?v=4" width="117" /><br />chiragksharma</a></td>
    <td align="center"><a href="https://github.com/dlecan"><img alt="dlecan"
          src="https://avatars.githubusercontent.com/u/586631?v=4" width="117" /><br />dlecan</a></td>
    <td align="center"><a href="https://github.com/jpiaskowski"><img alt="jpiaskowski"
          src="https://avatars.githubusercontent.com/u/8420943?v=4" width="117" /><br />jpiaskowski</a></td>
    <td align="center"><a href="https://github.com/lucab85"><img alt="lucab85"
          src="https://avatars.githubusercontent.com/u/24267107?v=4" width="117" /><br />lucab85</a></td>
    <td align="center"><a href="https://github.com/Marty"><img alt="Marty"
          src="https://avatars.githubusercontent.com/u/100658?v=4" width="117" /><br />Marty</a></td>
  </tr>
  <tr>
    <td align="center"><a href="https://github.com/ernavdeepkr"><img alt="ernavdeepkr"
          src="https://avatars.githubusercontent.com/u/50796185?v=4" width="117" /><br />ernavdeepkr</a></td>
    <td align="center"><a href="https://github.com/roypeter"><img alt="roypeter"
          src="https://avatars.githubusercontent.com/u/16620459?v=4" width="117" /><br />roypeter</a></td>
    <td align="center"><a href="https://github.com/janvanveldhuizen"><img alt="janvanveldhuizen"
      src="https://avatars.githubusercontent.com/u/43573150?v=4" width="117" /><br />janvanveldhuizen</a></td>
    <td align="center"><a href="https://github.com/jmflaherty"><img alt="jmflaherty"
      src="https://avatars.githubusercontent.com/u/12985011?v=4" width="117" /><br />jmflaherty</a></td>
  </tr>
</table>

## License

Licensed under [MIT](LICENSE)

## 🤝 Support

Give a ⭐️ if you like this project!

<a href="https://www.buymeacoffee.com/apvarun" target="_blank" rel="noopener"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="40" width="145" alt="Buy Me A Coffee"></a>
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

hugo-PaperMod

hugo-PaperMod

A fast, clean, responsive Hugo theme for blogs and lightweight portfolios, with three layout modes (Regular, Home-Info, Profile), automatic and manual light/dark themes, Fuse.js client-side search, multilingual support, and built-in Open Graph, Twitter Cards, and Schema.org data.

Hugo · Portfolio

LoveIt

LoveIt

LoveIt is a clean, elegant, and feature-rich Hugo blog theme derived from LeaveIt and KeepIt, MIT-licensed. It offers light/dark modes, responsive layout, multilingual support, and search via Lunr.js or Algolia.

Hugo · Blog

hugo-coder

hugo-coder

hugo-coder is a minimalist Hugo blog theme maintained by luizdepra under the MIT license. It provides a clean, text-focused blog appearance, configuration documentation in the docs directory, and a complete exampleSite with hugo.toml.

Hugo · Blog

blowfish

blowfish

Blowfish is a Hugo personal website and blog theme built with Tailwind CSS 4, focused on lightness, simplicity, and content-first presentation.

Hugo · Blog

hugo-paper

hugo-paper

hugo-paper is a simple, clean, and customizable Hugo blog theme configured through config.toml or hugo.toml.

Hugo · Blog

hextra

hextra

Hextra is a Hugo theme for documentation and blog sites, built on Hugo and Tailwind CSS with design referencing Nextra.

Hugo · Documentation