Hugo

Hugo

Written by Thom Krupa

Last update: 6/7/2024

0 comments

Like Eleventy, Hugo encourages progressive enhancement rather than full JS hydration. It's not tied up with any JavaScript framework.

Data fetching

Hugo supports only local flat files like markdown. If you prefer to edit content through a nice user interface, take a look at Git-based CMSs. Popular options are DecapCMS and Forestry.

To fetch data from an external API, for example, a headless CMS, use function.

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

File Structure

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

Hugo has a few high-level concepts such as archetypes . Think of it as templates or content schema, the place when you can define fields for sections of your website.

To learn more about specific folders, check out the official docs.

Ecosystem

Because of its build performance and simplicity Hugo has gained many fans over the years. In case you have an issue, you can get an answer pretty fast at the official public forum.

Hugo maintains a large collection of themes. Those are not official projects. Most of them are created by Hugo developers from all over the world. Offered on MIT license - free to use and modify. There is a variety of categories to explore: simple blogs, documentation, landing pages, resume, and many more.

Showcase

[@portabletext/react] Unknown block type "showcase", specify a component for it in the `components.types` prop

How to get started?

Installation depends on the operating system you use, so go and check the installing docs. You don't need to have installed Go to use Hugo.

Once you have Hugo installed, you can run:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

Now you can choose a theme or create a new one.

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

To add content, run:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

To start development server, run:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

Your development environment will be available at http://localhost:1313/ .

Conclusion

Hugo might feel a little bit old-fashioned for those of you who like to use modern JS frameworks like React, Vue, or Svelte. But Hugo's age is its strength as well. Battle-tested on many big projects by well-known companies gives you the confidence it won't disappear tomorrow.

[@portabletext/react] Unknown block type "prosCons", specify a component for it in the `components.types` prop