From 7ecfa38ea06431415778cb1f68a0dcd2cb25b6bf Mon Sep 17 00:00:00 2001 From: zwbetz-gh Date: Tue, 24 May 2022 21:12:12 -0500 Subject: [PATCH 1/4] Guide for Hugo --- README.md | 1 + docs/.vuepress/config.ts | 4 ++ docs/README.md | 1 + docs/guides/hugo.md | 150 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 156 insertions(+) create mode 100644 docs/guides/hugo.md diff --git a/README.md b/README.md index 2cae4244..3fe71a03 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ You can find the PurgeCSS documentation on [this website](https://purgecss.com). - [React.js](https://purgecss.com/guides/react.html) - [Next.js](https://purgecss.com/guides/next.html) - [Razzle](https://purgecss.com/guides/razzle.html) +- [Hugo](https://purgecss.com/guides/hugo.html) ## Getting Started diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 14292927..281fa6f6 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -178,6 +178,10 @@ export default defineUserConfig({ text: "WordPress", link: "/guides/wordpress", }, + { + text: "Hugo", + link: "/guides/hugo", + }, ], }, { diff --git a/docs/README.md b/docs/README.md index 7311df0d..6c97e8ed 100644 --- a/docs/README.md +++ b/docs/README.md @@ -65,6 +65,7 @@ footer: MIT Licensed | Copyright © 2018-present Full Human LTD - [Next.js](guides/next.md) - [Razzle](guides/razzle.md) - [WordPress](guides/wordpress.md) +- [Hugo](guides/hugo.md) ### Common Questions diff --git a/docs/guides/hugo.md b/docs/guides/hugo.md new file mode 100644 index 00000000..8f94b84a --- /dev/null +++ b/docs/guides/hugo.md @@ -0,0 +1,150 @@ +--- +title: Hugo +lang: en-US +meta: + - name: description + content: PurgeCSS can be used with Hugo via Hugo Pipes asset processing + - itemprop: description + content: PurgeCSS can be used with Hugo via Hugo Pipes asset processing + - property: og:url + content: https://purgecss.com/guides/hugo + - property: og:site_name + content: purgecss.com + - property: og:type + content: website + - property: og:image + content: https://i.imgur.com/UEiUiJ0.png + - property: og:locale + content: en_US + - property: og:title + content: Remove unused CSS - PurgeCSS + - property: og:description + content: PurgeCSS can be used with Hugo via Hugo Pipes asset processing +--- + +# Hugo + +> Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. + +PurgeCSS can be used with [Hugo](https://gohugo.io/) via Hugo Pipes asset processing. + +## Tooling + +1. Install Hugo +1. Install Node.js + +## Write Stats + +In your `config.toml` file, add this: + +```toml +[build] + writeStats = true +``` + +Or, If using a `config.yaml` file, add this: + +```yaml +build: + writeStats: true +``` + +This tells Hugo to write a `hugo_stats.json` file to the project root as part of the build. It includes all tags, classes, and ids from your `*.html` templates. + +## Node Packages + +Run this to install the necessary packages: + +``` +npm install postcss postcss-cli @fullhuman/postcss-purgecss +``` + +If the `package.json` file at the project root doesn't exist yet, this will create it. + +If it's not already there, add `node_modules/` to your `.gitignore` file. + +## PostCSS Config File + +Create a `postcss.config.js` file at the project root with these contents: + +```js +const purgecss = require('@fullhuman/postcss-purgecss')({ + content: ['./hugo_stats.json'], + defaultExtractor: content => { + const els = JSON.parse(content).htmlElements; + return [ + ...(els.tags || []), + ...(els.classes || []), + ...(els.ids || []), + ]; + }, + safelist: [] +}); + +module.exports = { + plugins: [ + ...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgecss] : []) + ] +}; +``` + +See the [PurgeCSS configuration docs](https://purgecss.com/configuration.html) for details on each option. + +**Note:** `safelist` is an empty array (for now). Remember, only elements from your HTML templates are extracted. So, if your JS adds elements, you'll need to safelist them. + +## HTML Template + +In the HTML Template for your ``, add this: + +```html +{{ $css := resources.Get "css/style.css" | resources.PostCSS }} + +{{ if hugo.IsProduction }} + {{ $css = $css | minify | fingerprint | resources.PostProcess }} +{{ end }} + + +``` + +This assumes: + +- Your CSS file is at `assets/css/style.css` +- You want to minify and fingerprint the production version of this file + +If these assumptions aren't true for you, modify the code accordingly. + +## Use it + +Cool, now we can use it. + +Serve your site in development mode, which is the default: + +``` +hugo serve +``` + +Open your browser DevTools, go to the Network tab, then note the size of the CSS file. + +Now, `Control` + `C` to stop it, then serve your site in production mode: + +``` +hugo serve --environment production +``` + +Notice the CSS file now has a _much smaller_ size. + +## Environment + +If you don't want to pass the `--environment production` option, you can set this env var: + +``` +HUGO_ENVIRONMENT=production +``` + +## References + +- From 8453a4d26eff702a60d0fa50a83af16af9024cfc Mon Sep 17 00:00:00 2001 From: zwbetz-gh Date: Sun, 5 Jun 2022 20:26:18 -0500 Subject: [PATCH 2/4] add install links --- docs/guides/hugo.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/hugo.md b/docs/guides/hugo.md index 8f94b84a..d2e983ec 100644 --- a/docs/guides/hugo.md +++ b/docs/guides/hugo.md @@ -30,8 +30,8 @@ PurgeCSS can be used with [Hugo](https://gohugo.io/) via Hugo Pipes asset proces ## Tooling -1. Install Hugo -1. Install Node.js +1. Install [Hugo](https://gohugo.io/getting-started/installing/) +1. Install [Node.js](https://nodejs.org/en/download/) ## Write Stats From b06d00e648921de75bfbf9b39cb87613276d8a7e Mon Sep 17 00:00:00 2001 From: zwbetz-gh Date: Wed, 8 Jun 2022 21:36:59 -0500 Subject: [PATCH 3/4] update postcss.config.js per feedback --- docs/guides/hugo.md | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/docs/guides/hugo.md b/docs/guides/hugo.md index d2e983ec..b7bf6185 100644 --- a/docs/guides/hugo.md +++ b/docs/guides/hugo.md @@ -68,29 +68,39 @@ If it's not already there, add `node_modules/` to your `.gitignore` file. Create a `postcss.config.js` file at the project root with these contents: ```js -const purgecss = require('@fullhuman/postcss-purgecss')({ - content: ['./hugo_stats.json'], +const postCssPurgeCss = require('@fullhuman/postcss-purgecss'); +const fs = require('fs'); + +const hugoStats = fs.readFileSync('./hugo_stats.json').toString(); +const htmlElements = JSON.parse(hugoStats).htmlElements; + +const purgeCss = postCssPurgeCss({ + content: [], defaultExtractor: content => { - const els = JSON.parse(content).htmlElements; - return [ - ...(els.tags || []), - ...(els.classes || []), - ...(els.ids || []), - ]; + return { + tags: htmlElements.tags || [], + classes: htmlElements.classes || [], + ids: htmlElements.ids || [], + undetermined: content.match(/[A-Za-z0-9_-]+/g) || [], + attributes: {} + }; }, safelist: [] }); module.exports = { plugins: [ - ...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgecss] : []) + ...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgeCss] : []) ] }; ``` See the [PurgeCSS configuration docs](https://purgecss.com/configuration.html) for details on each option. -**Note:** `safelist` is an empty array (for now). Remember, only elements from your HTML templates are extracted. So, if your JS adds elements, you'll need to safelist them. +**Notes:** + +- `content` is an empty array (for now). You can _optionally_ give it paths to your JS files +- `safelist` is an empty array (for now). Try the `content` property first. If PurgeCSS is still too eager, you can safelist elements here ## HTML Template From 1fac3cb65a58afe9b9130e2c1f16e05da220a510 Mon Sep 17 00:00:00 2001 From: zwbetz-gh Date: Wed, 8 Jun 2022 21:50:44 -0500 Subject: [PATCH 4/4] Revert "update postcss.config.js per feedback" This reverts commit b06d00e648921de75bfbf9b39cb87613276d8a7e. --- docs/guides/hugo.md | 30 ++++++++++-------------------- 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/docs/guides/hugo.md b/docs/guides/hugo.md index b7bf6185..d2e983ec 100644 --- a/docs/guides/hugo.md +++ b/docs/guides/hugo.md @@ -68,39 +68,29 @@ If it's not already there, add `node_modules/` to your `.gitignore` file. Create a `postcss.config.js` file at the project root with these contents: ```js -const postCssPurgeCss = require('@fullhuman/postcss-purgecss'); -const fs = require('fs'); - -const hugoStats = fs.readFileSync('./hugo_stats.json').toString(); -const htmlElements = JSON.parse(hugoStats).htmlElements; - -const purgeCss = postCssPurgeCss({ - content: [], +const purgecss = require('@fullhuman/postcss-purgecss')({ + content: ['./hugo_stats.json'], defaultExtractor: content => { - return { - tags: htmlElements.tags || [], - classes: htmlElements.classes || [], - ids: htmlElements.ids || [], - undetermined: content.match(/[A-Za-z0-9_-]+/g) || [], - attributes: {} - }; + const els = JSON.parse(content).htmlElements; + return [ + ...(els.tags || []), + ...(els.classes || []), + ...(els.ids || []), + ]; }, safelist: [] }); module.exports = { plugins: [ - ...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgeCss] : []) + ...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgecss] : []) ] }; ``` See the [PurgeCSS configuration docs](https://purgecss.com/configuration.html) for details on each option. -**Notes:** - -- `content` is an empty array (for now). You can _optionally_ give it paths to your JS files -- `safelist` is an empty array (for now). Try the `content` property first. If PurgeCSS is still too eager, you can safelist elements here +**Note:** `safelist` is an empty array (for now). Remember, only elements from your HTML templates are extracted. So, if your JS adds elements, you'll need to safelist them. ## HTML Template