https://github.com/aarol/hugo-theme-groovy
https://github.com/aarol/hugo-theme-groovy
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/aarol/hugo-theme-groovy
- Owner: aarol
- License: mit
- Created: 2022-03-27T14:35:44.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-01-19T19:19:45.000Z (over 1 year ago)
- Last Synced: 2025-01-19T20:27:39.241Z (over 1 year ago)
- Language: HTML
- Size: 494 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Groovy theme for Hugo
Dark theme inspired by the Gruvbox color scheme
## PREVIEW:
The theme is made to be simple and can be extended easily without unnecessary build steps.
This theme requires hugo **extended** 0.124 or higher because it needs Hugo's built in sass compiler and Webp encoder.
## Getting started
You can clone this repository to test out the theme, but you should fork it instead if you want to make modifications.
```sh
git submodule add https://github.com/aarol/hugo-theme-groovy.git themes/groovy
```
In your `config.toml`:
```toml
baseURL = '/'
languageCode = 'en-us'
theme = 'groovy'
title = ''
[params]
subtitle = 'A programming blog/personal site'
[languages]
[languages.en]
languageCode="en"
languageName="English"
[menu]
[[menu.main]]
identifier = "about"
name = "About"
url = "/about"
[[menu.main]]
identifier = "posts"
name = "Posts"
url = "/"
[[menu.main]]
identifier = "projects"
name = "Projects"
url = "/projects"
```
Create a new post:
```bash
hugo new posts/my-first-post.md
```
To insert images, create a directory /content/posts/{slug}, then rename /content/posts/{slug}.md to /content/posts/{slug}/index.md
Then adding images is as simple as copying them to the same directory and linking with the markdown image syntax.
## Features
- Syntax highlighting with the Gruvbox theme. To enable, copy this to your site's `config.toml`:
```toml
[markup]
[markup.highlight]
codeFences = true
guessSyntax = true
tabWidth = 4
noClasses = false
```
- Math rendering using Katex: To enable, use the math parameter in frontmatter.
```yaml
---
math: true
---
```
- Mermaid graphs: To enable, create a codeblock with the language "mermaid":
````markdown
```mermaid
graph TD;
A-->B;
A-->C;
```
````
- Images are automatically converted to webp for better compression and displayed when supported by the browser.
- Text in the 'title' section of images is put below the image as a caption.
- Automatically generates OpenGraph preview thumbnails