Guide on

Create your own version of the site

Tue, 11 Feb 2025 14:38:33 +0200

This article is a guide to help you create your own version of the site using Adritian. It will cover the main steps to get started with the theme, and how to customize it to your needs.

Creating a site

This theme is for the content management system Hugo, so that will be a pre-requirement. Make sure that you install the extended version of Hugo, as the theme uses SCSS for styling, as well as image optimization.

Search improvements: multilingual, reliable, and configurable

Thu, 01 Jan 2026 09:00:00 +0000

The search functionality in the theme is powered by Fuse.js and runs entirely in the browser. This post explains how it works, how the search index is built, and how to customize it for multilingual and subdirectory deployments.

How search works

Search is client-side:

Hugo generates a JSON index (index.json) that contains the title, plain content, tags, categories, and other metadata for each page.
The search page loads fuse.js and downloads the JSON index.
Fuse.js performs a fast in-browser search and renders the results.

Because the index is a normal Hugo output, it follows your baseURL and language configuration automatically.

Responsive Images

Sat, 15 Mar 2025 10:00:00 +0000

The Adritian theme includes a responsive-image shortcode that generates optimized <picture> elements with WebP conversion, multiple srcset widths, and lazy loading.

Basic usage

Place your images in the assets/ directory and reference them with the shortcode:

The shortcode above produces a <picture> element with:

WebP srcset at 400w, 800w, and 1200w (up to the original image width)
Original format srcset at the same widths
Lazy loading via loading="lazy" and decoding="async"
CLS prevention via width and height attributes

Custom sizes hint

Use the sizes parameter to give the browser a layout hint for which srcset entry to pick:

New Theme Features Demo

Thu, 20 Feb 2025 10:00:00 +0000

This post demonstrates the new features that have been added to the Adritian Hugo theme to make it more feature-complete and competitive with other popular Hugo themes.

Overview of New Features

The Adritian theme now includes several enhancements that are commonly found in modern Hugo themes for personal websites and portfolios.

At the end of each blog post, you’ll now see a section showing related posts based on shared tags and publish dates. This helps visitors discover more relevant content on your site.

Theme shortcodes

Fri, 14 Feb 2025 14:38:33 +0200

Shortcodes are a convenient functionality of Hugo, allowing you to embed templates or layouts within other content.

Some of the example built-in shortcodes are Instagram posts, YouTube videos, QR codes, etc. You can find the full list in the official docs.

The theme provides custom shortcodes to allow you to customize your landing page as you want:

toc: Generates a styled table of contents from page headings.
education-list: Displays a list of educational qualifications.
experience-list: Shows a list of professional experiences.
platform-links: Embeds links to various platforms with icons.
newsletter-section: Adds a section for newsletter subscription.
link: Creates a hyperlink with an icon.
experience-section: Inserts a detailed experience section.
contact-section: Adds a contact information section, with a customizable form and information.
client-and-work-section: Displays a section for clients and work.
about-section: About section, with image, buttons for call to action and image.
testimonial-section: Adds references from customers, colleagues, etc.
showcase: two-column block with a full-width image to the left, and a text snippet to the right. Great for a call to action or introduction of the person (assuming it’s a personal website).
text-section: utility shortcode used to render text in some parts of the theme where it would otherwise be full-width, appearing “too floaty”. See the github issue #260 for context.
spacer: Adds vertical spacing before the next element.
responsive-image: Renders a responsive <picture> element with WebP srcset and lazy loading.

The shortcodes can be customized with different arguments:

Other installation methods

Tue, 11 Feb 2025 14:38:33 +0200

This is a guide that extends the default instructions offered in the theme readme.

Manual configuration

If you prefer to manually set your site, you need to replace the contents of your config file (hugo.toml) file by these:

hugo.toml configuration

baseURL = "<your website url>"
languageCode = "en"

[module]
[module.hugoVersion]
# We use hugo.Deps to list dependencies, which was added in Hugo 0.92.0
min = "0.92.0"

[[module.imports]]
path="github.com/zetxek/adritian-free-hugo-theme"

## Base mounts - so your site's assets are available
 [[module.mounts]]
 source = "archetypes"
 target = "archetypes"

 [[module.mounts]]
 source = "assets"
 target = "assets"

 [[module.mounts]]
 source = "i18n"
 target = "i18n"

 [[module.mounts]]
 source = "layouts" 
 target = "layouts"

 [[module.mounts]]
 source = "static"
 target = "static"

# The following mounts are required for the theme to be able to load bootstrap
# Remember also to copy the theme's `package.json` to your site, and run `npm install`
[[module.mounts]]
 source = "node_modules/bootstrap/scss"
 target = "assets/scss/bootstrap"

[[module.mounts]]
 source = "node_modules/bootstrap/dist/js"
 target = "assets/js/bootstrap"

[[module.mounts]]
 source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
 target = "assets/js/vendor/bootstrap.bundle.min.js"

## Optional, if you want print improvements (to PDF/printed)
[[module.mounts]]
source = "node_modules/bootstrap-print-css/css/bootstrap-print.css"
target = "assets/css/bootstrap-print.css"

[params]

 title = 'Your website title'
 description = 'Your website description'
 sections = ["showcase", "about", "education", "experience", "client-and-work", "testimonial", "contact", "newsletter"]

 # If you want to display an image logo in the header, you can add it here
 # logo = '/img/hugo.svg'
 homepageExperienceCount = 6

 [params.analytics]
 ## Analytics parameters.
 ### Supported so far: Vercel (Page Insights, Analytics)
 ### And Google (Tag Manager, Analytics)

 # controls vercel page insights - disabled by default
 # to enable, just set to true
 vercelPageInsights = false
 vercelAnalytics = false
 
 # google analytics and tag manager. to enable, set "enabled" to true
 # and add the tracking code (UA-something for analytics, GTM-something for tag manager)
 [params.analytics.googleAnalytics]
 code = "UA-XXXXX-Y"
 enabled = false
 [params.analytics.googleTagManager]
 code = "GTM-XXXXX"
 enabled = false

