Chaschper

History

Chaschper is based on Casper Two, a port of the Casper, the default personal blogging theme for Ghost. A legacy version (v1.x) has already been ported to Hugo years ago.

I simplified aspects of the Casper theme (removed the two different single page styles, cleaned up partials and tried to organize things in a way that suited me better).

In addition, Chaschper features additional features:

• IndieWeb integration
• IndieAuth integration
• Webmention.io integration
• Optional Matomo analytics (see installation instructions)
• Image Galleries (see content/galleries)
• Responsive images using the {{< figure >}} shortcut (this replaces the regular Hugo figure shortcut)

Theme Demo

• invisible.ch

Installation

Inside the folder of your Hugo site run:

$ cd themes
$ git clone https:/jcfischer/hugo-chaschper.git chaschper

or if you plan to use netlify to host your site

$ git submodule add https:/jcfischer/hugo-chaschper.git themes/chaschper

For more information read the official setup guide of Hugo.

Matomo setup

If you want to use Matomo, install the Matomo theme:

$ git submodule add https:/holehan/hugo-components-matomo.git themes/matomo

Sample Configuration

The following config.toml is used for the demo site.

baseurl         = "https://invisible.ch/"
title           = "Invisible - Musings. Music. Code. Art"
theme           = [ "chaschper", "matomo" ]
languageCode    = "en-US"
disqusShortname = ""
paginate        = 6
canonifyurls    = true
assetDir        = "static"


[author]
    name    = "Jens-Christian Fischer"
    nick    = "jcfischer"
    email   = "[email protected]"
    avatar  = ""
    description = "Maker. Musician"

[params]
  title       = "Invisible"
  domain      = "invisible.ch"
  subtitle    = "Musings. Music. Code. Art"
  copyright   = "© 2018"

  cover       = "img/blog-cover.jpg"
  description = "Portfolio and Blog of Jens-Christian Fischer"
  metaDescription = ""
  googleAnalytics = ""
  customCSS = []
  RSSLink = ""
  showSubcribe = true
  show_reading_time = true

  mainSections = ["musings", "music", "code", "art"]

  twitterName = "jcfischer"
  fbName = "JensChristianFischer"
  mastodonName = "mastodon.green/@jcfischer"
  githubName = "jcfischer"
  linkedinName = "jenscfischer"
  keybaseName = "jcfischer"


  pageNotFoundTitle = "404 - Page not found"


[permalinks]
  posts = "/:year/:month/:slug/"

[[menu.main]]
  name = "Musings"
  url = "/categories/musings"
  weight = 200

[[menu.main]]
  name = "Music"
  url = "/categories/music"
  weight = 100

[[menu.main]]
  name = "Code"
  url = "/categories/code"
  weight = 99

[[menu.main]]
  name = "Art"
  url = "/categories/art"
  weight = 95

[[menu.main]]
  name = "About"
  url = "/about"
  weight = 90


# These are parameters used for indieweb identity. You should set these along
# with the above email/social network parameters.
[params.IndieWeb]
    Country = "Switzerland"
    City = "Zurich"
    webmention = "invisible.ch"

[params.matomo]
    url = "https://matomo.invisible.ch"
    id = 1

[params.matomo.track]
    button = "Enable Analytics"
    message = "Your visits will be logged."
[params.matomo.block]
    button = "Disable Analytics"
    message = "Your visits will *not* be logged."

Sample content structure is given in the exampleSite folder. Have fun!

Search

This theme has a search function. It uses DuckDuckGo for a site specific search (be sure to set the domain in config.toml)

To get DuckDuckGo to index your domain, submit it to the Yandex Webmaster Tools - after a few days, DuckDuckGo will have picked up the domain and the pages indexed by Yandex.

Image Galleries

Create a directory called "galleries" in your content directory. Add a directory for each gallery and place the images in it. Add index.md (otherwise it will not work) with a description (optional) and the following front matter:

---
title: "Scuol 2018-10-25"
date: 2018-10-25T15:26:46+01:00
tags: ["scuol", "autumn"]
type: "gallery"
---

A wonderful, sunny day in Scuol in autumn. Pictures taken during a walk down to the Inn river.

The galleries will mix in with your regular posts and there is a /galleries path that lists all of them in reverse chronological order.

Uses Fluidbox to display images.

License

This theme is released under the MIT license. For more information read the License.