use purgecss with hugo

[jerry011235]

Hi, @hugo-sid,
the theme is very simple and fast and I like it very much!
Thank you for your work!

Now,I want to use purgecss with hugo to remove unused css(this is my goal), but there is some problem, can you help?

My pc is win10 x64, I have installed hugo and I have done something followed the Setup of README.md in the hugo-blog-awesome repo.

hugo new site myblog
cd myblog
git clone --depth=1 https://github.com/hugo-sid/hugo-blog-awesome.git themes/hugo-blog-awesome

Copy myblog\themes\hugo-blog-awesome\exampleSite\config.toml and replace myblog\config.toml.
Modify the title and sitename in the config.toml, put some posts in content\posts folder, then run hugo server.
my blog is now up and running successfully on http://localhost:1313 !

Press Ctrl+C to stop. Then I run hugo --minify.
Remember the size of this file myblog\public\style.min.XXX.css, it's 22.5 KB.

Then I have tried to use purgecss with hugo

What I have tried basically refers to the following article:
https://www.tchilderhose.ca/posts/2021/04/cssclean/

1. install node.js.
2. run the following command:

cd myblog
npm init
npm install -D --save postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss cssnano

3. Modify line 15 in myblog\themes\hugo-blog-awesome\layouts\partials\head.html

    {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS (dict "targetPath" "style.css") | postCSS | minify | fingerprint }}

    <!--
    {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS (dict "targetPath" "style.css") | minify | fingerprint }}
    -->

4. Edit config.toml

//config.toml
[build]
  writeStats = true

5. Create postcss.config.js in myblog folder.

//postcss.config.js
module.exports = {
  plugins: {
    '@fullhuman/postcss-purgecss': {
      content: [ './hugo_stats.json' ],
      defaultExtractor: (content) => {
        let els = JSON.parse(content).htmlElements;
        return els.tags.concat(els.classes, els.ids);
      }
    },
    autoprefixer: {},
    cssnano: { preset: 'default' }
  }
};

6. then I run hugo --minify.

Fortunately there are no errors,but the size of the file public\style.min.XXX.css is also 22.5 KB.
It seems that purgecss is not working, is there something wrong?

[hugo-sid]

Greetings

Hi @jerry011235.

the theme is very simple and fast and I like it very much!
Thank you for your work!

I'm glad you liked this theme. You are most welcome.

Probable solution

I have not tried to clone the repo and do all the NPM stuff, but I feel this could be the solution to your problem:

You mentioned that, you modified line 15 in myblog\themes\hugo-blog-awesome\layouts\partials\head.html to this:

    {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS (dict "targetPath" "style.css") | postCSS | minify | fingerprint }}

    <!--
    {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS (dict "targetPath" "style.css") | minify | fingerprint }}
    -->

Could you remove the following:

    <!--
    {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS (dict "targetPath" "style.css") | minify | fingerprint }}
    -->

and check whether Purgecss works?

Reasoning

Comments in Go template are marked by {{/* */}} and NOT by <!-- -->.
The <!-- --> syntax is for HTML comments and has no effect on Go templates (which is what Hugo uses).
So, the code that you have enclosed within <!-- --> is being executed by Hugo.
As you may be aware of, the code enclosed within <!-- --> is the same old code without PostCSS processing.

[jerry011235]

Hi @hugo-sid.
Aha! That's the solution!
The size of the style.min.XXX.css is 11.2 KB!
Thank you so much!

btw, do you know of any better way to reduce the size of this file again?

[hugo-sid]

Hi @jerry011235, thanks for starring the repo.

That's the solution!

I'm glad it worked.

Thank you so much!

I'm happy to help.

btw, do you know of any better way to reduce the size of this file again?

No.

[jerry011235]

Hi @hugo-sid.
Thanks again! Wish you happy everyday!

[hugo-sid]

No worries. You are welcome @jerry011235.