· · · ·

Claris is a theme for Hugo, the world’s fastest static website generator.

• Mobile-first: Claris works great on mobile devices as well as on laptops, iMacs, and desktop PCs.
• Responsive: Adapts its layout and design to the device and orientation of the user.
• Modular: Implemented as a Hugo module, which is just a Go module.

iPhone 12 Pro (390x844px)

WXGA 1280x720px

Follow these steps to start using Claris for your Hugo site.

Ensure that you have Hugo installed on your system. You need Hugo’s extended version (0.121.0 or later). Install it from the official Hugo website.

To use Claris as a Hugo module, create and initialize your Hugo site (if you haven't already) in three steps:

While you could let Hugo initialize the site using hugo new site your-hugo-site, this will add only two files, both of which we will need to delete immediately.

mkdir your-hugo-site
cd your-hugo-site

Determine, where you will put the repository of your Hugo site. The URL of the repository minus the scheme (https://) will be the identifier of your site's Hugo module.

For example, if you aim to put your site on GitHub and your GitHub user name is your-username, you would run:

hugo mod init github.com/your-username/your-hugo-site

mkdir -p archetypes assets config content data i18n layouts static themes

In the following step, we add the Claris theme to the configuration of Hugo. This must only be done after the current directory has been initialized as a Hugo Module using the above command (hugo mod init...).

First, we need to add Claris as a module to the main config file of Hugo. I highly recommend that you prepare for having separate configuration files for your development and production environments. Hugo supports this via the following directory structure:

config/_default     # Configuration that applies to all environments
config/development  # Configuration for the development environment, 
                    # builds upon `_default`
config/production   # Configuration for the production environment,
                    # builds upon `_default`

To configure Hugo to use the Claris theme, you edit its main configuration file to add the Claris theme under module -> imports.

If you are not familiar with the file format named TOML or, like me, just prefer YAML, then now is the perfect time to decide which format your config files shall use. Depending on the format you have chosen (TOML or YAML), add one of the following blocks to your main configuration file.

If you will use TOML, add the following block to your config/_default/hugo.toml file:

baseURL = "/"
title = "Hugo theme *Claris* Demo"

[module]
  [[module.imports]]
    path = "github.com/simonheimlicher/hugo-claris"

If you will use TOML, add the following block to your config/_default/hugo.yaml:

baseURL: /
title: Hugo theme *Claris* Demo

module:
  imports:
    - path: github.com/simonheimlicher/hugo-claris

Make sure you only have one of these two files and you do not have a file called hugo.toml or hugo.yaml in the root of your project.

The module will be fetched by running the following command:

hugo mod get -u

Error: failed to load modules: 
module "github.com/simonheimlicher/hugo-claris" not found in 
".../your-hugo-site/themes/github.com/simonheimlicher/hugo-claris";
either add it as a Hugo Module or store it in 
".../your-hugo-site/themes".: module does not exist

cat go.mod

module github.com/simonheimlicher/vitae

go 1.21.6

require github.com/simonheimlicher/hugo-claris v0.0.0-20240125155746-88a461801fbe // indirect

mv -i config{,-disabled}

hugo mod init github.com/your-username/your-hugo-site

mv -i config{-disabled,}

hugo new content index.md

Start the Hugo server with:

hugo server

Your site should now be running locally, accessible at http://localhost:1313. You can see Claris in action!

To deploy your Hugo site with the Claris theme to Cloudflare Pages:

• Push your site to a GitHub repository.
• Set up a new project on Cloudflare Pages, linking it to your GitHub repository.
• Follow the framework-specific guide for Hugo
• Cloudflare Pages will build and deploy your site every time you push to your repository.

We welcome contributions to Claris! Whether it's bug fixes, feature additions, or improvements to the documentation, your help is appreciated. Please read our Code of Conduct and Contributing Guide for guidance on how to contribute.

Claris is MIT licensed.

For more detailed information and advanced configuration options, visit the Hugo Claris repository on GitHub.