Skip to content

Commit 17dc7ad

Browse files
zwbetz-ghzwbetz-gh
authored
docs: Guide for Hugo (#918)
* Guide for Hugo * add install links * update postcss.config.js per feedback * Revert "update postcss.config.js per feedback" This reverts commit b06d00e.
1 parent 8c76544 commit 17dc7ad

File tree

4 files changed

+156
-0
lines changed

4 files changed

+156
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ You can find the PurgeCSS documentation on [this website](https://purgecss.com).
5050
- [React.js](https://purgecss.com/guides/react.html)
5151
- [Next.js](https://purgecss.com/guides/next.html)
5252
- [Razzle](https://purgecss.com/guides/razzle.html)
53+
- [Hugo](https://purgecss.com/guides/hugo.html)
5354

5455
## Getting Started
5556

‎docs/.vuepress/config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,10 @@ export default defineUserConfig<DefaultThemeOptions>({
178178
text: "WordPress",
179179
link: "/guides/wordpress",
180180
},
181+
{
182+
text: "Hugo",
183+
link: "/guides/hugo",
184+
},
181185
],
182186
},
183187
{

‎docs/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ footer: MIT Licensed | Copyright © 2018-present Full Human LTD
6565
- [Next.js](guides/next.md)
6666
- [Razzle](guides/razzle.md)
6767
- [WordPress](guides/wordpress.md)
68+
- [Hugo](guides/hugo.md)
6869

6970
### Common Questions
7071

‎docs/guides/hugo.md

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
title: Hugo
3+
lang: en-US
4+
meta:
5+
- name: description
6+
content: PurgeCSS can be used with Hugo via Hugo Pipes asset processing
7+
- itemprop: description
8+
content: PurgeCSS can be used with Hugo via Hugo Pipes asset processing
9+
- property: og:url
10+
content: https://purgecss.com/guides/hugo
11+
- property: og:site_name
12+
content: purgecss.com
13+
- property: og:type
14+
content: website
15+
- property: og:image
16+
content: https://i.imgur.com/UEiUiJ0.png
17+
- property: og:locale
18+
content: en_US
19+
- property: og:title
20+
content: Remove unused CSS - PurgeCSS
21+
- property: og:description
22+
content: PurgeCSS can be used with Hugo via Hugo Pipes asset processing
23+
---
24+
25+
# Hugo
26+
27+
> Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
28+
29+
PurgeCSS can be used with [Hugo](https://gohugo.io/) via Hugo Pipes asset processing.
30+
31+
## Tooling
32+
33+
1. Install [Hugo](https://gohugo.io/getting-started/installing/)
34+
1. Install [Node.js](https://nodejs.org/en/download/)
35+
36+
## Write Stats
37+
38+
In your `config.toml` file, add this:
39+
40+
```toml
41+
[build]
42+
writeStats = true
43+
```
44+
45+
Or, If using a `config.yaml` file, add this:
46+
47+
```yaml
48+
build:
49+
writeStats: true
50+
```
51+
52+
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.
53+
54+
## Node Packages
55+
56+
Run this to install the necessary packages:
57+
58+
```
59+
npm install postcss postcss-cli @fullhuman/postcss-purgecss
60+
```
61+
62+
If the `package.json` file at the project root doesn't exist yet, this will create it.
63+
64+
If it's not already there, add `node_modules/` to your `.gitignore` file.
65+
66+
## PostCSS Config File
67+
68+
Create a `postcss.config.js` file at the project root with these contents:
69+
70+
```js
71+
const purgecss = require('@fullhuman/postcss-purgecss')({
72+
content: ['./hugo_stats.json'],
73+
defaultExtractor: content => {
74+
const els = JSON.parse(content).htmlElements;
75+
return [
76+
...(els.tags || []),
77+
...(els.classes || []),
78+
...(els.ids || []),
79+
];
80+
},
81+
safelist: []
82+
});
83+
84+
module.exports = {
85+
plugins: [
86+
...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgecss] : [])
87+
]
88+
};
89+
```
90+
91+
See the [PurgeCSS configuration docs](https://purgecss.com/configuration.html) for details on each option.
92+
93+
**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.
94+
95+
## HTML Template
96+
97+
In the HTML Template for your `<head>`, add this:
98+
99+
```html
100+
{{ $css := resources.Get "css/style.css" | resources.PostCSS }}
101+
102+
{{ if hugo.IsProduction }}
103+
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
104+
{{ end }}
105+
106+
<link
107+
rel="stylesheet"
108+
href="{{ $css.RelPermalink }}"
109+
integrity="{{ $css.Data.Integrity }}"
110+
>
111+
```
112+
113+
This assumes:
114+
115+
- Your CSS file is at `assets/css/style.css`
116+
- You want to minify and fingerprint the production version of this file
117+
118+
If these assumptions aren't true for you, modify the code accordingly.
119+
120+
## Use it
121+
122+
Cool, now we can use it.
123+
124+
Serve your site in development mode, which is the default:
125+
126+
```
127+
hugo serve
128+
```
129+
130+
Open your browser DevTools, go to the Network tab, then note the size of the CSS file.
131+
132+
Now, `Control` + `C` to stop it, then serve your site in production mode:
133+
134+
```
135+
hugo serve --environment production
136+
```
137+
138+
Notice the CSS file now has a _much smaller_ size.
139+
140+
## Environment
141+
142+
If you don't want to pass the `--environment production` option, you can set this env var:
143+
144+
```
145+
HUGO_ENVIRONMENT=production
146+
```
147+
148+
## References
149+
150+
- <https://gohugo.io/hugo-pipes/postprocess/>

0 commit comments

Comments
 (0)