Change theme in Hugo


#1

I’m following Hugo docs to create a quickstart website. It works until I want to apply another theme: hyde.
I tried editing the config.toml: theme = "hyde" but the them doesn’t show, instead, the default “ananke” is broken, no styles.
I tried using the command hugo -t hyde but it doesn’t change anything.
I’ve also cloned a few more themes and follow their readme file but none of them work.
Any idea?


#2

Have you installed the theme locally first?

git submodule add https://github.com/spf13/hyde.git themes/hyde

#3

@plena, welcome to the forums. Please read Requesting Help and follow the advice so others can help you. :slight_smile:

There are a million reasons your theme isn’t loading, but we can’t figure it out without either seeing the project, or guessing.

Your theme should be in the themes directory, and the name should be the exact folder name of the theme. Do you have an online repo for your project you can share with us?


#4

Yes, I have. Here’s my folder structure:

└── themes
    ├── ananke
    │   ...
    ├── hugo-travelify-theme
    │   ...
    └── hyde
        ├── CHANGELOG.md
        ├── LICENSE.md
        ├── README.md
        ├── archetypes
        │   └── default.md
        ├── images
        │   ├── screenshot.png
        │   └── tn.png
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html
        │   └── partials
        │       ├── head.html
        │       ├── head_fonts.html
        │       ├── hook_head_end.html
        │       └── sidebar.html
        ├── static
        │   ├── apple-touch-icon-144-precomposed.png
        │   ├── css
        │   │   ├── hyde.css
        │   │   ├── poole.css
        │   │   ├── print.css
        │   │   └── syntax.css
        │   └── favicon.png
        └── theme.toml

#5

Thank you for your reply. I’ll read it. My repo it’s just the default hugo quickstart which you can find here and I cloned the themes using this command from Hugo docs:

cd themes
git clone https://github.com/spf13/hyde

#6

And this is my repo structure:

├── archetypes
│   └── default.md
├── config-original.toml
├── config.toml
├── content
│   └── posts
│       └── my-first-post.md
├── data
├── layouts
├── public
│   ├── 404.html
│   ├── categories
│   │   ├── index.html
│   │   └── index.xml
│   ├── dist
│   │   ├── css
│   │   │   └── app.e08a958ae3e530145318b6373195c765.css
│   │   └── js
│   │       └── app.3fc0f988d21662902933.js
│   ├── images
│   │   └── gohugo-default-sample-hero-image.jpg
│   ├── index.html
│   ├── index.xml
│   ├── sitemap.xml
│   └── tags
│       ├── index.html
│       └── index.xml
├── resources
├── static
└── themes


#7

@plena, I expect to see the output from your themes directory as shown above to show up in your project tree, under themes.

I don’t have much else to contribute. That seems kinda odd.

It might be worth it to start the quick start over, fresh.


#8

Thank you @maiki for the suggestion. I started fresh and it still doesn’t work. Here’s what I did:

$ hugo version
Hugo Static Site Generator v0.49/extended darwin/amd64 BuildDate: unknown
$ hugo new site hugo-quick

Congratulations! Your new Hugo site is created in ...
$ cd hugo-quick/
$ git init

Initialized empty Git repository in ...
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\

> echo 'theme = "ananke"' >> config.toml

Cloning into ...
...
Resolving deltas: 100% (600/600), done.
$ hugo new posts/my-first-post.md

<path>/hugo-quick/content/posts/my-first-post.md created
$ hugo server -D
...
$ cd themes/
$ git clone https://github.com/spf13/hyde

Cloning into 'hyde'...
$ cd ..
$ hugo -t hyde
$ hugo server -t hyde

And it broke them ananke, no post (see below). It does not look anything like theme hyde here


#9

Before applying theme hyde:


#10

hugo -D builds drafts. Try hugo server -D -t hyde.


#11

Thank you. It does show up the post, but the theme doesn’t apply. It’s still ananke.


#12

I followed your command line entries and am able to switch to either theme using the hugo --theme switch or by editing config.toml. I believe the config.toml theme configuration takes precedence. To be sure when testing I would use only one or the other method. Also be aware of any possible browser caching.


#13

Sorry @plena, I can’t reproduce your issue. As mojoa points out, beware of browser caching. Maybe try on another computer.


#14

It should not be necessary but, try deleting ananke from your theme folder if you won’t be using it. Make sure no other copies of hugo server are running, before starting it again with your preferred theme. Also, caching does sometimes cause trouble so, what I do is use a plugin for easily clearing the cache in Firefox or Chrome, that I can click to perform the cache clear. Also sometimes closing and re-opening the tab on the browser helps.


#15

Thanks everyone for your help.
FYI: I’ve tried 2 different computers, cleared cache, used different web browsers, none works.
The only thing that works is removing ananke from /themes.
This is odd, given the fact that some of you are able to switch between themes.