Hugo Themes

Prev/Next: All Themes

chringel

chringel - Privacy focused theme for Hugo using TailwindCSS

Download Demo
chringel

chringel - Privacy focused theme for Hugo 🕵️

Based on the awesome Hugo Starter Theme with Tailwind CSS. Go check it out! 🚀

chringel

This theme was created with privacy in mind. By default, Disqus and Google Analytics are disabled, but you are free to use them, if you want. Instead this theme comes with configuration options for Isso and umami.

Quickstart

Prerequisites

Make sure to install postcss-cli and autoprefixer globally in your environment, as Hugo Pipe’s PostCSS requires it. This is mentioned in the Hugo Docs.


npm install -g postcss-cli
npm install -g autoprefixer

Make sure to use a minimum Hugo version of v0.69.0 and above.

Set the writeStats option in your Hugo config file, so that purging of CSS classes works in production. See /exampleSite/config.toml as a guideline.

[build]
  writeStats = true

For a new site 

# Create a new site
hugo new site my-site

# Change into your themes folder
cd my-site/themes

# Clone this theme
git clone https://github.com/chringel21/chringel-hugo-theme.git

# Change into your new theme's folder and install dependencies
cd chringel && npm install
  • Don’t forget to edit your config.toml to use your new theme
# config.toml
theme = "chringel-hugo-theme"

Create a new post

Included is an archetype to help you get started with creating content. It’s a post bundle. Create it with:

hugo new --kind post-bundle post/my-post

Create a new note

If you want to dive into the IndieWeb, chances are you want to create notes. They are like tweets/toots/status updates, or can contain comments, likes and reposts. Take a look at the archetype. I would recommend creating notes like this:

hugo new notes/`date +'%Y/%m/%d/%H%M'`.md

This will create a note in your content folder at content/notes/YYYY/mm/dd/HHMM.md.

Features

  • 🌝 /🌚 Automatic dark mode based on device setting
  • 💬 Isso commenting server similar to Disqus (self-hosted)
  • 📈 umami - simple, easy to use, web analytics solution (self-hosted)
  • 🐦 SVG (social) icons powered by ionicons, currently Twitter, Github, Mastodon and RSS are available, but more can be downloaded with a simple shell script
  • 🧑‍💻 Syntax highlighting with copy function
  • 🔗 Deeplinks to headings in a blog post
  • 📄 Resume from JSON data based on JsonResume schema
  • 🕸 IndieWeb implementation of microformats2 h-card and h-entry

Full config.toml example 

title = "chringel - Privacy focused theme for Hugo"
languageCode = "en-us"
baseurl = "http://example.com/"
theme = "chringel"
themesDir = "../.."

author = "Christian Engel"
copyright = "Copyright © 2022, Christian Engel, all rights reserved."

pluralizelisttitles = false
paginate = 10
enableEmoji = true

[Params]
    name = "chringel"
    description = "A privacy focused theme for Hugo"

    github_user = "chringel21"
    github_repo = "https://github.com/chringel21/chringel-hugo-theme"
    github_banner = true

    favicon = "favicon.ico"

    # Title to be displayed in header
    headerTitle = 'chringel@dev: ~/$'
    # User image
    titleImage = 'images/index.png'
    # Copyright text displayed in footer
    footerCopyrightText = 'Christian Engel 2022'

# Favicons config
# Get your favicons from https://realfavicongenerator.net/
# Put them in the 'static' folder
[Params.favicons]
  appleTouchIcon = '/apple-touch-icon.png'
  icon32 = '/favicon-32x32.png'
  icon16 = '/favicon-16x16.png'
  manifest = '/site.webmanifest'
  maskIcon = '/safari-pinned-tab.svg'
  msApplicationTileColor = '#5bbad5'
  themeColor = '#ffffff'

# Isso configuration
# https://posativ.org/isso/docs/configuration/client/
[Params.isso]
  enabled = true
  data = "https://comments.exmaple.com/"
  id = "thread-id"
  css = true
  lang = "en"
  replyToSelf = true
  requireAuthor = true
  requireEmail = false
  avatar = true
  avatar-bg = "#f0f0f0"
  jsLocation = "https://comments.example.com/js/embed.min.js"

# Umami configuration
# https://umami.is/docs/install
[Params.umami]
  enabled = true
  websiteId = "1234567-abcd-efgh-0000-abcdefg1234"
  jsLocation = "https://analytics.example.com/umami.js"

# microformat2 h-card configuration
# All params except 'fullName' are optional
[Params.hcard]
  avatar = "/images/index.png"
  fullName = "Christian Engel"
  pronouns = [ "he", "him" ]
  nickname = "chringel"
  showLocation = true
  city = "My Town"
  region = "My State"
  country = "My Country"

[Params.indieweb]
  authorizationEndpoint = "https://indieauth.com/auth"
  tokenEndpoint = "https://tokens.indieauth.com/token"

[Params.webmention]
  webmentionUrl = "https://webmention.io"
  webmentionEndpoint = "/webmention"
  webmentionPingbackEndpoint = "/xmlrcp"

# Social icons to be displayed on the front page
[[menu.social]]
  name = "GitHub"
  url = "https://github.com/chringel21"

[[menu.social]]
  name = "Twitter"
  url = "https://twitter.com/DeEgge"

[[menu.social]]
  name = "RSS"
  url = "http://example.com/index.xml"

# To make purging of CSS classes work in production
[build]
  writeStats = true

# syntax highlight settings
[markup]
  [markup.highlight]
    style = "dracula"

See Also