Bilberry Hugo Theme
Bilberry is an adaption that comes with different optimizations and little features as listed below.
Click here for a DEMO / PREVIEW.
If you like this theme and/or use it for commercial purposes, please support me!
Table of Contents
- Quick Start
- Custom 404 site
- Custom Post Types
- Custom colors and fonts
- CSS and JS modules
- Support and Discussions
- Create a new hugo site
hugo new site my-new-blog
- Install this theme
cd my-new-blog/themes git clone https://github.com/Lednerb/bilberry-hugo-theme.git
If you don't use git, you can download and extract this theme manually into the themes folder.
Please ensure that the folder is renamed to "bilberry-hugo-theme"
- Copy example content and default config file for a quick start
cp -r bilberry-hugo-theme/exampleSite/* ../
- Remove the default archetype
cd ../ rm archetypes/default.md
- Test and configure your site
hugo server -D
Do NOT change the name of the theme folder.
If you rename the folder the different post types will not work.
To configure your site according to your needs, just open the
config.toml file in your project folder and adjust the settings.
All options you can and should customize are commented so it should be no problem for you to get it done.
Bilberry includes a convenient search functionality for your site. You can test it on the demo site. Just click on the navigation bar at the top right of the header.
If you do not want to use the search functionality set
algolia_search = false in your
If you want to include the algolia search for your site, you have to follow these steps:
- Register for a free Algolia Search account at https://www.algolia.com/
- Add a
New Application. You can choose the
- Switch over to
Indicesand create a new one.
- Switch over to
API Keysand copy your
Search-Only API Keyand chosen
Index nameto your
- Ensure that
algolia_search = trueis set.
- Check the next section Update the search index, follow the steps and come back again
- Back in your algolia index, switch to
Attributes for facetingoption.
Update the search index
You have to repeat this step every time you change a post or publish a new one to update the search index.
- Publish your changes via the
- Head over to the
public/index.jsonfile and copy everything in there
- Login to your algolia account, open your index and click at
Add records manually
- Paste the copied text from the
If you want to start a search on your blog simply type
s and the search menu will open.
To close it again you can enter
esc at any time.
Bilberry comes with a bunch of predefined post types.
Available post types are
To use a post type, just create new content via the hugo command.
hugo new quote/edward-snowden-about-privacy.md
article is the default post type if you want to use another type of content as the predefined.
Just discover the entries from the
exampleSite folder to get an overview of the great possibilities Bilberry provides ;-)
Pages and External Links
The post type
page is the only one that appears in the top navigation (when you click on the navigation button on the top right).
page can be a static page (about me or impress site) or a link to another page as it is used in the demo to link to the Bilberry GitHub repository.
The post type
link always links to an external site and can be used with or without a background image.
Manual Summary Breaks
You can influence the summary outpot on the listing pages (such as the home page or the category or tag pages) in three ways:
You don't set a manual summary break.
Hugo will care for you and generates a summary as well as a Continue reading link.
You set a manual break via
Just write your content and if you want to break use the code snippet to tell Hugo to break here.
You want to display the full article without a Continue reading link
In this case, set the option
noSummary: truein the header area (Front Matter) of your
If you want to enable the functionality for your users to write comments below your articles, you can register for a free Disqus account.
Just create a new site and copy your site's short name to the
config.toml file at
You can manage and moderate the comments either on your website or at the disqus management panel.
Bilberry is optimized for desktop and mobile devices (tablets and smartphones).
Permanent Top Navigation
If you want to permanently display the top navigation with the algolia search bar and the
page entries, you can set the
permanentTopNav option to
true in your site's config file.
Note that on mobile devices the navigation will still be collapsed because otherwise, the navigation menu hides the essential parts of your site.
If you want to add MathJAX markup support, set parameter
enable_mathjax option to
true in your site's config file.
Custom 404 site
If you want to customize your 404 site, copy the
themes/bilberry-hugo-theme/layouts/404.html to your local
layouts/404.html and edit the file.
You can quickly change the message and / or the icon class for example. Otherwise, you can replace the whole content with your 404 site markup.
Custom Post Types
If you want to add a custom post type to change the icon in the bubble on the left column you can simply create those as you wish.
If you want to create a
book post type, for example, you can do the following:
Copy the default
themes/bilberry-hugo-theme/layouts/partials/content-type/article.htmlto your site's
Rename the file to your custom post type. A proper name in the book scenario would be
Customize the file.
You can change the icon in the bubble with another Font Awesome Icon.
In the book scenario we would change the
<i class="fa fa-fw fa-book"></i>
Create your new posts with the post type prefix:
hugo new book/a-very-cool-book.md
If you want to use custom Front Matter variables, create a
book.md archetype in your
You can find further information in the official HUGO docs.
If you want to change the default post types (e.g., don't use the pencil icon on the
article or default type, but another one) copy the original file to your local
layouts/partials/content-type/ directory and edit it there.
Otherwise, your changes would be overwritten when you update to the latest theme version.
Custom colors and fonts
Bilberry uses SCSS for styling and a Webpack-based workflow to dynamically create the combined and compresses production-ready stylesheets.
If you want to change any colors or fonts, you have follow these steps:
- Install this theme to your
- Install yarn
yarn installto install all necessary dependencies
- Modify the
scss/_variables.scssfile to customize your colors.
If you want to change the header's color just edit the
- After finishing your changes, run
yarn run productionto produce your customized stylesheets
If you 're going to change the default fonts (e.g., lack of support for Cyrillic languages), you can use some of the Google Fonts.
Select your favorite fonts and copy the
@import url('...'); directive to the
Now you have to modify the
scss/_variables.scss and set the
$content-font to the selected ones.
Follow the steps 1-7 to implement your custom font to your site.
Note: You don't have to upload the
node_modules folder to your webspace, this is only created and needed to generate your customized stylesheets.
CSS and JS modules
(css|js)_modules list parameter. Modules can be specified either relative to the
static directory (e.g.
exampleSite/static/css/custom.css) or as a URL.
Modules are imported in the order they appear in the list, and immediately after the default Bilberry CSS and JS files are imported.
This theme has support for multi-language sites and therefore translations for 10+ languages. If you want to contribute and improve this theme for all users, please check our translation project at POEditor
Feel free to submit a request for a new language or improve existing ones!
Bilberry is inspired by the WordPress theme Lingonberry, created by Anders Norén.
Bilberry is a theme for the great HUGO static site generator.
Support and Discussions
If you enjoy this theme and want to stay up to date or just want to say thanks, have a look at this Discord Channel:
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
The Bilberry Theme for HUGO is licensed under the MIT license.