Search code examples
hugohugo-themewowchemy

Shipping a full custom theme for Hugo-blox site

I've been working through this tutorial on how to set up a Hugo website. But I think the wochemy theme install must've changed a bit since it was written as i'm struggling to find some of the folders mentioned.

I followed the set up exactly as outlined and have been able to stand up the basic theme, but the customisations are proving challenging to follow. Starting with the main file structure and where to find the config.yaml file mentioned in the 'Basic Customization' section of the tutorial, I believe the .yaml file people need to edit is now called hugo.yaml.

enter image description here

Second, later in the same section of the tutorial, the author shares how users can change the theme of their website by going to the data\theme folder and generating a custom_theme.toml file. However, there is no data\theme folder with the current install. The only data folder I found was nested deep in a themes folder (see below).

enter image description here

This is where I have placed the custom_theme.toml file with the suggested contents. I have then followed the instructions around updating the params.yaml file and pushed it to my github repo again -- but this has not resulted in any changes.

Ultimately, i'd love to use the same theme as in the tutorial. I got to that point of the post, in the section 'Advanced Customization', but i'm struggling to understand the instructions here and/or implement them.

I went to the github page, downloaded the entire repo as a zipped folder, and then unzipped it into the modules folder identified above (in the second screenshot). I then changed the text in the modules.yaml (you can see the location of this file in the first screenshot) to point to the following paths:

############################
## HUGO MODULES
## Install or uninstall themes and plugins here.
## Docs: https://gohugo.io/hugo-modules/
############################

imports:
  # - path: github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify
  # - path: github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind
  - path: github.com/HugoBlox/hugo-blox-builder/modules/custom-wowchemy-theme

Sadly this resulted in the RStudio preview breaking and displaying the following error:

process: readAndProcessContent: "/Users/chrislarkin/Documents/website/content/post/data-visualization/index.md:155:1": failed to extract shortcode: template for shortcode "table" not found 
hugo v0.128.1-0ff542b4b9cc7b5cb425bbab8bdb5aace81d0c03+extended darwin/arm64 BuildDate=2024-07-02T06:46:41Z VendorInfo=gohugoio

Clearly, there is some issue here and the file structure I have looks a bit different from what was written up in the tutorial.

I would be immensely grateful if anyone here can point me in the right direction! I'd love to be able to stand up my website with the custom theme shared in the tutorial. This is the full theme, FYI: https://github.com/matteocourthoud/custom-wowchemy-settings

Solution

  • You cannot download the modules and unzip them, and expect them to work out of the box. Hugo has a specific way to install the modules, described in the module section.

    In your case, at the root of the site, try to use the following commands to get the modules.

    hugo mod get github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify
hugo mod get github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind

    Alternatively, if you are not that confident in working with modules, you can download the files and install them manually on your site. It is not recommended, as it makes it difficult to update later. Anyway, considering that the custom-wowchemy-theme that you are using is no longer updated, it may be worth trying to install the files you need manually, at least to check you can get it working. And then try to figure out a clean install using modules later.

    The files are available here:

    In particular, I would start with the table.html shortcode which is available in layouts/shortcodes.

    Install it in [yoursite]/layouts/shortcodes, so that Hugo will find it. This will probably solve the current error message you are seeing. Then, if you see another error message, keep exploring the files in /blox-tailwind/layouts/partials and /blox-tailwind/layouts/shortcodes.