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
featuredparameter 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_articleandshow_reading_time_on_article. - Configurable pagination — The home page defaults to 10 posts per page, but you can change this by setting the
paginatevalue inhugo.toml. - Google Analytics — Add a Google Analytics measurement ID through the
googleAnalyticssetting to track site telemetry. - SCSS customization — The theme ships with SCSS files in
assets/scssthat you can edit and transpile to CSS using the Dart Sass commandsass 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 --remoteand 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.
