See it live at adritian-demo.vercel.app (simple demo site, vanilla installation) or adrianmoreno.info (my personal site, running on this theme)
This free Hugo theme is a fork of Raditian Theme - a great Hugo theme originally created by Radity. It's called Adritian because I, the author, am called Adrián - and if you shuffle Raditian and Adrián letters you get... Adritian 😅
It focuses on accessibility, high performance and usability. It's extendable by adding your own styles or content types, with a solid foundation.
The templates are based on Bootstrap (so they're responsive and mobile-first), and the main changes I have made have been upgrades on the web performance and accessibility of the template.
Some of the best applications for the theme are for minimalistic websites, single-page applications, and personal portfolios. It has a contact form you can customize to your mail address without setting up a backend (https://formspree.io).
🚀 What can you expect:
-
fast, minimalistic code (no jQuery)
-
Bootstrap from v5 as css framework
-
Hugo assets pipeline support
-
Multi-language (i18n) support
-
Support for custom content types (experience, blog)
-
Very high performance (100$ score in Google Page Speed Insights)
-
Dark theme support (based on system/browser settings)
-
Support for Vercel Speed Insights (via the parameter
vercelPageInsightsinhugo.toml, disabled by default) -
Support for Vercel Analytics (via the parameter
vercelAnalyticsinhugo.toml, disabled by default)
You can see it live at www.adrianmoreno.info (my personal website), as well as in this screenshot for reference:
You have two reference implementations of the theme:
- A full-featured site, my personal website in github too
- A simpler demo site for the theme, adritian-demo (and its code).
- Clone the repo:
git clone https://github.com/zetxek/adritian-free-hugo-theme.git. Download from GitHub.
To use adritian-free-hugo-theme you need to install Hugo by following https://gohugo.io/getting-started/installing/.
As a pre-requirement, you will need Hugo set up and running. You can follow the official guide for it.
The theme has been tested with the version 0.136 of Hugo. If you get errors regarding missing functionalities, check if you have the last version of Hugo available.
Note: the theme has not been migrated to Hugo Modules yet. To install it, you need to set it up by copying the theme files (either as a sub-module or by copying the files). You can follow these older instructions or the next ones as help:
- Create a new Hugo site (this will create a new folder):
hugo new site <your website's name> - Enter the newly created folder:
cd <your website's name>/ - Install PostCSS: execute
npm i -D postcss postcss-cli autoprefixerfrom the top-level site folder [check Hugo's official docs]. - Clone the adritian-free-hugo-theme:
git clone https://github.com/zetxek/adritian-free-hugo-theme.git themes/adritian-free-hugo-theme. - Replace the
hugo.tomlfile in the project's root directory with themes/adritian-free-hugo-theme/exampleSite/config.toml:cp themes/adritian-free-hugo-theme/exampleSite/hugo.toml hugo.toml(executed from the website root folder) - Start Hugo with
hugo server -D - 🎉 The theme is alive on http://localhost:1313/
Optional: if you want to preview the theme with the example content before deciding if it's what you are looking for, you can run the theme with the example content:
cd themes/adritian-free-hugo-theme/exampleSite
hugo server --themesDir ../..
The output for the serve command will be something like
adritian-demo git:(master) ✗ hugo server -D
Watching for changes in /Users/adrianmorenopena/tmp/theme-test/themes/adritian-free-hugo-theme/{archetypes,assets,data,exampleSite,i18n,layouts,static}
Watching for config changes in /Users/adrianmorenopena/tmp/theme-test/themes/adritian-free-hugo-theme/exampleSite/hugo.toml
Start building sites …
hugo v0.136.2+extended darwin/arm64 BuildDate=2024-10-17T14:30:05Z VendorInfo=brew
| EN | ES | FR
-------------------+----+----+-----
Pages | 24 | 10 | 8
Paginator pages | 0 | 0 | 0
Non-page files | 0 | 0 | 0
Static files | 90 | 90 | 90
Processed images | 24 | 0 | 0
Aliases | 1 | 0 | 0
Cleaned | 0 | 0 | 0
Built in 1788 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
menu-language.mp4
The theme implements the internationalization (i18n) system by Hugo, to enable multilingual sites.
See the content in i18n to edit the translations, and the configuration hugo.toml to define your active languages. The example site has 3 enabled languages (en for English, es for Spanish and fr for French).
You can add additional languages, or disable the provided ones (by setting disabled to true on the languages you don't need).
The introduction of i18n support was done in the version v1.3.0 and it has breaking changes due to the way in which the content was managed. You can read about the upgrade path in upgrading.md.
The theme has a dark mode, that is enabled automatically based on system settings:
(optional, if you want to use the contact form) edit line 212 in your homepage.yml file, to customize your mail address. Sign up in formspree to redirect mails to your own.
To use the blog, you can use the content type "blog", and render it in the URL /blog.
You can add a menu link to it in hugo.toml.
The posts will be markdown files stored in the content/blog folder.
This functionality and content is especially suited for personal professional sites, showcasing the work experience:
It can be used to render job experience, projects or clients. Each experience/project has a duration, job title, company name, location and description/excerpt as well as a longer text.
The experience is managed through a specific content type (see content/experience for an example).
You can use hugo new experience/experience-name.md (replacing experience-name by the name of the job experience).
This will create the content in the content/experience folder, following the experience archetype.
The following fields are used from the file's Front Matter: title, jobTitle, company, location, duration.
You can find a sample experience file content here:
---
date: 2007-12-01T00:00:00+01:00
draft: false
title: "Job #1"
jobTitle: "Junior Intern"
company: "Internet Affairs Inc. "
location: "Stavanger, Norway"
duration: "2022-2024"
---
### Fixing the world, one byte at a time
The beginning of a great career.
The experience is displayed in several locations:
- Homepage, with a limited number of experiences (controlled by the config parameter
homepageExperienceCountin the filehugo.toml). The summary is displayed. - Experience page, in
/experience, with a list of all experiences (no limit). The summary is displayed for each item. - Individual experience page, where all details are displayed
This theme is a version of the one found on my website adrianmoreno.info. If you run into trouble, you can check the code on my website for reference.
If you have improvements for the theme, you are very welcome to make a PR if you are able 💕. Otherwise - see below for how to get help (and maybe help others with the same problem).
The project is offered "as is", and it's a hobby project that powers my personal website. Support is given whenever life allows - you can create an issue create an issue so anyone else could also help, or the author.
Have you used the theme in your website? Send a PR to add it to the list for inspiration! (Extra points if the repo is open source :-)
- demo site
- adrian moreno's personal site
- add your website here!
- Copyright 2020 Radity (https://radity.com/), 2022 Adrián Moreno Peña (https://www.adrianmoreno.info)
- Licensed under MIT (https://github.com/zetxek/adritian-free-hugo-theme/blob/master/LICENSE)