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. 🙌
Top comments (21)
Could you explain this?
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
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
What do you mean?
You could use Netlify to deploy the website to production, if that is what you srw referring to.
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
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.
You could set up Hugo to work on GitHub pages, too:
gohugo.io/hosting-and-deployment/h...
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.
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. :)
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?
Sure, that's the best combination :D
Right? 🤐
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. :)
I am glad you like it.
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.