Top Hat

Top Hat is a simple Hugo theme for blogging, created by Sergio Barriel, that gives a standard Hugo site a clean blog layout with featured posts, syntax highlighting, and reading-time metrics.

What is Top Hat?

Top Hat is a Hugo theme designed specifically for personal blogs. It takes Hugo content written in Markdown and a hugo.toml configuration file, and outputs a static website with navigation, tags, featured post support, and per-article word counts and reading time. The theme is maintained by Sergio Barriel and is available on GitHub under the tophat-theme repository, with a live demo on his own blog at nohat.dev.

Key features

• Syntax highlighting — Configured through Hugo's markup highlighter options, with support for custom styles like the Dracula theme and the full Splash style gallery.
• Featured posts — Enable the featured parameter in the site config to mark certain posts as featured.
• Navigation menus — Define both main menu links (like About and Contact) and social menu links (Twitter, GitHub) via TOML menu entries.
• Tags — Blog posts can be organized with tags, which are supported by the theme's layout.
• Words count and reading time — Each article displays word count and estimated reading time, and you can toggle these on or off individually with parameters like show_words_count_on_article and show_reading_time_on_article.
• Configurable pagination — The home page defaults to 10 posts per page, but you can change this by setting the paginate value in hugo.toml.
• Google Analytics — Add a Google Analytics measurement ID through the googleAnalytics setting to track site telemetry.
• SCSS customization — The theme ships with SCSS files in assets/scss that you can edit and transpile to CSS using the Dart Sass command sass styles.scss ../css/styles.css.

Who is Top Hat for?

Top Hat is aimed at Hugo users who want a no-frills blogging theme without a lot of extra chrome. Individual bloggers can set up a clean personal journal with featured posts and tag-based navigation. Developers who already know Hugo can quickly add the theme as a git submodule and start writing content without learning a complex template system. Writers who care about reading metrics can rely on the built-in word count and reading time indicators.

What can you do with Top Hat?

• Personal bloggers — Start a personal blog with Hugo by adding Top Hat and configuring a custom subtitle, description, and author name in the parameters section.
• Technical writers — Publish code-heavy posts and take advantage of configurable syntax highlighting with styles like Dracula or any from the Splash gallery.
• Developers — Use the git submodule installation method to keep the theme updated with git submodule update --remote and manage the blog as part of a larger codebase.

How does Top Hat work?

To use Top Hat, you either download the repository as a ZIP and extract it to themes/tophat, or add it as a git submodule with git submodule add https://github.com/sergiobarriel/tophat-theme.git themes/tophat. Then set theme = "tophat" in your hugo.toml and run hugo server to preview your site.

Pricing

Top Hat is a free open-source theme distributed on GitHub. There are no paid tiers or premium features; the repository is public and available for anyone to use.

Alternatives

Alternative Hugo blog themes include PaperMod, a widely used theme with more layout and appearance options, and Ananke, a classic theme that comes with a one-click install in Hugo's theme gallery.

FAQ

How do I install Top Hat?

Download the ZIP from the GitHub repository and extract it into themes/tophat, or add it with git submodule add https://github.com/sergiobarriel/tophat-theme.git themes/tophat. Then set theme = "tophat" in hugo.toml and run hugo server.

How do I update the theme?

If you used the git submodule method, run git submodule update --remote from your site's root directory. The ZIP method requires manually downloading the latest files and replacing the theme folder.

Can I customize the styles?

Yes. Top Hat includes SCSS files in the assets/scss folder. Edit them and then run sass styles.scss ../css/styles.css using Dart Sass to compile the CSS.

Does Top Hat support Google Analytics?

Yes. Add googleAnalytics = "G-XXXXXXXXXX" to your hugo.toml file and Top Hat will include the script for tracking telemetry.

Can I change the number of posts per page?

Yes. The default pagination is 10, but you can set a different number by adding paginate = 5 (or any value) to your hugo.toml.