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.
# 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
- Don't forget to edit your
config.tomlto use your new theme
# config.toml
theme = "chringel-hugo-theme"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-postIf 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'`.mdThis will create a note in your content folder at content/notes/YYYY/mm/dd/HHMM.md.
- 🌝 /🌚 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-cardandh-entry
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"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 autoprefixerChange into the theme's folder and install the dependencies.
cd themes/chringel
npm installMake 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 = trueRun the hugo server using the following command:
HUGO_THEME_DEVELOPMENT=true hugo server --disableFastRender --buildDrafts --buildFutureThe theme will pick up the environment variable and use Hugo's PostCSS pipe to build CSS files.
Check out the Tailwind CSS docs.
postcss assets/css/styles.css --config assets/css/postcss.config.js > assets/css/build.css
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent