chringel - Privacy focused theme for Hugo using TailwindCSS
- Author: Christian Engel
- GitHub Stars: 25
- Updated: 2022-08-25
- License: MIT
- Tags: Blog
chringel - Privacy focused theme for Hugo 🕵️
Based on the awesome Hugo Starter Theme with Tailwind CSS. Go check it out! 🚀
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.
Make sure to install
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.
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.tomlto 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
- 🌝 /🌚 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
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"