Harbor

Overview

The harbor theme is a simple and minimal personal blog theme for Hugo. It offers support for tags, categories, and archives, as well as analytics integration, responsive design, dark mode, syntax highlight, search functionality, table of contents, Disqus comments, and social media integration.

Features

• Support for tags, categories, and archives: Easily organize your blog posts with tags, categories, and archives.
• Analytics integration: Integrate Google Analytics, Goatcounter, or Matomo to track the traffic on your blog.
• Responsive design: The theme is designed to be fully responsive, providing a seamless experience across different devices.
• Dark mode: Users can switch to a dark mode theme for better readability in low-light conditions.
• Syntax Highlight: The theme supports syntax highlighting for code snippets, following the Hugo documentation guidelines.
• Search entire blog posts: Enable a search functionality that allows users to search for content within your blog posts.
• Table Of Contents: Automatically generate a table of contents for long articles to help users navigate through the content.
• Disqus integration: Easily add Disqus comments to enable discussion and engagement on your blog.
• Social media integration: Promote your blog posts on social media platforms by sharing them directly from your blog.

Installation

To install the harbor theme, follow these steps:

1. Open your config.toml file.
2. Add the harbor theme as a submodule to your Hugo site.

   [module]
   [[module.imports]]
   path = "github.com/matsuyoshi30/harbor"
   

3. Create a search.md file in the content directory for enabling the search functionality.
4. If you want to use the table of contents feature, make sure to write articles with more than 400 words and set toc = true in the frontmatter of the respective articles.
5. To override the default CSS, add a customCSS parameter in your config.toml file.
6. If you want to enable Google Analytics when running Hugo as a server, add enableGoogleAnalytics parameter to your config.toml file.
7. If you want to enable “Ugly URLs” (e.g. example.com/urls.html), add uglyurls = true to the top level and [params] section of your config.toml file.
8. To enable bottom navigation, add enableBottomNavigation = true to the [params] section of your config.toml file.

Summary

The harbor theme is a simple and minimal personal blog theme for Hugo. It offers a range of features including support for tags, categories, and archives, analytics integration, responsive design, dark mode, syntax highlight, search functionality, and more. With its easy installation process and customizable options, it is a great choice for anyone looking to create a personal blog using the Hugo framework.