RSS

AWS Amplify - Hugo Version error, 2 Issues

How to correct AWS Amplify Hugo Version “error: failed to transform resource: TOCSS: failed to transform “scss/main.scss”
Share this page:

Environment

While building the new Hugo web site (this web, actually), to migrate my Blogger blog, mostly to get benefits of the brilliant zero effort CI/CD, I’ve decided to go with AWS Amplify. It’s just awesome.

My technology stack is:

  • Hugo with Docsy theme.
  • GitHub repo with 2 branches: qa and master.
  • AWS Amplify for Hosting and CD.

Issue 1: hugo version not adequate

Low effort tools tend to include low customization… which is what I found to be the case. I’ve been using AWS for quite a while, so setting up Amplify was quite easy and intuitive. Also, the official instructions are simple enough.

The problem comes when you’re using something like a non-standard version of Hugo. The official page tells you to simply set the version to “latest” in AWS Console, but if you’re using one of the more advanced themes, like Docsy by Google, this won’t cut it. And here is why…

After setting everything up, connecting my GitHub repository with Amplify, the provision went all right, but:

Build Error

Logs Error

Ok, let’s not panic… and check out the logs in the “Build”:

2020-04-21T16:55:19.043Z [INFO]: ERROR 2020/04/21 16:55:19 error: failed to transform resource: TOCSS: failed to transform "scss/main.scss" (text/x-scss): this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information

Ok, this kinda explains it… the problem is the theme, Docsy in my case, which is looking for EXTENDED releases of Hugo. Good news? This is pretty easy to solve.

Super important Make sure the version you choose here supports everything else you need. That way you can avoid the second surprise, described in the “Issue 2” below…

Since the problem is in the Build stage, click on “Build Settings” in the menu on the left, and click Edit. What you need to do is add a manual set of commands that installs a particular release of Hugo you need. Again, before you do this, make sure the version you’re choosing supports EVERYTHING you need to do. First time I did this, I set 0.69.1, and once I realized Docsy doesn’t support that one… I had to go back. Under “preBuild:” you need to add the following (replace the .tar.gz with the one you need):

 commands:
   - npm ci
   - wget https://github.com/gohugoio/hugo/releases/download/v0.68.3/hugo_extended_0.68.3_Linux-64bit.tar.gz
   - tar -xf hugo_extended_0.68.3_Linux-64bit.tar.gz hugo
   - mv hugo /usr/bin/hugo
   - rm -rf hugo_extended_0.68.3_Linux-64bit.tar.gz
   - hugo

Choose your app, and click on “Redeploy your version”.

Success

Works? You’re welcome :)

Issue 2: hugo version not adequate… the sequel

This one took me a bit longer to solve, so stay with me. I was “lucky” enough to deploy my site precisely during the Hugo release non compatible with Docsy, my chosen theme. Basically, in Hugo 0.69.1, the “Become a Cloud Ninja” page in my blog looked like this:

Success

This was just ridiculous… I checked Docsy code over an over trying to figure out what I’m doing wrong, and why the Docsy Example site looked awesome and mine looked like… well, this. In the end, the response was - compatibility issue. So what I had to do, is go back to AWS Amplify, and change my version from 0.69.1 to 0.68.3. And if we’re still in 2020, that’s the version of Mats Cloud you’re seeing right now.

I’m not sure if this is a Hugo issue, as it seems more like a bug then a feature, but the Issue 2 is likely to be solved soon.

Let me know in the comments if this helped.