Hugo Themes Logo Hugo Themes
Hugo JuiceBar screenshot

Hugo JuiceBar

Author Avatar Theme by Hotjuicew
Updated: 2 Jan 2026
31 Stars

JuiceBar is a concise, elegan blog theme powered by Hugo.

Github

Categories

Blog Templates & themes

Overview

JuiceBar is a concise and elegant blog theme powered by Hugo. This theme draws inspiration from PaperMod and LoveIt, and gives credit to their excellent work. JuiceBar is fully responsive and supports dark/light mode theming depending on system preferences or user choice. It also offers an easy way to modify the theme with Hugo tooling and includes support for social icons, beautiful CSS animations, an easy-to-use table of contents, highlighting code, custom script shortcode, and giscus comment system.

Features

  • Theming: Supports dark/light mode depending on system preferences or user choice.
  • Easy Theme Modification: Allows easy modification of the theme with Hugo tooling.
  • Fully Responsive: The theme is fully responsive, ensuring a great user experience on all devices.
  • Support for Social Icons: Includes support for displaying social icons on the blog.
  • Beautiful CSS Animations: Adds visually appealing CSS animations to enhance the user experience.
  • Easy-to-Use Table of Contents: Provides a self-expanding table of contents for easy navigation within long articles.
  • Code Highlighting: Automatically highlights code snippets for better readability.
  • Custom Script Shortcode: Allows users to add custom scripts to their blog posts.
  • Giscus Comment System: Supports the giscus comment system for easy integration of comments.

Installation

To install the JuiceBar theme, you have two options:

  1. Install as a clone or submodule. It is recommended to use the latter option. From the root of your Hugo site, run the following command:
git clone https://github.com/RepoOwner/hugo-JuiceBar.git themes/hugo-JuiceBar
  1. After installation, it is recommended to keep the theme up to date by updating the submodule:
git submodule update --remote --merge

To configure the theme, follow these steps:

  1. Copy the provided config file config.toml to your Hugo site’s root directory.

    Note: There are additional configuration options available in the config.toml file located in the exampleSite folder. Feel free to explore and customize these options as well.

  2. Inside the exampleSite folder in the themes/hugo-JuiceBar directory, you will find a config.toml file. Copy this file to the root of your Hugo site.

  3. Edit the copied config.toml file and add your own information. Some fields can be omitted if not needed.

  4. Delete the default archetype file in your site’s archetypes directory:

rm archetypes/default.md
  1. To create an ‘About’ page, run the following command:
hugo new content/about.md
  1. To create your first blog post, run the following command:
hugo new content/post/title.md

Make sure to replace title with the desired title of your blog post.

Summary

JuiceBar is a sleek and responsive blog theme powered by Hugo. With its easy-to-use theming options, customizability, and support for various features such as social icons, code highlighting, and attractive CSS animations, JuiceBar offers a visually appealing and user-friendly blogging experience. The installation process is straightforward, and the theme can be easily configured to match your personal preferences. Whether you are a beginner or an experienced blogger, JuiceBar provides the essential tools and functionalities to create an elegant and engaging blog.