git clone https://github.com/Lednerb/bilberry-hugo-theme.git
If you don’t use git, you can download this theme HERE and extract it 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
Test and configure your site
hugo server -D
Important: 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 config.toml file.
If you want to include the algolia search for your site, you have to follow these steps:
Copy & Paste the generated files into your /static folder
Edit the /layouts/partials/favicon.html file and copy & paste the HTML code from the generated instruction
You have to follow the Quick Start guideline or manually copy the /layouts/partials/favicon.html file from the theme to your site’s /layouts directory. Otherwise the file is missing.
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.html to your site’s layouts/partials/content-type/ folder.
Rename the file to your custom post type. A proper name in the book scenario would be book.html
Customize the file. You can change the icon in the bubble with another Font Awesome Icon. In the book scenario we would change the fa-pencil class to fa-book:
<i class="fas 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 archetypes/ directory.
You can find further information in the official HUGO docs.
If you want to use external images (on another server or installation, etc.) for the featuredImage or in the gallery post type, you can use them by specifying the following in the post’s config within the frontmatter:
To exclude posts from appearing on your blog index, while still being displayed in categories, add excludeFromIndex: true to the post configuration.
The theme also has options for a pinned post. Just uncomment pinnedPost in config.toml, and point it to the post you’d like permanently pinned to the top of the page. The pinOnlyToFirstPage setting lets you control if you’d like to only display the pinned post on the index, or on all pages.
A custom icon can be declared per post, by specifying a font-awesome icon in the post configuration, such as icon: fa-thumb-tack for a pinned post.
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 NPM with Laravel Mix for dependancy management.
If you want to change any colors or fonts, you have follow these steps:
Install this theme to your themes directory
Modify the scss/_variables.scss file to customize your colors. If you want to change the header’s color just edit the $base-color variable
use npm run dev for development and preview purposes and npm run production when you finished the changes
CSS and JS modules
Modules are imported in the order they appear in the list, and immediately after the default Bilberry CSS and JS files are imported.
Adding a Cookie disclaimer
Depending on the type of website you are running with this theme you may also want to add a cookie consent information. The popuplar solution cookie consent can be integrated into the theme by loading the resources as external CSS and JS modules.
Use the configurator on the cookie consent website to generate the required initialization code and add it to a local static/init-cookieconsent.js file e.g.
Then you only need to modify your config.toml to load the local init script and the libraries. You can either download the files and put them in your /static directory as well or reference them directly using a CDN.
Serving the files with your website reduces external dependencies, increases privacy and makes sure your website can be developed in an offline environment as well.
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!