cdeleeuwe/netlify-plugin-hugo-cache-resources

A netlify plugin to cache Hugo resources

Netlify Build Plugin: Persist Hugo resources Between Builds

Persist Hugo resources folder between Netlify builds for huge build speed improvements! ⚡️

This plugin caches the resources folder after build. If you are processing many images, this would improve build duration significantly.

Usage

You can install this plugin in the Netlify UI from this direct in-app installation link or from the Plugins directory.

For file-based installation, add the following lines to your netlify.toml file:

[build]
  publish = "public"

[[plugins]]
  package = "netlify-plugin-hugo-cache-resources"

	[plugins.inputs]
	# If it should show more verbose logs (optional, default = true)
	debug = true
	# Relative path to source directory in case you use Hugo's "--s" option
	srcdir = "path/to/website"

Note: The [[plugins]] line is required for each plugin, even if you have other plugins in your netlify.toml file already.

To complete file-based installation, from your project's base directory, use npm, yarn, or any other Node.js package manager to add the plugin to devDependencies in package.json.

npm install -D netlify-plugin-hugo-cache-resources

netlify-plugin-hugo-cache-resources's Issues

No resources folder cached

Seems this plugin is not working for me. I got massive resource folder when building it in productions, so i know the folder is there. It is under sub directory of site. When the plugin runs, it cannot find the resources folder. No resources folder cached message.

Netlify build fails due to plugin error

I enabled this plugin and now it seems to be throwing this error

8:53:44 PM: ┌─────────────────────────────────────────────────────────────┐
8:53:44 PM: │ Plugin "netlify-plugin-hugo-cache-resources" internal error │
8:53:44 PM: └─────────────────────────────────────────────────────────────┘
8:53:44 PM: ​
8:53:44 PM:   Error message
8:53:44 PM:   Error: ENOENT: no such file or directory, open '/opt/build/cache/cwd/resources.netlify.cache.json'
8:53:44 PM: ​
8:53:44 PM:   Plugin details
8:53:44 PM:   Package:        netlify-plugin-hugo-cache-resources
8:53:44 PM:   Version:        0.1.4
8:53:44 PM:   Repository:     git+https://github.com/cdeleeuwe/netlify-plugin-hugo-cache-resources.git
8:53:44 PM:   npm link:       https://www.npmjs.com/package/netlify-plugin-hugo-cache-resources
8:53:44 PM:   Report issues:  https://github.com/cdeleeuwe/netlify-plugin-hugo-cache-resources/issues
8:53:44 PM: ​
8:53:44 PM:   Error location
8:53:44 PM:   In "onPostBuild" event in "netlify-plugin-hugo-cache-resources" from Netlify app
8:53:44 PM: ​
8:53:44 PM:   Error properties
8:53:44 PM:   {
8:53:44 PM:     errno: -2,
8:53:44 PM:     code: 'ENOENT',
8:53:44 PM:     syscall: 'open',
8:53:44 PM:     path: '/opt/build/cache/cwd/resources.netlify.cache.json'
8:53:44 PM:   }
8:53:44 PM: ​
8:53:44 PM:   Resolved config
8:53:44 PM:   build:
8:53:44 PM:     command: hugo
8:53:44 PM:     commandOrigin: ui
8:53:44 PM:     environment:
8:53:44 PM:       - REVIEW_ID
8:53:44 PM:       - HUGO_VERSION
8:53:44 PM:     publish: /opt/build/repo/public
8:53:44 PM:   plugins:
8:53:44 PM:     - inputs: {}
8:53:44 PM:       origin: ui
8:53:44 PM:       package: netlify-plugin-hugo-cache-resources

Total Files Generated: 2 - Is this working correctly?

Hello, I installed this plugin on Netlify for a HUGO based website.
The deployment is configured as follows:
Base directory: not set
Build command: hugo
Publish directory: public