[build]
 [build.buildStats]
 disableClasses = false
 disableIDs = false
 disableTags = false
 enable = true

[params.languages.selector.disable]
 footer = false

[languages]
 [languages.en]
 disabled = false
 languageCode = 'en'
 languageDirection = 'ltr'
 languageName = 'English'
 title = ''
 weight = 0

 [languages.en.menus]
 [[languages.en.menus.header]]
 name = 'About'
 URL = '#about'
 weight = 2
 [[languages.en.menus.header]]
 name = 'Portfolio'
 URL = '#portfolio'
 weight = 3
 # [[languages.en.menus.header]]
 # name = "Experience"
 # URL = "#experience"
 # weight = 4

 [[languages.en.menus.header]]
 name = "Blog"
 URL = "/blog"
 weight = 5

 [[languages.en.menus.header]]
 name = "Contact"
 URL = "#contact"
 weight = 6

 [[languages.en.menus.footer]]
 name = "About"
 URL = "#about"
 weight = 2

 [[languages.en.menus.footer]]
 name = "Portfolio"
 URL = "#portfolio"
 weight = 3

 [[languages.en.menus.footer]]
 name = "Contact"
 URL = "#contact"
 weight = 4


 [languages.es]
 disabled = false
 languageCode = 'es'
 languageDirection = 'ltr'
 languageName = 'Español'
 title = ''
 weight = 0
 [[languages.es.menus.header]]
 name = 'Sobre mi'
 URL = '/es/#about'
 weight = 2
 [[languages.es.menus.header]]
 name = 'Portfolio'
 URL = '/es/#portfolio'
 weight = 3

 # [[languages.es.menus.header]]
 # name = "Experiencia"
 # URL = "/es/#experience"
 # weight = 4

 [[languages.es.menus.header]]
 name = "Blog"
 URL = "/es/blog"
 weight = 5

 [[languages.es.menus.header]]
 name = "Contacto"
 URL = "/es/#contact"
 weight = 6

 [[languages.es.menus.footer]]
 name = "Sobre mi"
 URL = "/es/#about"
 weight = 2

 [[languages.es.menus.footer]]
 name = "Portfolio"
 URL = "/es/#portfolio"
 weight = 3

 [[languages.es.menus.footer]]
 name = "Contact"
 URL = "/es/#contact"
 weight = 4

 [languages.fr]
 disabled = false
 languageCode = 'fr'
 languageDirection = 'ltr'
 languageName = 'Français'
 title = ''
 weight = 0

 [languages.fr.menus]
 [[languages.fr.menus.header]]
 name = 'About'
 URL = '#about'
 weight = 2
 [[languages.fr.menus.header]]
 name = 'Portfolio'
 URL = '#portfolio'
 weight = 3
 # [[languages.fr.menus.header]]
 # name = "Experience"
 # URL = "#experience"
 # weight = 4

 [[languages.fr.menus.header]]
 name = "Blog"
 URL = "/blog"
 weight = 5

 [[languages.fr.menus.header]]
 name = "Contact"
 URL = "#contact"
 weight = 6

 [[languages.fr.menus.footer]]
 name = "About"
 URL = "#about"
 weight = 2

 [[languages.fr.menus.footer]]
 name = "Portfolio"
 URL = "#portfolio"
 weight = 3

 [[languages.fr.menus.footer]]
 name = "Contact"
 URL = "#contact"
 weight = 4

# Plugins
[params.plugins]

 # CSS Plugins
 [[params.plugins.css]]
 URL = "css/custom.css"
 [[params.plugins.css]]
 URL = "css/adritian-icons.css"
 ## Optional, if you want print improvements (to PDF/printed)
 [[params.plugins.css]]
 URL = "css/bootstrap-print.css"
 
 # JS Plugins
 [[params.plugins.js]]
 URL = "js/rad-animations.js"
 [[params.plugins.js]]
 URL = "js/sticky-header.js"
 [[params.plugins.js]]
 URL = "js/library/fontfaceobserver.js"

 # SCSS Plugins
 [[params.plugins.scss]]
 URL = "scss/adritian.scss"


# theme/color style 
[params.colorTheme]

## the following configuration would disable automatic theme selection
# [params.colorTheme.auto]
# disable = true
# [params.colorTheme.forced]
# theme = "dark"

## the following parameter will disable theme override in the footer
# [params.colorTheme.selector.disable]
# footer = true


## by default we allow override AND automatic selection

[params.blog]
layout = "default" # options: default, sidebar
sidebarWidth = "25" # percentage width of the sidebar
showCategories = true
showRecentPosts = true
recentPostCount = 5
listStyle = "summary" # options: simple, summary

Get the module: hugo mod get -u
Execute hugo mod npm pack - this will generate a package.json file in the root folder of your site, with the dependencies for the theme.
Execute npm install - this will install the dependencies for the theme (including bootstrap)
(Optional, to override the defaults) Create a file data/homepage.yml with the contents of the exampleSite/data/homepage.yml file, and customize to your needs (note: this file is not included in your theme if you use hugo modules, download it manually from the repository)

Traditional Installation (as git submodule)

If you prefer not to use Hugo Modules, you can still install the theme as a git submodule. The guide is very similar to official “Quick Start”, just changing the theme URL in the git submodule add command: