Cum să integrezi HUGO și Tailwind v3 în 5 pași

HUGO, generatorul de site-uri statice ultra-rapid, și Tailwind, framework-ul CSS bazat pe utilități, formează un duo puternic pentru construirea site-urilor web moderne și responsive. Acest ghid vă va arăta pas cu pas procesul de integrare a HUGO cu Tailwind, asigurându-vă că site-ul dumneavoastră este atât rapid, cât și frumos.

Cerințe preliminare

Înainte să începem, asigurați-vă că aveți instalate următoarele:

  • Node.js (pentru gestionarea Tailwind și a dependențelor sale)
  • HUGO (instalat prin Homebrew sau prin managerul de pachete al sistemului)
  • SASS mai precis Dart Sass (instalat global)
  • O înțelegere de bază a conceptelor HUGO și CSS

Pasul 1: Configurarea unui nou proiect HUGO

Începeți prin crearea unui nou proiect HUGO. Rulați următoarea comandă în Git Bash:

1
2
3
4
5
hugo new site website
cd website/
hugo new theme website
mv themes/website/layouts ./
rm -rf themes
Notă
Apoi deschideți proiectul cu IDE-ul preferat.

Pasul 2: Configurarea npm și instalarea Tailwind

În folderul proiectului, inițializați npm și instalați Tailwind împreună cu dependențele necesare:

Pasul 3: Configurarea Tailwind în proiectul HUGO

Crearea fișierului (tailwind.config.js)

Generați fișierul de configurare Tailwind folosind npx:

1
npx tailwind init

Apoi, înlocuiți conținutul cu:

1
2
3
4
5
6
7
8
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./hugo_stats.json'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Crearea fișierului (postcss.config.js)

Generați fișierul de configurare PostCSS folosind bash:

1
touch postcss.config.js

Această configurație asigură că Tailwind, autoprefixer și PurgeCSS funcționează împreună fără probleme:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
const tailwind = require('tailwindcss')(tailwindConfig);
const autoprefixer = require('autoprefixer');

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: [
    tailwind,
    ...(process.env.HUGO_ENVIRONMENT !== "development" ? [
      autoprefixer({
        browsers: ["> 1%", "last 3 versions", "Firefox >= 20", "iOS >=7"],
      }),
      purgecss,
    ] : []),
  ],
};

Crearea fișierului (main.scss)

Generați fișierul SCSS folosind bash în assets/css/main.scss:

1
2
mkdir -p assets/css
touch assets/css/main.scss

Apoi, înlocuiți conținutul cu:

1
2
3
4
5
@tailwind base;
@tailwind components;
@tailwind utilities;

@config "tailwind.config.js";

Pasul 4: Configurarea procesului de build HUGO

Pentru a activa integrarea Tailwind, ajustați fișierele de configurare HUGO:

Structura directoarelor

Nu copiați, este doar pentru referință
1
2
3
4
├── config
│   ├── _default
│   │   ├── build.toml
│   │   └── module.toml

Generați ambele fișiere de configurare folosind bash:

1
2
mkdir -p config/_default
touch config/_default/build.toml config/_default/module.toml

Crearea fișierului build.toml

Adăugați următoarele setări pentru a gestiona cache-ul și resursele:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
[buildStats]
enable = true

[[cachebusters]]
source = 'assets/watching/hugo_stats\.json'
target = 'main\.(css|styles|scss|sass)'
[[cachebusters]]
source = '(postcss|tailwind)\.config\.js'
target = '(css|styles|scss|sass)'
[[cachebusters]]
source = 'assets/.*\.(js|ts|jsx|tsx)'
target = 'js'
[[cachebusters]]
source = 'assets/.*\.(.*)$'
target = '$1'

Crearea fișierului module.toml

Configurați HUGO pentru a monta resurse și a genera hugo_stats.json:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[hugoVersion]
extended = true
min = '0.128.0'
max = '0.142.0'

[[mounts]]
source = 'assets'
target = 'assets'
[[mounts]]
source = 'content'
target = 'content'
[[mounts]]
source = 'data'
target = 'data'
[[mounts]]
source = 'layouts'
target = 'layouts'
[[mounts]]
source = 'static'
target = 'static'
[[mounts]]
source = 'hugo_stats.json'
target = 'assets/watching/hugo_stats.json'

Pasul 5: Actualizarea layout-urilor pentru CSS

În layouts/partials/head/css.html, definiți modul în care stilurile ar trebui încărcate:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{{ $options := dict
  "inlineImports" true
  "transpiler" "libsass"
  "targetPath" "main.css"
  "vars" site.Params.styles
  "enableSourceMap" (not hugo.IsProduction)
  "includePaths" (slice "node_modules")
}}

{{ $PostCSS := dict
  "config" "./postcss.config.js"
}}

{{ $styles := resources.Get "css/main.scss" }}
{{ $styles = $styles | resources.ExecuteAsTemplate "css/main.scss" . | css.Sass $options | css.PostCSS $PostCSS }}

{{ if or (eq hugo.Environment "staging") (eq hugo.Environment "production") }}
{{ $styles = $styles | minify | fingerprint "sha384" | resources.PostProcess }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" type="text/css" media="all" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous">
{{ else }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" type="text/css" media="all">
{{ end }}

Concluzie

Urmând acești pași, veți fi integrat cu succes Tailwind cu HUGO, activând un sistem de design modern și responsive pentru site-ul dumneavoastră. Această configurare vă va permite să folosiți puterea abordării utility-first a Tailwind, menținând în același timp procesul de build rapid și eficient.