Hugo extended#

Well, did you know, that there’s a build of Hugo that’s built with extended tag? I did, but every single build I installed from all package managers did have that flag.

But the prebuilt archive for arm Linux did not…

The problem#

I added a CSS background animation, as you can see. But for whatever reason, the css for it was not built. The built site did not have any of the modified css. It worked on my PC, it worked on my laptop, but why did it not work on the server?

I built the site again and again, modified the CSS, the Hugo config but nothing helped. Then I was building the site again and bam, I read the build number. No extended flag. Just to be sure I looked on my laptop and it was there. I also remembered that the theme specifically said that it needs hugo extended.

And there you have it. My site is rendering properly with a nice animation in the background.

The animation#

Well to the animation itself.

I felt like the site needed something “more”. The theme was nice, but it was still quite plain in my opinion. I was looking for some nice animations online and found this one on CodePen.

The only things I needed to do to make it work on my site were these:

  • Change the background
  • Delete the html css rules
  • Set the background-color of .container to the same as body but slightly opaque
    • I did this so the stars wouldn’t interfere with the site’s content as much
  • Set position of .container to relative
  • And for last the z-index of the .container is set to 10 so it’s above the stars

And here you have it! A nice background animation that doesn’t interfere with your content. Hope you like it!