Adritian Free Hugo Theme

Adritian Hugo Theme for Personal Websites or Professional minimalistic landing pages

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.

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).

🚀 Improvements on this version:

• removal of jQuery

• upgrade of Bootstrap from v4 to v5

• Hugo assets pipeline support

• some (basic) i18n features

• added more pages/templates (experience, blog)

• upgrade loading performance (100 score in Google Page Speed Insights)

You can see it live at www.adrianmoreno.info (my personal website), as well as in this screenshot for reference:

You can see the source code for my website in github too, as well as the demo site for the theme, adritian-demo (and its code) (a simpler version of the website).

Download

• Clone the repo: git clone https://github.com/zetxek/adritian-free-hugo-theme.git. Download from GitHub.

Installation

Install Hugo

To use adritian-free-hugo-theme you need to install Hugo by following https://gohugo.io/getting-started/installing/.

Setting up

As a pre-requirement, you will need Hugo set up and running. You can follow the official guide for it.

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 autoprefixer from 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 config.toml file 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/

The output for the last command will be something like

adritian-demo git:(master) ✗ hugo server -D
port 1313 already in use, attempting to use an available port
Watching for changes in /Users/adrianmorenopena/Projects/adritian-demo/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /Users/adrianmorenopena/Projects/adritian-demo/hugo.toml
Start building sites …
hugo v0.122.0-b9a03bd59d5f71a529acb3e33f995e0ef332b3aa+extended darwin/arm64 BuildDate=2024-01-26T15:54:24Z VendorInfo=brew

WARN  found no layout file for "html" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                   | EN
-------------------+------
  Pages            |   5
  Paginator pages  |   0
  Non-page files   |   0
  Static files     | 114
  Processed images |   4
  Aliases          |   0
  Sitemaps         |   1
  Cleaned          |   0

Built in 617 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:53031/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Additional configuration

Contact form

(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.

Blog

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.

Experience

It can be used to render job experience of projects. Each experience/project has a duration, job title, company name, location and description/excerpt as well as a longer text.

Troubleshooting

This theme is a version of the one found on my website adriamoreno.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).

Getting help

The project is offered "as is", and it's a hobby project. Support is given whenever life allows - you can create an issue create an issue so anyone else could also help, or the author.

Showcase

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!

License

• 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)