Dual Theme Website?

support
1

I would like to create a website that uses two themes, one for Desktop and another for mobile. Can this be possible to render two websites that interact and redirect to each other on the basis of size of device? I know Bootstrap is there but I’m trying to research and achieve something in an experiment.

This would mean running Hugo will generate two websites, one for Desktop and another for mobile and redirecting each other. The only thing I ain’t able to achieve is running command ‘Hugo’ can only generate one website.

2

I’m sure you can create two separate websites with Hugo since you can technically create as many as you’d like and then just pass a flag for the theme at build time. That said, “redirecting” isn’t within the Hugo scope. That’s something you should take care of on the server.

Also, I wonder about the utility of what you’re trying to accomplish since Hugo is a static site generator and therefore focuses solely on content. As such, you’re way better off going responsive than you would be trying to create a statically generated m-dot/old-school separate “mobile” site. HTH. Cheers!

3

Thanks for the answer @rdwatters. However I am trying to run dual theme on single website. The following will explain you what I’m trying to do:

Error: While parsing config: (4, 1): The following key was defined twice: theme

This error is due to double Theme = “” value in the config.toml

4

Putting

theme = "theme1"
theme = "theme2"

in your config.toml won’t work.

You can generate two copies of your site, with different themes, by running hugo twice with different arguments. Like this:

PS C:\Users\lws\vc\website> hugo -t theme-1 -d "G:/output-dir-1" 

Started building sites ...                                          
Built site for language en:                                         
0 of 19 drafts rendered                                             
0 future content                                                    
0 expired content                                                   
51 regular pages created                                            
12 other pages created                                              
1 non-page files copied                                             
0 paginator pages created                                           
0 tags created                                                      
9 categories created                                                
total in 274 ms         

PS C:\Users\lws\vc\website> hugo -t theme-2 -d "G:/output-dir-2" 

Started building sites ...                                          
Built site for language en:                                         
0 of 19 drafts rendered                                             
0 future content                                                    
0 expired content                                                   
51 regular pages created                                            
12 other pages created                                              
1 non-page files copied                                             
0 paginator pages created                                           
0 tags created                                                      
9 categories created                                                
total in 176 ms                                   
                  
PS C:\Users\lws\vc\website>

However, this isn’t necessarily the best way of making a website usable on mobile and desktop. You’re far better off using a “responsive” theme, which uses CSS media queries (or JavaScript) to “respond” to the size of the screen it’s on.

1 Like
5

@rdwatters I actually want to implement AMP to be honest!

Two themes mean a simple website and an AMP one.

I though I’d be make an announcement here so I didn’t disclosed it earlier!

6

Gotcha. You should search the forums since there have been previous conversations about implementing AMP as part of a Hugo build. That said, keep in mind you’ll need to write your own script to change the extension to .amp.html. You can still use the approach mentioned above where you build one site with one theme and then another site after according to the AMP spec, but you’ll need to be pretty crafty with your scripting. Let me know how it goes!