This page helps with installing the theme on your Hugo site.

Generate your new Hugo site

If you don’t have one already, generate a Hugo site using the command below. The helloworld directory specified below will contain the new Hugo site with all relevant files.

hugo new site helloworld

Copy the theme into the Hugo site

  1. Download the zip file.
  2. Extract the contents of the zip file.
  3. Copy the lucid directory from the zip file to the themes directory in your project.

You should now have a themes/lucid directory.

To verify if the directory structure is right, run this command in your Hugo project directory.

$ ls themes/lucid/theme.toml
themes/lucid/theme.toml

Enable the theme

Add the below config to the config.toml file in your Hugo project. Feel free to make appropriate changes.

The example config below is also available here for your copy-pasta convenience.

baseURL = "http://example.com/"
languageCode = "en-us"
title = "Site title"

# Sets the theme to Lucid
theme = "lucid"

####
# Theme's main settings
####
[Params.Lucid]

# Place a file in the static/ directory
# and specify the path here without the static prefix.
# Example for the url below,
# the file would be at static/images/avatar.png in the Hugo project.
#
# avatarUrl = "/images/avatar.png"

# Enable Plausible Analytics (plausible.io)
#
# plausibleAnalytics = true

# If the domain of the blog is not same as your Plausible domain
# then add the Plausible domain below.
#
# plausibleDomain = "example.com"

# By default Lucid theme ships with minified CSS.
# If you want to modify the theme or use more of Tailwind,
# uncomment below line and Hugo will be responsible for compiling Tailwind.
#
# customizeTheme = true

####
# Meta tags and social media
####
[Params.Lucid.Social]

# Site description. Required for meta tags.
description = "Hugo demo site for Lucid theme"

# Default social media images. This can also be overridden in any post.
#
# twitterImage = "/images/opengraph-banner.png"
# opengraphImage = "images/twitter-banner.png"

[Params.Lucid.SubscribeForm]
mailchimpURL = ""

# Displays the newsletter form at the bottom on all blog posts by default
displayOnPosts = true

####
# Preferences for light mode or dark mode
####
[Params.Lucid.Display]

# displayMode sets theme's variant.
#   * light - uses light theme (default)
#   * dark - uses dark theme
#   * system - uses dark or light mode based on user's system preferences
#
# displayMode = "light"

# If true, then displays a button for users to switch between dark and light modes.
# Look for an icon on the top-right of your site's pages.
# This preference is stored in the user's localStorage.
#
# If the displayMode is set,
# then that is the default mode that the page loads unless end-user has chosen something.
modeSwitcher = true

# The localStorage key used to store the dark mode preference.
# Some day if you want to reset your users's preferences, just change the key name.
# storageKey = "displayMode"

####
# All the navigation links
####
[[Params.Lucid.NavLinks]]
name = "About"
url = "/about"

[[Params.Lucid.NavLinks]]
name = "Projects"
url = "/projects"

[[Params.Lucid.NavLinks]]
twitter = "https://twitter.com/example"

[[Params.Lucid.NavLinks]]
github = "https://github.com/example"

[[Params.Lucid.NavLinks]]
linkedin = "https://www.linkedin.com/in/example"

[[Params.Lucid.NavLinks]]
instagram = "https://instagram.com/example"

Deploy the site

Refer to Hugo’s documentation to deploy the site to Netlify. Takes less than 60 seconds to do so and it is free.