Чтобы летать, нужен попутный ветер

Содержание

Почему TailwindCSS
Управление активами в Hugo
Установка TailwindCSS
Настройте Hugo на использование PostCSS
Ссылки
Управление активами в Hugo
Установите TailwindCSS
Настройте Hugo на использование PostCSS

Почему TailwindCSS

В одном из своих предыдущих проектов я влюбился в TailwindCSS. Я знаю, что для некоторых это очень спорный фреймворк, но лично для меня, бэкенд-разработчика с 11-летним стажем, это был первый раз, когда я получал удовольствие от добавления стилей во фронтенд. Я даже создал с его помощью шаблон vue-ts, как часть другого цикла статей.

Управление активами в Hugo

Существует несколько способов добавить библиотеку CSS в наш блог, потому что Hugo поддерживает несколько способов управления активами. Если вы раньше использовали TailwindCSS, вы можете знать, что для лучшей интеграции с другими инструментами сборки, такими как webpack, Vite и т.д., он поддерживает PostCSS из коробки. К счастью для нас, Hugo также поддерживает его. Мы собираемся установить TailwindCSS как плагин PostCSS, а затем использовать трубу Hugo PostCSS для интеграции его в наш блог. С этим планом давайте приступим.

Установка TailwindCSS

Мы начинаем с того, что следуем официальной документации в папке blog/.

Установите TailwindCSS и PostCSS

$ npm install --save-dev tailwindcss postcss autoprefixer

Добавьте файл .gitignore для проектов Node.js
Создайте файлы конфигурации.
```
$ npx tailwindcss init --postcss
```
Добавлена опция --postcss для инициализации файла postcss.config.js.

Настройте пути к шаблонам. Наши единственные файлы content расположены в папке blog/src/layouts.

diff --git a/blog/tailwind.config.js b/blog/tailwind.config.js
index 32e3abd..7b5a700 100644
--- a/blog/tailwind.config.js
+++ b/blog/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: ["./src/layouts/**/*.html"],
   theme: {
     extend: {},
   },

Добавьте директивы Tailwind в ваш CSS
```
$ mkdir -p blog/src/assets
$ touch !$/main.css
```
и затем обновите только что созданный blog/src/assets/main.css.
```
diff --git a/blog/src/assets/css/main.css b/blog/src/assets/css/main.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/blog/src/assets/css/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
```
также мы обновим .editorconfig, .pre-commit-config.yaml и .prettierrc.yaml, чтобы включить поддержку типа файлов css.

Настройте Hugo на использование PostCSS

Теперь, когда мы установили TailwindCSS, мы готовы начать настройку нашего блога для его использования через трубу PostCSS.

Из документации

Hugo Pipe’s PostCSS требует установки в окружении пакета JavaScript postcss-cli (npm install -g postcss postcss-cli) вместе с любым используемым плагином (плагинами) PostCSS (например, npm install -g autoprefixer).

Установите postcss-cli.
```
$ npm install --save-dev postcss-cli
```

Добавьте тег link с нашим обработанным CSS в blog/src/layouts/partials/head.html.

diff --git a/blog/src/layouts/partials/head.html b/blog/src/layouts/partials/head.html
index b9f74a6..556a0cf 100644
--- a/blog/src/layouts/partials/head.html
+++ b/blog/src/layouts/partials/head.html
@@ -3,4 +3,6 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ .Site.Title }}</title>
+    {{ $css := resources.Get "css/main.css" | resources.PostCSS }}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}" />

Добавьте команду scripts в package.json для запуска hugo в среде NPM. По умолчанию Hugo будет искать node_modules/.

Начиная с Hugo 0.78.1 стартовой директорией для разрешения пакетов NPM (а также пакетов, которые находятся в папке node_modules) всегда является основная папка проекта.

Но из-за нашей структуры проекта нам нужно запускать hugo как команду npm. Мы будем использовать start в качестве имени команды, потому что в npm есть сокращение для этого.
```
diff --git a/blog/package.json b/blog/package.json
index 3f40e6d..5b5d864 100644
--- a/blog/package.json
+++ b/blog/package.json
@@ -1,4 +1,7 @@
 {
+    "scripts": {
+        "start": "hugo --source src server --baseURL http://localhost/"
+    },
     "devDependencies": {
         "autoprefixer": "^10.4.7",
         "postcss": "^8.4.14",
```
Прибыль!

Теперь у нас есть блог, использующий TailwindCSS.

Ссылки

Управление активами в Hugo

https://tailwindcss.com
https://github.com/imomaliev/vue-ts-tailwind
https://dev.to/imomaliev/series/13950
https://gohugo.io/categories/asset-management
https://postcss.org
https://gohugo.io/hugo-pipes/postcss/

Установите TailwindCSS

https://tailwindcss.com/docs/installation/using-postcss
https://github.com/github/gitignore/blob/main/Node.gitignore

Настройте Hugo на использование PostCSS

https://github.com/postcss/postcss-cli
https://docs.npmjs.com/cli/v6/using-npm/scripts