Installing the theme
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
- Download the zip file.
- Extract the contents of the zip file.
- Copy the
lucid
directory from the zip file to thethemes
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.