hugo theme quint
v1.1.0
Quint is a minimalist Hugo theme designed to evoke a clean, airy feel, emphasizing clarity and ease of reading. It features elegant built-in image banners and a lightweight design, making it ideal for displaying your content center stage.
Check out the demo site repository, which you can also use as a starter template for a new site. (Psst... there's a one-click deploy to Netlify button there.)
Live demo here.
Minimalist Design: Focused on content readability with minimal distractions.
Dark and Light Modes: Automatic theme switching that respects the viewer's browser/device settings.
Responsive Layout: Looks great on both mobile and desktop devices.
Included Image Banners: Ships with beautiful minimalist image banners that set the tone for your site. Replace them or add your own anytime.
Site Search: Built-in search on your static site using Lunr.js.
Social Icons: Configurable links to your social media in the footer.
To get started with Quint, you need to have Hugo installed on your machine. For more information on installing Hugo, check out the official Hugo documentation.
For a step-by-step guide to creating a new site with Hugo, read the Quick start.
With Hugo installed, add Quint to your site's themes directory. From your site root, run:
git submodule add https://github.com/victoriadrake/hugo-theme-quint.git themes/quint
Open your Hugo site's configuration file (either hugo.toml, hugo.yaml, or hugo.json) and update the theme parameter to use quint:
hugo.toml:theme = "quint"
hugo.yaml:theme: "quint"
Quint looks great out-of-the-box. Optionally, copy configuration values from yoursite/themes/quint/hugo.toml to your site's configuration (yoursite/hugo.toml) to personalize Quint further.
Run Hugo to generate your site and start up the server. From your site root, run:
hugo server
Navigate to http://localhost:1313 in your web browser to see your site in action with the Quint theme.
To download the latest version of Quint, run:
git submodule update --remote themes/quint
Quint is designed to be simple to customize.
Add your own custom CSS files easily by naming them in your Hugo config:
[params]css = ["css/custom.css"] # Your custom CSS overrides, stored in yoursite/static/
You can override any layout using a file of the same name in your project directory. For example, the file yoursite/layouts/partials/contact.html will override yoursite/themes/quint/layouts/partials/contact.html.
Add or remove sections from the home page by overriding the yoursite/themes/quint/layouts/index.html file. Just create a copy of this file in your project directory (yoursite/layouts/index.html) and remove or add any partials you wish.
If a page or post does not specify an image in the front matter, Quint will display a beautiful image banner by choosing a random image from the directory themes/quint/static/images.
This is accomplished by choosing a random number from 1-10, which corresponds to an image filename. You can add to this collection or replace any image you wish. Just update the maximum random number to match the number of images you have.
[params]numImages = 12 # Number of random images to choose from for banners (in themes/quint/static/images)
Contributions to Quint are welcome! Feel free to submit issues or pull requests on GitHub to improve the theme's functionality or documentation.
Want some ideas to get started? Here's a quick list of features I'd love to see added:
Code block copy buttons
Hugo's Chroma syntax highlighting
Hugo's asset generator with pipelining, fingerprinting, bundling and minification
Multilingual support
Breadcrumb navigation
This theme is released under the MIT License. For more details, see the LICENSE file.
Quint uses the excellent Open Sauce Font.
Device mockup created from deviceframes.com.
