How to Change Your Website's Current Hugo Theme to the Theme You Prefer

Posted on Jan 20, 2023

tl;dr: Go to the Hugo Themes web page, download your selected theme, and configure your website.

Introduction

In my last article How to Update to the Latest Release of Hugo, I had said I wanted a clean, simple minimal theme that would help me focus on writing quality content.

My website’s earlier theme, which was the Coder Theme, is one of the many excellent themes on the Hugo website’s themes page.

I’m not affiliated with Hugo or the developer(s) of any of the Hugo themes.

I like the Coder Theme because, at the time, Coder suited my preferences: simple and clean and with multilingual capability.

I liked that the developer built the Coder Theme with multilingual capabilities, allowing me to publish my Spanish-translated articles on my site.

I’m not fluent in the Spanish language. I just know basic words like gracias, estoy bien, and cómo estás. And I love the pronunciation of words in Castilian Spanish.

Translating my articles into European Spanish was a great idea so more people could read my content. But I gave myself extra work with the translation process using Google Translate. Instead of focusing on planning, researching, and writing my next draft, I used my time to google translate my published articles.

And I noticed that I was tinkering on my website too much instead of writing. That was me procrastinating. 😂

What is this article about?

This article is about changing your website’s current Hugo theme to your preferred one in eight simple steps and re-creating your website’s root directory.

My earlier theme was the Coder Theme, and my current theme is the Archie Theme. I’ve highlighted the Archie Theme in the below steps.

I recommend reading this entire article before going through and completing the steps.

☝🏼

Decide on a Hugo theme

Deciding on a Hugo theme is easy if you know what you want. And there are so many fantastic themes to choose from! 🥳

I recommend choosing a theme that suits your personality, writing needs, and website content.

But choose the most uncomplicated theme design that focuses on your content and where you can focus on creating quality content.

Content is where I expect much of the real money will be made on the Internet, just as it was in broadcasting.

― Bill Gates

I chose the Archie theme because of its minimal design, simple interface, and ease of configuring.

The Archie Theme’s standout qualities are:

The clean interface is Markdownish. I genuinely like writing my content with Markdown. The Archie Theme got me at Markdownish. 😂
I can toggle my website’s dark/light modes.
And importantly, this Archie Theme is responsive.

I looked at my website that uses the Archie Theme on my iPhone; it’s readable, and I can easily navigate it.

But I like that my website looks like a compact version of my desktop view on my iPad. 👍🏼🙏🏼

☝🏼

Go to Hugo Themes

On Hugo Themes, pick your preferred theme.
Scroll down your preferred theme’s web page to learn more about your selected theme.
- View the demo,
- Read the features, installation, configurations, and developer’s tips,
- And consider supporting the developer.
Before you commit to installing your preferred theme, I recommend you go to your selected theme’s documentation site and GitHub repository for more details.

☝🏼

Decide how you want to install your selected theme

I recommend downloading the theme’s ZIP folder because this install method is more manageable and involves less stress and headache while installing and post-install.

First, there is no right or wrong method to install a Hugo theme.

The usual install methods in no order are:

Using the git clone command
Using the git submodule command
Hugo Modules
Downloading the ZIP folder and extracting it

I’ve never used the first three install methods. However, my findings from my research of the three methods helped me decide they were complicated.

Below are short descriptions of the main effects of using each install method.

If you git clone the selected theme’s repository, you’ll get the theme’s linked full Git repository copy, which is all the versions of its files and folders on your local directory.

When you change your website’s theme, your changes synchronize with the theme’s central repository. You can’t independently change your website’s theme. You’ll need to have complete control of your website’s theme.

If you git submodule the selected theme, you’ll fork the theme’s repository to your GitHub account, then from the forked repository, you add the forked theme to your Hugo website via git submodule.

Fork means you get a new copy of the theme’s repository. Your new copy is independent of the theme’s central repository you forked from.

The forked copy of your website’s theme doesn’t touch the theme’s central repository. However, you must push your website’s updated local files to your forked theme’s submodule.

If you use Hugo Modules to install the selected theme, you will have to learn Go to understand how to use Hugo Modules. If you know Go, good for you! 🙌🏼 Also, you would have to install the latest Go version on your computer.

If you Download ZIP the selected theme, you’ll get the theme’s compressed current version source files that you can extract to a target (specific) folder.

So, now that you know about the usual install methods and their effects, you decide how to install your selected Hugo theme.

But I recommend the Download ZIP method. This recommendation is based on looking at my ways of running my Hugo website where:

I don’t need to contribute to the theme’s central repository,
I want complete control of my website,
I prefer the simplicity of pushing my local files straight to my website’s single central repository, and
Not having to learn Go and have a version of Go on my computer.

So, the easiest method of theme installation is to download the theme’s ZIP folder and extract the ZIP folder to a target (specific) folder.

☝🏼

Download the theme

On the selected theme’s web page, click the Download button.
You’re in the theme’s GitHub repository.

