HUGE Announcement!
We’ve been cooking something interesting at TND which could benefit Hugo users. It’s a framework you can use on any Hugo project.
The concept revolves around making some critical Hugo features declarative.
Even though Hugo handles a lot from configuration, many of its new main features (pipes, js.build, image transformation) do not. HUGE aligns their ease of use with other features of Hugo so users don’t have to educate themselves about their API and focus on what matters: HTML, Javascript, CSS.
- Just a few lines of yaml to process scripts supporting React or styles supporting sass, tailwind, purgecss, you name it!
- Just some configuration maps to generate your hosted fonts’s @font-face declaration!
- An easy to use
partialto transform your media files using either Hugo’s image processing or imgix! - HUGE will also automatically generates all the SEO tags your content will need including JSON+LD.
- It also sports its own environment solution so testing environment is just as easy as the rest of Hugo!
Lastly, as HUGE handles most of your needs from configuration files, it also sports “configuration functions”. A way to point to a partial whose returned value will be used for your setting… Think of it as dynamic config à la JavaScript object.
HUGE is almost reaching Alpha, and has many more features to come!
At this stage we’re eager to get some feedbacks or questions on its initial features using this thread or the repo’s Discussions
More detailed info are available here
Get started!
The easiest way to get acquainted with HUGE might be by downloading one of its starters:
Basic
NPM free, SCSS and vanilla JS : GitHub - theNewDynamic/huge-starter: A basic Starter for HUGE
Tailwind + React
PostCSS, Tailwind and React: GitHub - theNewDynamic/huge-starter-tailwind-react: Huge Starter Tailwind + React
This is HUGE
Feel free to hit the repo or the wiki for detailed documentation on how to use HUGE and its many initial features.
HUGE Scripts by example!
HUGE will process your scripts with Hugo’s powerfull js.Build.
# _huge/config/scripts.yaml
scripts:
- name: hugely
path: js/hugely/index.jsx
<head>
{{ partial "huge/scripts/tags" "hugely" }}
</head>
HUGE Styles by example!
HUGE will process your styles with Hugo’s powerfull Pipes (sass, postcss, purgecss, tailwind, you name it…)
#_huge/config/styles.yaml
styles:
- name: main
path: css/main.scss
use:
- tailwind
<head>
{{ partial "huge/styles/tags" "main" }}
</head>
More features: SEO, Media, Environment etc…!
The rest of the features are detailed on the announcement post: Introducing HUGE, a Hugo framework | The New Dynamic