DEV Community

loading...

If you are starting a new website, consider using Hugo

starbist profile image Silvestar Bistrović Originally published at silvestar.codes Updated on ・2 min read

Making a website with Hugo cover

This post was originally published on silvestar.codes.

If you are starting a new website, consider using Hugo. Other than it is “the world’s fastest framework for building websites,” it is packed with powerful features that would make the website development process more pleasable.

This post serves as an intro for the course “Making a website with Hugo.”

CLI

Once you install Hugo on your computer, you should have access to Hugo's command line interface. You could start a local web server within a millisecond. Not to mention that live reloading is working by default.

Themes

If you don't want or don't know how to build a custom theme, you could use one of the hundreds of themes available for Hugo. However, if you like to be unique, and if you want to challenge your creative side, you could create a custom style for your new project. You could even use built-in pipes to process your Sass or Scss files or to minify your final CSS file.

Templates

One of the critical features you should understand when starting with Hugo is lookup order. Hugo's mechanism for searching the correct template is well thought and designed to satisfy every project structure, even ones that are not trivial and straightforward.

Inside the templates, you could use variables, functions, logic, pipes, and other useful features. If you have a code snippet that you want to reuse in a different template, then you should extract that reusable code to a separate file called a partial.

The context

Another critical feature that you should understand is the context. The context, or “the dot,” depends on the environment. If you are inside the loop, then the context is the current item. If you are in the base template, then the context is the current page with all of its parameters.

Hugo allows you to define variables that don't depend on the context. This variable could be instrumental when comparing the current item parameter inside the loop, for example.

There is the global context, too. You could access the global context from every template file or partial in any time.

Support and Community

Hugo has a great community. On their community website, you could search for an answer for almost your problem. If you cannot find the solution, you could open a new discussion and someone would help you.

Conclusion

I have highlighted only five features that make the process of developing a new website so enjoyable, but that is just a small part of what Hugo could offer to you.

If you are interested in making a website with Hugo by now, I encourage you to take a look at my Skillshare course.

The fastest twenty users would get the course for free. 🙌

Discussion (25)

pic
Editor guide
Collapse
tux0r profile image
tux0r

Hugo has a great community.

This is probably the only relevant advantage compared to my other favorites Pelican (awesome themes), Coleslaw (awesome programming language), Grav (a better Typo3 in my opinion) and BlogC++ (which is mine). Sadly, it is also a self-fulfilling prophecy: If you only go where other people already are, you will not help the other communities to grow. :-)

Collapse
starbist profile image
Silvestar Bistrović Author

Sadly, it is also a self-fulfilling prophecy: If you only go where other people already are, you will not help the other communities to grow.

Could you explain this?

Collapse
tux0r profile image
tux0r

Advertising the de-facto leading static blog generator (assuming that Jekyll is only second today which I don't know for sure) will automatically attract more people to it and does not make much sense in my opinion, for the same reason why advertising for Coca-Cola does not: probably everyone interested in such things already knows that.

What I mean is that it could be more of a gain for everyone to spend more time with the other alternatives. Most of them have most of Hugo's advantages, minus the large community. All of us can change that any day. :-)

Thread Thread
starbist profile image
Silvestar Bistrović Author

Okay, I understand your point of view.

Could you provide some useful links to frameworks you mentioned? Or could you write what is so great about it?

Thread Thread
tux0r profile image
tux0r

Well, the staticsitegenerators list linked above is a good starting point. Greatness is highly subjective though, as everyone has different needs. I even have a bashblog in one of my projects because I needed something really simple.

Thread Thread
starbist profile image
Silvestar Bistrović Author

Wow, that is a great list.

I already heard about Pelican and Grav, and they are pretty popular, according to the number of stars. They were brought to my attention by the Lobster community, but I haven't had time to explore it yet. I never heard of Coleslaw.

I am already familiar with Jekyll, Hexo, and Middleman, and I even wrote an overview about them:
dev.to/starbist/overview-of-popula...

Thank you for bringing the attention to other frameworks, too.

Thread Thread
tux0r profile image
tux0r

I never heard of Coleslaw.

You should try it. I wrote two plugins for it. :-)

edit: Yup, we talked about Pelican there.

Collapse
rhymes profile image
rhymes

If you use the popular tool you won't use the others which means the popular tool will become more popular and attract more people, which in turns it makes it become more popular and so on :D

Thread Thread
starbist profile image
Silvestar Bistrović Author

I see. Thank you for the clarification.

Hugo is popular, you are right. But it is also great, in my opinion.
Maybe it is popular because it is great. :D

Thread Thread
tux0r profile image
tux0r

Or because nobody looks out for probably even better alternatives. Good enough is the worst enemy of good.

Thread Thread
rhymes profile image
rhymes

Hugo is popular, you are right. But it is also great, in my opinion.

Sure, that's the best combination :D

Thread Thread
starbist profile image
Collapse
bauripalash profile image
Palash Bauri 👻

Sadly, it is also a self-fulfilling prophecy: If you only go where other people already are, you will not help the other communities to grow. :-)

I Totally Agree with you.

Who knows, there might be an awesome Static Site Generator out there in a GitHub Repo with only a Single Star

Collapse
starbist profile image
Silvestar Bistrović Author

What do you mean?
You could use Netlify to deploy the website to production, if that is what you srw referring to.

starbist profile image
Silvestar Bistrović Author

You could set up Hugo to work on GitHub pages, too:
gohugo.io/hosting-and-deployment/h...

Collapse
devhead profile image
dev-head

Looks interesting for personal projects; thanks for the highlight.

Professionally, I stay away from static site gens because managing them at scale can be a real nightmare. Just be sure you choose it for the right reasons; would be my advice to others looking into it.

Collapse
starbist profile image
Silvestar Bistrović Author

At what scale are we talking about here?

I wouldn't rule out static page generators for bigger projects. It doesn't have to be a problem to maintain the website if the structure is well organized. I am part of the two separate projects that are not simple, and maintenance is not a nightmare at all. :)

Collapse
adnanrahic profile image
Adnan Rahić

I love Hugo! Making a PWA with an above 95 Lighthouse score is surprisingly easy. Even for someone like me, who's not a front-end engineer. :)

Collapse
starbist profile image
Silvestar Bistrović Author

I am glad you like it.

starbist profile image
Silvestar Bistrović Author

Well, you could set up A/B testing, custom hooks, branch deploys, handle form sumbissions, and many more. And all that for free!
Netlify is awesome.

starbist profile image
Silvestar Bistrović Author

I hear you, but I don' get it.
If you set up Netlify, then you could configure a trigger to start a new build on every push.
👍