hugo boilerplate

Hugo Cowerplate

Hugo Cowerplate для создания современных сайтов?

Этот шаблон охватывает Hugo с Gulp в качестве вашего местного конвейера.

PostCSS и WebPack + Babel используются для CSS и JS Compling & Transpiling.

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

Browserslist используется для настройки поддержки браузеров.

SVG Sprite используется для генерации SVG Sprite.

Установка

Предварительные условия

Чтобы использовать Gulp, вы должны установить узлы и NPM.

Настраивать

После установки предпосылок клонируйте репозиторий на местную машину, а затем запустите:

 npm install

Это установит Hugo, а также все зависимости узлов, необходимые для запуска вашей среды Hugo. Это может занять некоторое время!

Разработка

Все задачи разработки выполняются с использованием npm run. См. "scripts" в package.json для полного списка команд.

Местное развитие

Локальная разработка работает на BrowerSync, вы сможете быстро разрабатывать сайты через:

• Локальный сервер разработки на http://localhost:3000/ .
• Автоматические обновления CSS без перезагрузки страницы
• Автоматическая перезагрузка страницы при изменении контента

Запуск локального сервера разработки так же просто, как и запуск:

 npm start

Это будет отображать весь проект, датированный или истекший контент в будущем или срок действия, который не включен в вашу производственную сборку.

Если вы хотите разработать с сайтом, как он появится в производстве, запустите:

 npm run preview

Производственная сборка

Чтобы создать окончательную производственную сборку на своей местной машине, вы можете запустить:

 npm run build

Свежая производственная сборка вашего сайта окажется в dist/ Directory.

Хьюго командует

Все команды Hugo's CLI можно выполнить через NPM, работая:

 npm run hugo -- <command> --<param>

Например:

 npm run hugo -- new posts/example-post.md
// => creates a new post at hugo/content/posts/example-post.md

Структура проекта

 .
├── .tmp/                  // Temporary directory for development server
├── dist/                  // The production build
├── hugo/                  // The Hugo project; content, data and static files
|   ├── .forestry/         // Contains Forestry.io configuration files
|   ├── content/           // Where all site content is stored 
|   ├── data/              // TOML, YAML or JSON files containing site data 
|   ├── layouts/           // Your site's layouts
|   |   ├── partials/      // Your site's partials
|   |   └── shortcodes/    // Your site's shortcodes
|   ├── static/            // Where all static files live
|   |   ├── css/           // Where compiled CSS files live
|   |   ├── js/            // Where compiled JS files live
|   |   └── uploads/       // Where user uploads are stored
|   └── config.toml        // The Hugo configuration file
└─── src/
     ├── css               // CSS/SCSS source files to be compiled to /css/
     └── js                // JS source files to be compiled to /js/

Встроенный SVG

Любые SVG, найденные в src/img/ будут объединены в один спрайт SVG в hugo/static/svg/sprite.symbol.svg .

Этот шаблон поставляется с простой частичной для использования SVG в ваших макетах. Вы можете выбрать SVG, передав его ID.

 {{/* Using a logo stored at src/img/github.svg */}}
{{ partial "svg" (dict "id" "github" "class" "optional-class" "width" 32 "height" 32) -}}

Примечание: параметры class , width и height являются необязательными

Тестирование

Этот патронный пластин поставляется со стандартными конфигурациями Eslint и StyleLint, которые будут заполнить ваши CSS и JS для ошибок или проблем с общим стилем, которые работают с самыми популярными IDE.

Тесты также можно запускать из командной строки:

• JS: npm run eslint
• CSS: npm run stylelint

Если вы хотите автоматически исправить ошибки Lint, вы также можете сделать это и из командной строки:

• JS: npm run eslint:fix
• CSS: npm run stylelint:fix

Уборка

Этот шаблон самоочищается и будет удалять производственные dist/ и разработка .tmp/ папки каждый раз, когда команда выполняется, чтобы убедиться, что их содержимое всегда обновлено.

Если вы хотите очистить вручную, бегите:

 npm run clean

Конфигурация

Все задачи строительства обрабатываются Gulp и расположены в gulpfile.babel.js . Все части сборки настраиваются в дискретных файлах, чтобы упростить управление.

Пути

Все пути источника сборки и назначения могут быть настроены из gulp.config.js .

Гюго

Команды сборки для HUGP могут быть настроены из gulp.config.js . Команды сборки устанавливаются на основе переменной среды NODE_ENV . При желании вы можете загрузить разные аргументы, используя переменную среды GENERATOR_ARGS .

Доступны четыре варианта:

• default : команды сборки по умолчанию, которые всегда запускаются
• development : дополнительные команды сборки для сервера разработки
• preview : дополнительные команды сборки для сервера разработки производства
• production : дополнительные команды сборки для производственных сборки

Browsersync Development Server

Конфигурация для BrowserSync находится в .browsersyncrc.js

CSS/SASS

Конфигурация для PostCSS найдена в .postcssrc.js

JavaScript

Конфигурация для WebPack найдена в .webpackrc.js

Поддержка браузера

Как PostCSS, так и WebPack используют .browserslistrc для определения поддержки браузеров при компиляции.

Советы и ресурсы

• Чтобы узнать о том, как развиваться с Хьюго, см. Документацию Хьюго
• Чтобы узнать, как использовать систему шаблонов Хьюго, см. Документацию
• Статические файлы должны храниться в папке hugo/static/ так как они должны появляться на застроенном сайте , например, файл CNAME должен храниться в hugo/static/CNAME чтобы стать /CNAME
• Файлы JavaScript составлены из корня src/js/ TO js/{filename}.js
  • JavaScript может быть записан с использованием ES6, поддержки require() и import операторов из пакетов NPM и локальных файлов JS
• Файлы CSS собираются из корня src/css/ TO css/{filename}.css
  • Заявления импорта разрешаются и включены в скомпилированные файлы CSS
• Для совместимости с лесным хозяйством или другими CMS убедитесь, что скомпилированные файлы CSS и JS в папке hugo/
• Переменные среды предоставляются для ваших шаблонов, которые можно получить в шаблонах следующим образом: {{ getenv "HUGO_ENV" }}
  • Для разработки трубопроводов это development
  • Для производственных трубопроводов это равна production
  • Для предварительного просмотра лесного хозяйства это равносильно staging

Использование с лесным хозяйством

Этот репозиторий поставляется с основным примером контента, предварительно сконфигурированного для работы с лесным хозяйством, которое вы можете использовать, чтобы начать создавать свой сайт.

• Развевай этот хранилище в своем аккаунте
• Подпишитесь на лесной счет и импортируйте этот репозиторий как «существующий сайт»
• При запросе «root Project Root» введите hugo

Внося

Все взносы приветствуются! Пожалуйста, смотрите наш кодекс поведения и поддержки.

Лицензирование

Этот проект Cowerplate выпущен по лицензии MIT.