You’ll see something like what’s depicted in the image below.

I recommend reading the theme’s README.md module because this has demo, features, installation, credits, configuration options, and a configuration of the demo site. The theme’s README.md contents are like what you see on the web page.
Click on the Code button.

You’ll see something like what’s depicted in the image below.
Click the Download ZIP button. Your computer opens the Windows Save As window, and you save the theme’s ZIP folder in your Downloads folder.

☝🏼

Extract the ZIP folder

Extract the ZIP folder to the Downloads folder.

Extracting the ZIP folder to the downloads folder first and not in a target (specific) folder in your website’s root folder might save you from unnecessary stress and headache. My reasoning follows.

Extracting the theme’s ZIP folder to a downloads folder makes configuring your new theme easier.

While the theme’s extracted contents are in the downloads folder, you can easily find specific folders or files that you might rename, move, or remove without affecting your website root folder that’s already been configured.

I extracted the ZIP folder into my Downloads folder because I didn’t want the newly extracted files to go directly into my themes folder that was still configured to the Coder Theme.

Now that you know my reasoning for extracting the ZIP folder to the downloads folder first, let’s continue.
In your Downloads folder (or whichever folder you decided to extract the ZIP folder), you’ll see the extracted folder named archie-master.
Click this folder, and you’ll see the second folder named archie-master.

You’re in the correct folder, the second one because when you click it, you’ll see something like the following contents, as depicted in the image below.
Rename the second archie-master folder to archie. This is important because the folder name must match the theme name in your config.toml file.
Copy the archie folder to your website’s themes folder, which you’ll create in the next step.

☝🏼

Completely re-create your website’s root folder

I completely re-created my website’s root folder because I didn’t want the extra work and stress of merging and configuring two different themes. The Coder Theme has more configuration settings in the config.toml file than the Archie Theme. The Coder Theme uses SCSS syntax, and the Archie Theme doesn’t.

So, ignore this step if you’re an expert at merging two different themes. 🤓

If you want to avoid the extra work and stress that follows merging and configuring two different themes, follow the below steps.

Copy your earlier-themed website’s root folder to the Downloads folder.

This is useful if you need to use some files after changing to your new theme.

And if you decide to revert to your earlier theme, you still have a copy of your root folder.
Rename the copied root folder to websitesnamePrev

websitesnamePrev is not the actual folder name but stands for the real folder name in my Downloads directory.
Remove (delete) your website root folder from the C:Hugo\Sites folder.
Open the Command Prompt (Admin) window and change the directory to your Sites folder.
```
 C:\WINDOWS\system32>cd C:\Hugo\Sites
```
Then, re-create your website’s root folder.
```
 C:\Hugo\Sites>hugo new site websitesname
```
websitesname is not the actual folder name but stands for any website’s name.
Change the directory to your website’s directory with the cd command.
```
 C:\Hugo\Sites> cd websitesname
```
Confirm your website’s directory by typing dir at the command prompt:
```
 C:\Hugo\Sites\websitesname>dir
```
You’ll see a CLI version of your website’s root folder.
Create a folder named themes in your website’s root directory.
Copy the archie folder to your website’s themes folder.

☝🏼

Configure your new theme

In the archie folder, there’s an exampleSite folder.
Open the exampleSite folder.
Copy all its contents to your website’s root folder.

A Replace or Skip Files window might pop up. If it does, click on Replace the files in the destination.
Add the new theme’s name to the config.toml file that’s in your website’s root folder.
```
 theme="archie"
```

☝🏼

Test your new theme

In the Command Prompt (Admin) window, cd to your website’s root directory.
```
 C:\WINDOWS\system32>cd C:\Hugo\Sites\websitesname
```

Then, run the hugo server:

 C:\Hugo\Sites\websitesname>hugo server

The hugo server displays your local site’s URL:

 Web Server is available at http://localhost:1313/

View your local site sporting the new theme.

Here’s an important tip if you run into a hugo server error.

When I tested my new Archie Theme, I ran into a hugo server error that prevented Hugo from continuing its building of my site.

I don’t remember the specific hugo server error. But the error was related to the data below the Tweets heading in the post-6.md file in the exampleSite folder.

I at once found a solution just by copying the error message and number from the Command Prompt (Admin) window and pasting the error message and number on Google’s search bar.

I removed the Tweets heading and the data below it in the post-6.md file. I didn’t delete the entire file because I wanted to see how the file looked on my local site.

I reran the hugo server, and the error was gone. Hugo was able to complete building my website.

☝🏼

Conclusion

Now that you know how to change your website’s current Hugo theme to the theme you prefer, and re-create your website’s root directory, get a comforting hot cup of your favorite cocoa, and watch a movie. ☕📽🥳

☝🏼

Helpful Links

Thank you for reading!

Please share this how-to article with your family, friends, and anyone who might need to change their website’s current Hugo theme to the theme they prefer.

Follow me on Instagram 😁