7:06:57 PM: 1. onPreBuild command from netlify-plugin-hugo-cache-resources
When I run a deployment on the logs I see the following:
7:06:58 PM: Checking if resources exist at "resources"
7:06:58 PM: Restored cached resources folder. Total files: 2
7:06:58 PM: ---
7:06:58 PM: 1. /opt/build/repo/resources
7:06:58 PM: 2. /opt/build/repo/resources/_gen

[... Hugo Builds...]

7:07:01 PM: 3. onPostBuild command from netlify-plugin-hugo-cache-resources
7:07:01 PM: ───────────────────────────────────────────────────────────────────
7:07:01 PM: ​
7:07:02 PM: Saved resources folder to cache. Total files: 2
7:07:02 PM: ---
7:07:02 PM: 1. /opt/build/repo/resources
7:07:02 PM: 2. /opt/build/repo/resources/_gen
7:07:02 PM: ​
7:07:02 PM: (netlify-plugin-hugo-cache-resources onPostBuild completed in 609ms)

I know the resources/_gen folder has about 400 generated images, so why it says "Total files:2"? Is the plugin not working for some reason?
How can I see if it is working correctly?

Thank you

Compatibility with NodeJS v18

I tried switching to v18 while debugging another issue with Netlify builds and ran into this error:

5:46:36 AM: ❯ Loading plugins
5:46:36 AM:    - [email protected] from netlify.toml and package.json
5:46:37 AM: Uncaught exception, the process will now terminate…
5:46:37 AM: Error: Unable to deserialize cloned data due to invalid or unsupported version.
5:46:37 AM:     at parseChannelMessages (node:internal/child_process/serialization:72:20)
5:46:37 AM:     at parseChannelMessages.next (<anonymous>)
5:46:37 AM:     at Pipe.channel.onread (node:internal/child_process:611:18)

I ended up resolving my issue and everything is working fine on v16, so I'm pretty confident that v18 was the cause of this error.

Thanks for sharing this plugin!

It seems there is some incompatibility when we use @fullhuman/postcss-purgecss

Hello,

Great plugin ! Thanks. It used to works fine on all my sites.

I just added postCSS + @fullhuman/postcss-purgecss in my hugo site.

I had errors when publish master in prod and went bersek debugging.

Unless i removed your plugin => Works fine.

I really don't know where the problem is, so here is what I have if you can see the reason (and if it is on the plugin side).:

Error message

The file it is looking for is not present in /public.
And the hash file (64df448e9e23934aa9c5143cda74ed1c) is the same for all files, wich is not expected :-)

When I use hugo and netlify build works fine.

