Skip to content
master
Switch branches/tags
Code
This branch is even with master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Osprey Delight Logo Nelify Continous Deployment Status

GitHub Release Hugo Minimum Version Project Status

Overview

Osprey Delight is the free-minded artist's choice for a clutter-free and blazingly fast single-page portfolio.

It's perfectly suited to show off your awesome work!

It tastes a bit different than the original great Osprey theme and adds awesome new functionality to your delight.

Showcase

Check out how Osprey Delight performs in the real-world:

  • Protonaut Music - Musician and top contributor whose highly individualized site got kickstarted by Osprey Delight.
  • KDEVO - The maintainer's site. It wouldn't be me if I would not run this theme personally. It's basically in the vanilla version.

Features

  • Single page made out of extensible section building blocks
    • About: Introduce yourself
    • Gallery: Show your work using a grid-based gallery with interactive modal boxes
    • Blog: Lightweight blog features
    • Contact: Contact form with Basin support and built-in spambot protection
  • Images are asset-driven. Use your high-quality images without the hassle of manually resizing them!
    • Image lazy-loading via lazySizes
    • Blur-up technique using automatic low-quality image placeholders (LQIP)
  • SEO-optimized
  • Delightful UX
    • Smooth scrolling plus scroll-spy
    • Awesome social icons in footer
    • Automatically fetches GitHub repo data for you
    • Sane fallbacks for No-Script/No-JS users
    • Intelli-404: Automatically searches for suitable matches - never loose the link to your content
  • Heavily customizable - no need to maintain a fork!

In general, many open issues of the original theme have been resolved.

Contribute

There are multiple ways to show your support if you like this project:

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 fully commented config file. This theme follows a learning-by-doing approach.

Images

This theme is asset-driven! It "knows" how to handle your precious assets, and there usually is no need for manual resizing. Therefore, the recommended approach for images is to provide high-res images in the assets directory.

The following table shows some guidelines regarding the assets:

Image Type Config Key Minimum Width Note
Logo logoBig (config.yaml) 200px Transparent, minimum margin top/bottom
Navbar-Logo logoSmall (config.yaml) 96px Transparent, small margin top/bottom, prefer square format
Gallery image (content/gallery/*) 400px Transparent, medium margin top/bottom/left/right, prefer square format
Background background (config.yaml) 1200px Optional, use a high-quality JPG

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!

Contact form

Basin is a free AJAX contact form service that is used by this theme. To use set it up, sign up for a free account and create a form. Copy and paste your form's URL endpoint to the ajaxBasin config.yaml parameter. Select the Submit this form via AJAX option on your Basin dashboard.

Basin AJAX setup

Spambot protection

Under Setup/"Set a Custom Honeypot Field", enter _anti_spam_honeypot. Basin will ignore all messages that contain this specific field. This should work since there is a hidden field that users normally do not use, but spambots will blindly input their data.

Basin Anti Spambot

Next

Help wanted

This README probably needs some documentation improvements for the latest features. Any PR regarding this is welcome and please also check out how to contribute!

Customize it

Want to have full control over appearance? Check out how to customize the theme more granularly.