Skip to content

Simple and minimal personal blog theme.

License

Notifications You must be signed in to change notification settings

lomion0815/harbor

Repository files navigation

harbor - Simple Hugo Theme

Quality Gate Status

Simple and minimal personal blog theme for Hugo.

screenshot

screenshot-dart

Features

  • Support tags
  • Google Analytics integration
  • Responsive
  • Dark mode
  • Syntax Highlight (see Hugo doc)
  • Search entire blog posts
  • Table Of Contents

Installation & Update

$ # install
$ mkdir themes
$ cd themes
$ git submodule add https://github.com/matsuyoshi30/harbor.git harbor

$ # update
$ git submodule update --remote --merge

If you want to know more information, see Hugo doc.

Usage

When you manually create files by following quick start (step4), you should command hugo new post/<filename>.md instead of hugo new posts/<filename>.md because some styles are specified by the class name (like post-heading) in the main.css.

config.toml example

themes = "harbor"
baseurl = "https://example.com/"
title = "Hugo Themes"
paginate = 3
languageCode = "en"
DefaultContentLanguage = "en"
enableInlineShortcodes = true
footnoteReturnLinkContents = "^"

googleAnalytics = "UA-XXXXXXXX-XX" # Optional

[Author]
  name = "Hugo Author"

[outputs]
  section = ["JSON", "HTML"]

[[params.nav]]
  identifier = "about"
  name = "About"
  icon = "fas fa-userfa-lg"
  url = "/about/"
  weight = 3

[[params.nav]]
  identifier = "tags"
  name = "Tags"
  icon = "fas fa-tag fa-lg"
  url = "tags"
  weight = 3

[[params.nav]]
  identifier = "categories"
  name = "Category"
  icon = "fas fa-folder-open fa-lg"
  url = "categories"
  weight = 3

[[params.nav]]
  identifier = "search"
  name = "Search"
  icon = "fas fa-search fa-lg"
  url = "search"
  weight = 3

[params.logo]
  url = "icon.png"
  width = 50
  height = 50
  alt = "Logo"

Search entire blog posts

You should make search.md in content directory.

---
title: "Search"
---

{{<search>}}

TOC

If you want to use TableOfContent, you need to write words greater than 400, and set true frontmatter toc.

Back To Top Button

If you want to use Back To Top Button, you need to write words greater than 400, and set true frontmatter backtotop.

Frontmatter example

+++
title = "Article title here"
date = 2020-02-15T20:00:00+09:00
tags = ["tags here"]
draft = false
toc = false
backtotop = false
+++

# Title

<!-- when toc is true and post wordcounts is greater than 400 -->

## Contents

Development

  1. Install Node.js and npm, the Node.js package manager.

  2. The package.json file in your new sub-theme contains the versions of all the Node.js software you need. To install them run:

     npm install
    

LICENSE

MIT.

About

Simple and minimal personal blog theme.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 45.5%
  • CSS 42.1%
  • JavaScript 12.4%