harbor - Simple Hugo Theme
Simple and minimal personal blog theme for Hugo.
DEMO is built from exampleSite.
- Support tags, categories and archives
- Analytics integration (Google, Goatcounter or Matomo)
- Responsive
- Dark mode
- Syntax Highlight (see Hugo doc)
- Search entire blog posts
- Table Of Contents
- Disqus
- Most social media
$ # install
$ 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.
theme = "harbor"
baseurl = "https://example.com/"
title = "Hugo Themes"
paginate = 3
languageCode = "en"
DefaultContentLanguage = "en"
enableInlineShortcodes = true
footnoteReturnLinkContents = "^"
# Optional
# If you use googleAnalytics, you set top-level options in config.toml to the beginning of the config file like other top-level options.
googleAnalytics = "UA-XXXXXXXX-XX"
# and disqus too.
disqusShortName = "yourdisqusshortname"
[params.goatcounter]
domain="stats.domain.com"
[params.matomo]
domain="stats.domain.com"
id="123"
[Author]
name = "Hugo Author"
[outputs]
section = ["JSON", "HTML"]
[[params.nav]]
identifier = "about"
name = "About"
icon = "fas fa-user fa-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.nav]]
identifier = "archives"
name = "Archives"
icon = "fas fa-archive fa-lg"
url = "archives"
weight = 3
# copy paste this block and change for each social media to add how many ever social media
# acounts/links you want
[[params.social]]
name="name of social media"
url="link to social media"
icon="A icon from https://fontawesome.com/"
[params.logo]
url = "icon.png" # static/images/icon.png
width = 50
height = 50
alt = "Logo"
Before you user my theme, don't remember to change favicon (static/favicon.ico) and icon (static/images/icon.png)!
If you don't change them, your favicon and icon are my face :)
You should make search.md
in the content
directory.
---
title: "Search"
layout: "search"
---
If you want to use TableOfContent, you need to write words greater than 400, and set true
of the frontmatter toc
.
If you want to use Back To Top Button, you need to write words greater than 400, and set true
of the frontmatter backtotop
.
If you want archive page, generate archives.md
file in the content
directory.
$ hugo new archives.md
---
title: "Archive page"
type: archives
---
If you want to override CSS, add customCSS
param which is path to CSS file to your config.toml.
[params]
customCSS = ["/css/custom.css"] # in case you use `/static/css/custom.css`
If you want to enable google analytics when running hugo as server, add enableGoogleAnalytics
param to your config.toml.
[params]
enableGoogleAnalytics = true
If you want to enable "Ugly URLs" (e.g. exmaple.com/urls.html), add uglyurls = true
to top level and [params] of your config.toml.
uglyurls = true
[params]
uglyurls = true
If you want to enable bottom navigation in , add enableBottomNavigation = true
params to your config.toml.
[params]
enableBottomNavigation = true
+++
title = "Article title here"
date = 2020-02-15T20:00:00+09:00
tags = ["tags here"]
draft = false
toc = false
backtotop = false
disable_comments = true <!-- disable disqus -->
+++
# Title
<!-- when toc is true and post wordcounts is greater than 400 -->
## Contents
Issues and PRs are very welcome!
If you touch CSS or JavaScript file, you need to build to add your changes following below steps.
-
Install Node.js and npm (Node.js package manager).
-
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
-
After fixing files, you can format like below. (Auto format before commit using husky)
$ npm run format
MIT.