┌─────────────────────────────┐
10:14:53 AM: │        Netlify Build        │
10:14:53 AM: └─────────────────────────────┘
10:14:53 AM: ​
10:14:53 AM: ❯ Version
10:14:53 AM:   @netlify/build 3.3.0
10:14:53 AM: ​
10:14:53 AM: ❯ Flags
10:14:53 AM:   deployId: 5f44c84e5073d70007b9f8e5
10:14:53 AM:   mode: buildbot
10:14:53 AM: ​
10:14:53 AM: ❯ Current directory
10:14:53 AM:   /opt/build/repo
10:14:53 AM: ​
10:14:53 AM: ❯ Config file
10:14:53 AM:   /opt/build/repo/netlify.toml
10:14:53 AM: ​
10:14:53 AM: ❯ Context
10:14:53 AM:   production
10:14:53 AM: ​
10:14:53 AM: ❯ Loading plugins
10:14:53 AM:    - [email protected] from netlify.toml
10:14:53 AM: ​
10:14:53 AM: ┌────────────────────────────────────────────────────────────────┐
10:14:53 AM: │ 1. onPreBuild command from netlify-plugin-hugo-cache-resources │
10:14:53 AM: └────────────────────────────────────────────────────────────────┘
10:14:53 AM: ​
10:14:54 AM: Restored cached resources folder. Total files: 2
10:14:54 AM: ---
10:14:54 AM: 1. /opt/build/repo/resources
10:14:54 AM: 2. /opt/build/repo/resources/_gen
10:14:54 AM: ​
10:14:54 AM: (netlify-plugin-hugo-cache-resources onPreBuild completed in 850ms)
10:14:54 AM: ​
10:14:54 AM: ┌────────────────────────────────────┐
10:14:54 AM: │ 2. build.command from netlify.toml │
10:14:54 AM: └────────────────────────────────────┘
10:14:54 AM: ​
10:14:54 AM: $ hugo --minify
10:14:56 AM: Building sites … ERROR 2020/08/25 10:14:56 POSTCSS: failed to transform "plugins/bootstrap/dist/css/bootstrap.min.css" (text/css): resource "css/plugins/bootstrap/dist/css/bootstrap.min.css_64df448e9e23934aa9c5143cda74ed1c" not found in file cache
10:14:56 AM: ERROR 2020/08/25 10:14:56 POSTCSS: failed to transform "plugins/lightbox2/dist/css/lightbox.min.css" (text/css): resource "css/plugins/lightbox2/dist/css/lightbox.min.css_64df448e9e23934aa9c5143cda74ed1c" not found in file cache
10:14:56 AM: ERROR 2020/08/25 10:14:56 POSTCSS: failed to transform "plugins/slick-carousel/slick/slick.css" (text/css): resource "css/plugins/slick-carousel/slick/slick.css_64df448e9e23934aa9c5143cda74ed1c" not found in file cache
10:14:56 AM: ERROR 2020/08/25 10:14:56 POSTCSS: failed to transform "plugins/slick-carousel/slick/slick-theme.css" (text/css): resource "css/plugins/slick-carousel/slick/slick-theme.css_64df448e9e23934aa9c5143cda74ed1c" not found in file cache
10:14:56 AM: Total in 1323 ms
10:14:56 AM: Error: Error building site: POSTCSS: failed to transform "css/themefisher-font/style.css" (text/css): resource "css/css/themefisher-font/style.css_64df448e9e23934aa9c5143cda74ed1c" not found in file cache
10:1

File : netlify.toml

[build]
publish = "public"
command = "hugo --minify"

[context.production.environment]
HUGO_VERSION = "0.74.3"
HUGO_ENV = "production"
RUBY_VERSION = "2.6.2"
HUGO_ENABLEGITINFO = "true"
TZ = "Europe/Zurich"

[context.deploy-preview]
command = "hugo --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.74.3"
RUBY_VERSION = "2.6.2"
HUGO_ENABLEGITINFO = "true"
TZ = "Europe/Zurich"

[context.branch-deploy]
command = "hugo -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.74.3"
RUBY_VERSION = "2.6.2"
HUGO_ENABLEGITINFO = "true"
TZ = "Europe/Zurich"

# PLUGINS NETLIFY
[[plugins]]
  package = "netlify-plugin-hugo-cache-resources"
    [plugins.inputs]
    # If it should show more verbose logs (optional, default = true)
    debug = true

File : package.json

 "dependencies": {
    "@fullhuman/postcss-purgecss": "^2.3.0",
    "autoprefixer": "^9.8.6"
  },

File : postcss.config.js

module.exports = {
  plugins: {
    '@fullhuman/postcss-purgecss': {
      content: ['./**/*.html', './**/*.js', './hugo_stats.json'],
    },
    autoprefixer: {
      overrideBrowserslist: [
        "last 2 versions",
        "Explorer >= 8",
      ]
    },
  }
};

partial

I use this code for all my requested css.

{{- $isProd := hugo.IsProduction -}}

{{- $css := resources.Get "css/themefisher-font/style.css"}}
<!-- Utilise PurgeCSS -->
{{- $css = $css | resources.PostCSS (dict "config" "./postcss.config.js") }}
{{- if $isProd }}
{{- $css = $css | minify | fingerprint "sha384" }}
{{- end }}
<link rel="preload" href="{{ $css.RelPermalink }}" {{ if $isProd }}integrity="{{ $css.Data.Integrity }}"{{ end }} as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link href="{{ $css.RelPermalink }}" {{ if $isProd }}integrity="{{ $css.Data.Integrity }}"{{ end }} rel="stylesheet" type="text/css"></noscript>