Hugo Themes
Osprey Delight
Osprey Delight is a sugar-free version of the Osprey theme by Toma Nistor functioning as a blazingly fast single page portfolio perfectly suited to show off your awesome work!
- Authors: kdevo
- Minimum Hugo Version: 0.65.0
- Updated: 2020-07-16
- License: Apache License 2.0
- Tags: portfolio gallery minimalist responsive flexbox fast projects onepage fast

Osprey Delight
Osprey Delight is a sugar-free version of the awesome Osprey theme by Toma Nistor for Hugo, a fast static site generator.
It’s a blazingly fast minimalistic single page portfolio perfectly suited to show off your awesome work!
💡 The theme tastes a bit different than the original (hence the light in the name) but also adds great new functionality - hopefully to your delight. Read more about the motivation and differences of the fork here, but also check out the feature summary below!
Features
- Gallery items with different types
normal
: Just as you are used to with the original Osprey themegithub
: Magic GitHub API integration
- Gallery images can optionally be normalized with Hugo’s amazing image processing
- Blazingly fast loading speeds
- Minified JS/CSS/icon bundles using Hugo Pipes
- Lazy-loading of images using lazysizes
- Contact form using Basin with Honeypot protection
- Fancy UX
- Smooth scrolling plus scroll-spy
- Nice CSS animations
- Awesome icons in the footer
- Modular theme, enable features as you want
- Intelli-404: Automatically searches for suitable matches - never loose the link to your content
- SEO-optimized
- High PageSpeed Insights score
- Automatically generated structured data ensures that everyone finds you
In general, many open issues of the original theme have been resolved.
Keep it up
There are multiple ways to show your support if you like this project:
- Start contributing if you are familiar with Hugo themes/templating
- Donate anything to my non-profit organization via various options
- Push the
button - a small gesture with huge effect
Screenshots
Osprey Delight works with gallery items which are organized in a Flexbox grid:
The items can be opened and a modal will show up:
If you’ve used the original Osprey theme before, this looks pretty familiar, right? To taste the differences, it’s best to simply try Osprey Delight out!
Quickstart
The recommended way to setup this theme is to use a git submodule so that further upgrades can be received without any hassle. Invoke the following from your Hugo site directory:
git submodule add https://github.com/kdevo/osprey-delight.git themes/osprey-delight
Now, simply copy the exampleSite directory’s content to your project’s root, it’s a great starting point.
Visit the Hugo docs for more info and general setup of a Hugo site.
Upgrade
Receive the latest features of the theme by pulling the latest changes from master
:
cd themes/osprey-delight
git pull
It is good practice to check the release notes before upgrading (especially before using new major versions).
Configuration and Usage
It’s best if you simply check out the commented exampleSite/config.toml! This theme follows a learning-by-doing approach.
Content files
About section
To create an about section that renders on the home page, run:
$ hugo new about.md
Gallery item
To create a new gallery item, run:
$ hugo new gallery/item-name.md
This is very helpful for the first time since you will get a fully documented file.
⚠️ Please make sure that
item-name
is unique on the whole page because it will be used as an anchor/identifier!
Custom (S)CSS
Place a file named _custom.scss
in your local assets/sass/
folder (create the directories). This will override the theme’s (empty) _custom.scss
which is loaded in the internal main SCSS.
Syntax Highlighting
Limiting external dependencies is important when it comes to privacy as well as performance, therefore only Hugo’s internal Chroma Syntax Highlighting is supported. Here’s how to use it:
- Generate a Chromastyle of your choice (in this case
solarized-dark
) as_custom.scss
in project root:hugo gen chromastyles --style=solarized-dark > _custom.scss
- Move the file to
assets/sass/
folder - Add
pygmentsUseClasses = true
to your config.toml
Refer to the official Hugo documentation for more info.
Data directory (optional)
Optionally, Osprey Delight makes use of the Hugo’s data folder. Currently, the following files can be used to configure the theme in more detail:
- terminal.json: Configure several parameters for optional Termynal (see config.toml for an explanation)
Contact form: Basin
Basin is a free AJAX contact form service. To use Basin, sign up for a free account and create a form. Copy and paste your form’s URL endpoint to the ajaxBasin
config.toml parameter. Select the Submit this form via AJAX
option on your Basin dashboard.
Spambot protection
Under Setup/“Set a Custom Honeypot Field”, enter _anti_spam_honeypot
.
Basin will ignore all messages that contain this specific field. This will work since there is a hidden field that users normally do not use, but spambots will blindly input their data.
Feel free to open an issue if the protection did not work for you.
Contributing
Contributions are welcome! Fork this repo and create a merge request if you implemented a feature or a bug fix that everyone can profit from.
The necessary requirements for merge requests are:
- Theme should be kept leightweight
- Keep it modular: New features should be made optional if possible or if they influence performance in any way
- Document your changes; most importantly your config changes in config.toml (if there are any)
License
This theme is released under the Apache 2.0 license, just like its predecessor. For more information read the license.