Skip to content

Commit a6f557f

Browse files
deiningdeining
committed
Framework guides: add Hugo SSG
1 parent 5334891 commit a6f557f

File tree

7 files changed

+182
-0
lines changed

7 files changed

+182
-0
lines changed

‎next.config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -418,6 +418,11 @@ const nextConfig = {
418418
destination: "/docs/installation/framework-guides/symfony",
419419
permanent: false,
420420
},
421+
{
422+
source: "/docs/guides/hugo",
423+
destination: "/docs/installation/framework-guides/hugo",
424+
permanent: false,
425+
},
421426
{
422427
source: "/docs/guides/meteor",
423428
destination: "/docs/installation/framework-guides/meteor",

‎src/app/(docs)/docs/installation/framework-guides/hugo.tsx

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import { css, html, Page, shell, Step, Tile, yaml } from "./utils";
2+
import Logo from "@/docs/img/guides/hugo.react.svg";
3+
4+
export let tile: Tile = {
5+
title: "Hugo",
6+
description: "Static site generator written in Go.",
7+
Logo,
8+
};
9+
10+
export let page: Page = {
11+
title: "Install Tailwind CSS with Hugo",
12+
description: "Setting up Tailwind CSS in a Hugo project.",
13+
};
14+
15+
export let steps: Step[] = [
16+
{
17+
title: "Create your project",
18+
body: (
19+
<p>
20+
Start by creating a new Hugo project if you don't have one set up already.
21+
</p>
22+
),
23+
code: {
24+
name: "Terminal",
25+
lang: "shell",
26+
code: shell`
27+
hugo new my-site
28+
cd my-site
29+
`,
30+
},
31+
},
32+
{
33+
title: "Install Tailwind CSS",
34+
body: (
35+
<p>
36+
Install the Tailwind CSS CLI v4.1 or later.
37+
</p>
38+
),
39+
40+
code: {
41+
name: "Terminal",
42+
lang: "shell",
43+
code: shell`
44+
npm install --save-dev tailwindcss @tailwindcss/cli
45+
`,
46+
},
47+
},
48+
{
49+
title: "Configure build parameters",
50+
body: (
51+
<p>
52+
Add these build parameters to your site configuration.
53+
</p>
54+
),
55+
code: {
56+
name: "hugo.yaml",
57+
lang: "yaml",
58+
code: yaml`
59+
build:
60+
buildStats:
61+
enable: true
62+
cachebusters:
63+
- source: assets/notwatching/hugo_stats\.json
64+
target: css
65+
- source: (postcss|tailwind)\.config\.js
66+
target: css
67+
module:
68+
mounts:
69+
- source: assets
70+
target: assets
71+
- disableWatch: true
72+
source: hugo_stats.json
73+
target: assets/notwatching/hugo_stats.json
74+
`,
75+
},
76+
},
77+
{
78+
title: "Create CSS entry file",
79+
body: <p>If you want Tailwind CSS to ignore your `hugo_stats.json`, list it in your `.gitignore` file.</p>,
80+
code: {
81+
name: "assets/css/main.css",
82+
lang: "css",
83+
code: css`
84+
@import "tailwindcss";
85+
@source "hugo_stats.json";
86+
`,
87+
},
88+
},
89+
{
90+
title: "Create partial template",
91+
body: <p>Create a partial template to process the CSS with the Tailwind CSS CLI.</p>,
92+
code: {
93+
name: "layouts/_partials/css.html",
94+
lang: "html",
95+
code: html`
96+
{{ with (templates.Defer (dict "key" "global")) }}
97+
{{ with resources.Get "css/main.css" }}
98+
{{ $opts := dict "minify" (not hugo.IsDevelopment) }}
99+
{{ with . | css.TailwindCSS $opts }}
100+
{{ if hugo.IsDevelopment }}
101+
<link rel="stylesheet" href="{{ .RelPermalink }}">
102+
{{ else }}
103+
{{ with . | fingerprint }}
104+
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
105+
{{ end }}
106+
{{ end }}
107+
{{ end }}
108+
{{ end }}
109+
{{ end }}
110+
`,
111+
},
112+
},
113+
{
114+
title: "Start your build process",
115+
body: (
116+
<p>
117+
Start the preview of your site.
118+
</p>
119+
),
120+
code: {
121+
name: "Terminal",
122+
lang: "shell",
123+
code: shell`
124+
hugo server -M
125+
`,
126+
},
127+
},
128+
{
129+
title: "Start using Tailwind in your Hugo project",
130+
body: (
131+
<p>
132+
Add the partial template to the <code>{"<head>"}</code> of your base template and start using Tailwind’s utility classes to style the
133+
content of your templates and pages.
134+
</p>
135+
),
136+
code: {
137+
name: "layouts/baseof.html",
138+
lang: "html",
139+
code: html`
140+
<!doctype html>
141+
<html>
142+
<head>
143+
<meta charset="UTF-8" />
144+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
145+
<!-- [!code highlight:2] -->
146+
{{ partialCached "css.html" . }}
147+
</head>
148+
<body>
149+
<!-- [!code highlight:4] -->
150+
<h1 class="text-3xl font-bold underline">
151+
<!-- prettier-ignore -->
152+
Hello world!
153+
</h1>
154+
</body>
155+
</html>
156+
`,
157+
},
158+
},
159+
];

‎src/app/(docs)/docs/installation/framework-guides/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const guides: Guide[] = await create({
2626
astro: () => import("./astro"),
2727
qwik: () => import("./qwik"),
2828
rspack: () => import("./rspack"),
29+
hugo: () => import("./hugo"),
2930
});
3031

3132
async function create(list: Record<string, () => Promise<any>>): Promise<Guide[]> {

‎src/app/(docs)/docs/installation/framework-guides/utils.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const html = dedent;
88
export const astro = dedent;
99
export const twig = dedent;
1010
export const elixir = dedent;
11+
export const yaml = dedent;
1112
export const handlebars = dedent;
1213

1314
export interface LogoComponent {

‎src/components/code-example.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,7 @@ const highlighter = await createHighlighter({
215215
"tsx",
216216
"twig",
217217
"vue",
218+
"yaml",
218219
"md",
219220
],
220221
});

‎src/components/highlight.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ export const highlighter = await createHighlighter({
106106
"tsx",
107107
"twig",
108108
"vue",
109+
"yaml",
109110
"md",
110111
],
111112
});

‎src/docs/img/guides/hugo.react.svg

Lines changed: 14 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)