I am a static-site generator newbie with a free Netlify CMS hosted site running Hugo through their one-click installation which seems to be their customization of a boilerplate/framework/starter-kit called Victor Hugo
The default theme provided with this installation is Kaldi but I would like to change it
Unfortunately, Victor Hugo is different than “plain” Hugo so the regular theme changing instructions for Hugo don’t apply to Victor Hugo – namely, there is no “themes” folder in Victor Hugo
After four hours now of researching, I’ve finally been told to simply create my own “themes” folder in my Netlify CMS one-click install of (Victor) Hugo and, presumably, carry on following regular instructions for changing Hugo themes – namely, edit config.toml and point it to my preferred theme
Unfortunately, this isn’t working; Netlify CMS and/or Victor Hugo seems to be pulling information from somewhere else other than the “themes” folder and/or config.toml file – I still see the default Kaldi theme
So does anyone know how I can change the theme here? I’m totally flummoxed.
I should note, FWIW, that I’ve changed my Netlify CMS-website’s URL from its nonsensical Netlify CMS-assigned default…I doubt this is the issue but I’m raising it in case it’s actually a factor somehow. Thanks again.
I think the “theme” being used by your site is set in two places
site/layouts/(for all the html)
src/css and src/js
Because of the way hugo works, anything in the layouts directory overrides anything in the theme directory. So the first step would be to delete everything under layouts, and then look into the way the css and javascript are being compiled/built by gulpfile.babel.js. And since you’re hosting on Netlify - make sure you install the theme as a git submodule
(Since I’m not familiar with modern javascript development, I was better off not using the victor-hugo install, and just followed the docs.)
Well, that’s certainly news to me! Thanks for the tip…didn’t seem that way from my research but that’s the thing with trying to piece together, Frankenstein’s Monster-like, different advice from different situations ('cause apparently no one’s ever been confused on this issue like me in the whole history of Hugo!!)…
Sigh – it’s like an old Infocom game, where to accomplish Task One, there’s first Task Zero to be done, which depends on Task Negative One being completed…
You’re welcome. There’s a bit of a learning curve to get started with hugo, but once you get your head around a few things, it’s fairly easy.
For me, I didn’t go the victor-hugo route, as it seems to add a lot of complexity with builds that I’m not familiar with (all that gulp and babel stuff). So I recommend just using the basic hugo install, and follow the tutorial I linked in the previous post for hosting on netlify.
Yeah, tell me about it: Netlify CMS really screwed the pooch making their one-click install of Hugo seem all innocuous! Changing themes is like the second or third thing many a new user would think of, probably, so to straight-jacket people like this without warning seems like digital malpractice!
BTW, I’ve followed your previous links and looks like I need to install Git Bash for Windows (did I mention that I’m a Git newbie, too??)…so I’ve done that but it seems like I need to point Git Bash to my repo online, correct? So how do that do that, please?
Right now, I’m getting
David@DESKTOP-F9RT0A8 MINGW64 ~
$
So how do I get this thing pointed at my GitHub repo with the Netlify CMS Hugo site so that I can proceed following the instructions about setting up submodules and whatnot? I’m currently googling to no avail so I thought I’d ask…
I’m not familiar with the windows git bash, but your first step will be to clone the repository: git clone https://github.com/daveydaves/one-click-hugo-cms.git
And to install hugo for windows
Thanks again, man – I’m gonna see if I can “salvage” the one-click install before I just do the “traditional” route…I’m stubborn like that 'cause I guess I’m an optimist, for all my grumbling!
Besides, it’d make for a great first blog post I think…like I’d said, there’s no tips anywhere online about this at all (changing the theme of Netflix CMS’ one-click Hugo install), can ya believe that!
To echo @funkydan2’s comments, the point of using Victor Hugo is to take advantage of the other tools that come bundled with it, e.g. Gulp, Webpack, PostCSS, Babel, etc.
To me, it is geared more towards creating a custom layout, instead of used an official theme. But, using a theme can still be done. OS-specific steps follow.
In a nutshell, the src dir, which holds all the bundled CSS/JS is deleted. Then the site/layouts dir is deleted, so that it doesn’t override the theme layouts. I then shamelessly add my own theme and use its example site. The npm install is still necessary since it actually downloads the hugo binary for your OS – note that the version it downloads, v0.49.2, is outdated.
@daveydaves After spending days fighting with Netlify CMS, I gave up and just installed Hugo locally. It took maybe an hour to set it up, customize a theme, migrate all my content from WordPress, and deploy to Netlify. It’s amazing how much harder Netlify CMS made things.
Yeah, I gave up too – but completely; I’ll revisit it all one day I expect but for now I’ve got other things to tinker with!
I only wish I understood why Netlify made the decision they did to not only use Victor on top of Hugo but to customize Victor as well, such that Victor’s normal theme customizations don’t work on Netlify’s implementation of Victor!!
BTW, I’m glad you got it working in the end! Gives me hope, 'cause I was afraid that doing it the old-fashioned local way would wind up being all convoluted somehow, too!
Thanks, Zach – but why did Netlify break Victor’s normal theme customization capabilities?? That’s what I don’t get. I can’t just follow “vanilla” Victor’s instructions on customizing themes, it seems. Or do those bundled tools necessarily mess with that? Sorry, this kind of tinkering is all new to me.
I’m gonna try going through your helpful notes. Thanks again, Zach!
Well – and this is just me speculating – I don’t think victor-hugo is geared towards novice users. It “bundles” Hugo with additional build tools (Gulp, Webpack, etc.), and then it’s on you to build a custom layout from there.
For most users, downloading the Hugo binary, reading the docs, and a little knowledge of HTML/CSS is all that’s required to get things rolling.
Unless you need the additional build tools that victor-hugo offers – and they obviously have their place – I think you are better off without them.
Yes, I see it’s not for newbies now – but really on account of the lack of documentation; there’s nothing inherently hard about it like trying to come up with an algorithm or something like that!
For me, it seems easier and more flexible to create a Hugo site the usual way, i.e. without using Netlify’s One-Click Hugo Install stuff, and choosing our favourite theme from themes.gohugo.io for starters, etc. etc., and then install Netlify CMS afterwards by following the instructions at https://www.netlifycms.org/docs/add-to-your-site/.
I have gone down this path. But adding Netlify-CMS requires editing of the theme. As soon as I edited the theme locally and pushed the changes to remote, I get the following build error:
7:58:44 AM: Error checking out submodules: Submodule 'themes/terminal' (https://github.com/panr/hugo-theme-terminal.git) registered for path 'themes/terminal'
Cloning into ‘/opt/build/repo/themes/terminal’…
error: Server does not allow request for unadvertised object f67f9371ab9880948bb2f55a2d14307e5bb63ee4
Fetched in submodule path ‘themes/terminal’, but it did not contain f67f9371ab9880948bb2f55a2d14307e5bb63ee4. Direct fetching of that commit failed.
7:58:44 AM: Failing build: Failed to prepare repo
7:58:44 AM: failed during stage ‘preparing repo’: Error checking out submodules: Submodule ‘themes/terminal’ (https://github.com/panr/hugo-theme-terminal.git) registered for path ‘themes/terminal’
Cloning into ‘/opt/build/repo/themes/terminal’…
error: Server does not allow request for unadvertised object f67f9371ab9880948bb2f55a2d14307e5bb63ee4
Fetched in submodule path ‘themes/terminal’, but it did not contain f67f9371ab9880948bb2f55a2d14307e5bb63ee4. Direct fetching of that commit failed.
: exit status 1
