HUGO

Introducing HUGE, a Hugo framework

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 partial to 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

18 Likes

Thank you, @regis
It sounds a bit complicated for basic users. I suppose it will be very useful for complex projects and advanced users.

Thanks for your feeddack @andreseduardop.

HUGE is designed for developers building websites or themes with Hugo. I think the only users who won’t benefit from it are non-developers who just want to mount a theme and focus on content.

I don’t see HUGE being limited to “complex” projects either, as it helps with the most basic aspects of any given project, big or small: assets bundling, image transformation, SEO and more.

1 Like

@regis Just in case you wonder why your posts don’t appear instantly it’s because SEO is in the forum watched keywords list, due to past spam in the forum and every post containing it needs to be manually reviewed before being published. Sorry for the inconvenience.

Back on topic HUGE seems interesting and I will take it for a spin at some point. Thank you!

2 Likes

I understand. Thanks for the clarification, @regis.

1 Like

I was indeed wondering why and figured it might be something in the content. I totally understand and it’s no problem at all. Thanks for being on the lookout for fishy messages!

1 Like