Hugo in 100 Seconds

Hugo is an extremely fast static site generator for building websites with markdown. It is written in the Go programming language and provides a large collection of content management tools for developers.
#webdevelopment #programming #100SecondsOfCode
🔗 Resources
Hugo on Github github.com/gohugoio/hugo
Hugo Docs gohugo.io/
Go in 100 Seconds • Go in 100 Seconds
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Hugo for JamStack
- What is Hugo?
- Hugo vs Jekyll
- Hugo vs 11ty
- Why is Hugo so fast?
- Hugo basics tutorial
- How to get started with Hugo?

[@mrbaeman39lolman60]

Hugo is the back-end developer's best friend for making front-ends.

[@hugo4it]

I am indeed

[@vieilatome2257]

@@hugo4it thanks hugo

[@syedmohammadsannan964]

@@hugo4it My guy, thank you!

[@Ghaleon]

would you say it is a good choice for a Blog? (even with a lot of posts)

[@mrbaeman39lolman60]

@@Ghaleon Yes! There are lots of themes dedicated to bloggers :)

[@ayushvyas3401]

You must be kidding me, I was working with markdowns just today for a project that required me to parse the markdown files to generate a bunch of static pages. Guess this might be useful for what I'm doing, thank you so much.

[@vikingthedude]

11ty and other SSGs do the same. Haven’t tried hugo, but ive used 11ty for a while and the experience there isn’t bad either

[@PranshuTheGamer]

this dude always uploads what we think about

[@Joe-km7xi]

@@vikingthedude 11ty is goated

[@danielwilczak7833]

If your markdown is documentation and your using python. Mkdocs is also a good way to solve your problem.

[@karimjordan9461]

There is also Astro.js

[@prince5922]

Can't wait to add 10 years of Hugo experience to my CV.

[@mhoang2006]

Guess i will have to wait 5 more years

[@rortox1539]

@@mhoang2006 Yeah it's still 2020 for me

[@dagoshuaaaaaaaart]

same

[@priyapepsi]

can't wait to finally find a funny "can't wait to add x years of y experience to my cv" comment

[@dagoshuaaaaaaaart]

@Derpitron can't wait to finally find a funny "can't wait to find a funny 'can't wait to add x years of y experience to my cv' comment" comment

[@jojobii]

Imagine a "10 Static Site Generators" video, including demos of frameworks like Hugo, Jekyll, 11ty, and Astro...

[@davidleach9381]

I need this!!!!

[@nomms]

@@davidleach9381 just use Hugo. Uses markdown, has stupid fast build times, is easy to extend, and is quick to learn.

[@alfredogonzalez9420]

I used it in a project around 2018, honestly it's a pretty good tool to generate blog content, once you get the hang of it's syntax and how it generates the content, it's pretty easy to add new entries, even for non devs.

[@tedchirvasiu]

Would you recommend it for anything more complex?

[@RockingGameVideos]

@@tedchirvasiu define complex, it's not as dynamic as other stacks

[@killerlion6]

Very well said “once you get hang of it”. I am a fullstack developer (primarily backend) with go as main language at the backend and I hate go templates. Rather wish it was anything else.

[@morgengabe1]

@@killerlion6 why do you hate them? edit i do too but it's mostly because of the kinds of work arounds you need to format output for readability.

[@alfredogonzalez9420]

@MLU8811 cool tip, looks like a great tool to anyone who knows python and needs a blog.

[@vanvanni_nl]

Would love to see HUGO extended video, with Forms, Server Side operations etc.

[@MobiusCoin]

Can't complain about another JS framework when it's not in JS!

[@sadatmoya1016]

like seriously love these 100 second videos, you are good at summarizing the content I really appreciate your time for sparing and sharing with us this information, LOVE your channel, man

[@tnvmadhav2442]

I use hugo for my blog - very fast, easy and customisable 100% recommend

[@RavenGhostwisperer]

Changed our project site from Jekyll to Hugo and made a lot of people happy ;)

[@collimarco]

I use Jekyll because I am more comfortable with Ruby... Why do you prefer Hugo? What are the advantages over Jekyll?

[@RavenGhostwisperer]

@@collimarco The short version: easier to setup, easier to manage. There is (close to) zero Ruby knowledge in our collaboration, so dropping such a dependency is a plus. The other benefit: good tutorials I can point people to. So if you are comfortable with Jekyll - no need to change.

[@nick.h7566]

End the Fed, I second that! 🔥

[@Refresh5406]

Fireship makes me coom when he makes based references like that

[@temp1029]

Had to scroll way to far to find this comment, guess not many people noticed that little Easter egg!

[@plasmarade]

As a C++ developer, I find web development hard.

[@davien001]

Consistency bro. You'll laugh when it all comes together.

[@michaelm8044]

I loved using HUGO in production in my daily job. I worked with it this year and it is so fast.

[@diegocastaneda4325]

A comparison video between Hugo, Jekyll and Sveltlekit would be amazing.

[@3vonline]

Another great video. Thank you. Till now I didn't know anything about HUGO

[@juniordevmedia]

I admire your BLAZINGGGLY fast transfer of knowledge

[@6-1-6]

Not enough rocket emojis

[@KeganVanSickle]

End the Fed, love it!

[@milkgrapes6420]

Waited too long for this video thank you so much

[@felixc.programs8209]

Always love your new videos! I wouldn't have started my own Tech KZbin channel if it wasn't for finding yours. That's all!

[@dhupee]

okay this is interesting, since i was never a front-end first programmer, so this is quite interesting stuff to learn

[@konaiseo8088]

Amazing video, thank you! 1. What the syntax do you use in your HTML-files within VS-code? The code syntax is Hugo related? I mean, everything just between {{ }}, etc. 2. Any tools/useful VS Code extensions for Hugo? Your code always auto-formatted. Or it's just prettier?

[@MohamedAllamTech]

Go and Hugo is the way to Go.

[@noodle-eater]

I literally just post my hugo post a few minutes ago and find this lol, awesome content as always, I learn more about hugo now.

[@AmirHosseinHonardust]

Hugo is a huge brick of gold in the treasure chest of Go developed programs.

[@arturkre5793]

i am a long time hugo user and recently switched to sveltekit, the problem with hugo is the golang template engine. Its not so powerfull and limiting. With sveltekit i have much more power and it also works better with 3rd party CMS like strapi / sanity. If you have 100k+ md content then hugo is the way to go

[@jerseyse410]

I recently used Svelte for a front-end websocket demo for a client at work and completely loved it. For some reason I picked it up easier and felt more familiar with it than I did with React. I can't wait for Svelte to become more mainstream.

[@unorthodox1430]

@@jerseyse410 felt the sameway, after using svelte, React just feels really bloated. state management with svelte stores is just so much better than ContextAPI/Redux

[@DioneMohammed]

@@unorthodox1430 you said state management and the word better? guest it's time for me to learn Svelte

[@ayushvyas3401]

@@DioneMohammed haha same , learning svelte from today

[@tabiasgeehuman]

@@DioneMohammed a reaction I saw when someone got to svelte stores for the first time in the docs was “DO YOU KNOW HOW DIFFICULT THIS IS TO DO IN REACT”

[@_shehryar]

I currently switched from Jekyll to Hugo and it is a bliss never I had so much fun! it is really nice to work with and superb fast. On my M1 Mac it compiles in 2 ms.

[@gobicorner]

what project are you working on using hugo ?

[@_shehryar]

@@gobicorner I build my website previously with Hugo. Now I switched to Astro

[@st-jn2gk]

We neeeeeed a hugo course, I haven't seen a single good one. A Fireship pro course or at the very least a beyond-100-seconds video please and thank you.

[@Ryan-xq3kl]

hugo lacks a good standard but is amazingly customizable

[@jad_c]

luke smith

[@st-jn2gk]

@@jad_c I didn't like his tbh

[@giladgd]

You should cover Ts.ED, it's a TS framework for API, it's really a TS hidden gem

[@PenguinCrayon269]

it's just nestjs wtf. js dev keep reinventing shit

[@ecoded3033]

This is awesome. Great highlight

[@osilearning]

Always waiting for your new videos

[@pramod7426]

I use Hugo at work, it's awesome !

[@DcBDPL]

I love hugo for making docs!

[@pupilohoandslate]

Hugo is such a perfect tool to publish huge amounts of content with few lines of code, with the tradeoff of less flexibility using it thought only a CVS, I used it once to publish a website that could be almost instantly replicated to a P2P network, it's the perfect tool against censorship.

[@4citi]

Literally just hearing about this cool thing. Thanks

[@luisz0339]

I can’t wait to see a scheme in 100 seconds video!

[@runtimejpp]

As always thanks a lot brotha!!!!!

[@leonardobarros3174]

s and a couple EDM and Dubstep goals for myself, and I guess I better start learning sowhere. Thanks for the great vid!

[@infinitychapters3944]

Thank you, it works perfect!

[@freelearningcode1936]

Thank you, you make me want to start my KZbin channel 🔥

[@ServantStatusMinistries]

I am almost completely ignorant of understanding code and this video was extremely easy

[@cy_]

This makes me want to start a blog!

[@TJDeez]

You had me at written in go

[@larrytron1992]

Wow, I'll have to check it out

[@lovemexico]

Go is so fast, thank you!

[@ehuntley83]

A full Hugo course would be awesome… just sayin’ 😁

[@perodactyl490]

I agree

[@ivandimitrov4410]

watch?v=ZFL09qhKi5I This guy made me switch from HTML to HUGO on my personal website. Worth a watch.

[@derletsplayer9140]

no

[@angryman9333]

There are

[@PenguinCrayon269]

He won't do that

[@lelouchunderground]

Hugo is pretty nice, I created 2 beautiful blog sites using it, but the learning curve is not easy, and the documentation is not that good. But now that I know how to use I like a lot.

[@ulysses3183]

I agree completely, the hugo in action book helped a ton for me to get going

[@dankelly]

I've always wondered why someone hasn't created an easy to use front end for these blazingly fast, yet extremely complicated backends.

[@cindrmon]

YESSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOUUUUUUUUU!!!! i've used this for the longest time and finally its being recognized!!!! thanks you thank you thank youuuuuuu

[@millionaire-millennial]

I built a 72,000 page blog using hugo. Was pretty fast.

[@salman0ansari]

proof or didn't happened

[@jaimesoad]

According to the page build time from the video (16ms), it should've taken about 20 minutes to build all of your 72k pages. Yeah, pretty fast!

[@brianevans4]

@@jaimesoad I think they aim for 1ms per page, so perhaps slightly more than a minute to build the site in question? I'd be interested to know the actual time taken in the real world scenario

[@lionlike5856]

Dat end the fed easter egg

[@thierrybo6304]

I am working on a personal blog and i hesitate between Hugo and Jekyl. For a tiny project like this, Hugo's fast rendering is irrelevant, so which one would you choose?

[@dieselvin592]

My first contact is Jekyll, if at this time to change Hugo, will consume some learning time, so I still continue Jekyll

[@urban7152]

I guess the day I will have the courage to try out web dev I'll try to learn this

[@daedalus5070]

Looks cool! Reminds me of Liquid 💧

[@lexsemenenko7044]

We used huge for almost every project and for internal docs 3 years ago. I remember it was amazing but stopped using it when switched jobs as wanted to invest more in learning React and some backend stuff. Only positive memory of Hugo

[@jboomhauer]

Whoa how did you do the like button animation? That's fire! 🔥🔥🔥

[@nevoyu]

I maintain one of the worlds largest hugo deployments (sadly cannot disclose) and the build time is in minutes, used to take hours.

[@MohamedAllamTech]

I bet no other SSG can do it faster (if it can do it at all..)

[@yoda_soda]

11ty did a speed comparison on most ssg and Hugo is definitely the winner hands down

[@zhaleyleitnib5150]

CIA wiki?

[@AdeyCoder]

😮 Cool, I like it. thanks

[@jorgepvenegas]

Another gem

[@shooshx]

sub-millisecond rendering time means you generate something in under 1 msec, not 16 msec.

[@d.sherman8563]

It compiled the entire code base in 16ms

[@Pandazaar]

render time != compile time

[@YuriG03042]

@@d.sherman8563 16ms is not sub-millisecond. read again the parent comment

[@d.sherman8563]

@@YuriG03042 Sub ms was referring to the time to render a page when the server is running, the 16ms you see in the video is compiling the server.

[@theclockworkcadaver7025]

@@YuriG03042 Your listening comprehension leaves a lot to be desired, yet you're so confident in your incorrect understanding of what Jeff was saying. This is called hubris, and it's a serious character flaw.

[@amans6504]

Pleasse tRPC next, it's an excellent project that need some highlights. I love it

[@alexander_richter]

I use HUGO for my own blog and I love it. Thanks Bep!

[@paoloose]

Can you share it?, I would like to see it

[@unstable8968]

I suggest covering the nim programming language (if you haven't)

[@stevemcwin]

Hey Jeff, could you do a video on the Nim programming language please?

[@fu2201]

You are the best person in the world and my 4th best friend overall

[@medbenbrahim3246]

I used it in 2020, it's very powerful SSG and the syntax isn't that bad, and integrates well with some CMSs

[@gobicorner]

cms like sanity ?

[@guilherme5094]

Thanks👍

[@hugo-onzakorderra8851]

Thank you

[@henridu31]

This way of structuring templates looks really similar to the django template engine !

[@TrueSQN]

Great video! ELM in 100 seconds can't find :D

[@hugocardoso1488]

Always new that Hugo is awesome ahah

[@_colonial_]

Hugo is great, I use it for my blog! It's super easy to install (unlike Jekyll, which requires Ruby, a Ruby framework, and a round-robin horror show of mystery C dependencies), there are a lot of great themes available, and deploying just takes a simple one-liner that builds the site and rsyncs the output to my VPS.

[@rhemtro]

that's it Go all the way it is!

[@monstereugene]

watching this at two times speed makes me feel like a god.

[@zulik9831]

fun fact: here in spain Hugo is a common name, in fact a friend of mine is named Hugo

[@daedalus5070]

How fast is he?

[@dakauann]

The same happens here in Brazil

[@zulik9831]

@@daedalus5070 welp he has already gone to the car license exam 5 times so not that much, at least learning, and i have never seen he running so idk

[@AbhishekBM]

@@daedalus5070 blazingly fast

[@Meknassih]

Same in France.

[@zhotpotrecipe]

How about combining it with framework like react?

[@yangshunz]

Would love to see Docusaurus being introduced one day!

[@rohitteja]

If it just improves build time, how is it compared to vite?

[@WalterWoshid]

Git submodules? Next tutorial please :)

[@jfk1337]

for even faster build times use zola. its written in rust

[@CharmCaster]

Can you make a video about your research process for your 100 sec videos.

[@timelimitexceeded0]

which vscode theme is this ?

[@quachhengtony7651]

I have a question: is it really that important to use a "I am speed" language like Go to build your web app in a container world where you can just spin up multiple instances of a Nodejs app?

[@tacticalassaultanteater9678]

What we perceive as the speed of a language doesn't actually determine how many people you can serve. It never has, you could always have multiple servers and a load balancer. The speed of a runtime or language determines how many CPU cycles (bus bytes, etc.) it takes to serve a single user. You can support this from a static package if you're using a dedicated VM or an on-prem server, or pay for what you use in a dynamic cloud setting, possibly with containers. If your problem is really performance and not efficient resource distribution (eg. if you're running as many instances as there are virtual cores at your disposal), spinning up more containers isn't going to help.

[@quachhengtony7651]

@@tacticalassaultanteater9678 in which cases would you choose Go over Node?

[@tacticalassaultanteater9678]

​@@quachhengtony7651 I'm not thoroughly familiar with Go, I mainly use Typescript and more recently Rust. I chose Rust over Go to study because Go and Node have somewhat overlapping use cases so it felt like more valuable knowledge. I pick Rust wherever I can afford the extra dev time that inherently comes with its level of control. Cheaper or faster development comes with safer, higher level languages. Cheaper operation comes with lower level languages. In our industry that kind of upfront cost isn't normally acceptable, but when it is I would choose it every time.

[@pandumulyamuhammadsyah]

Hope you would make video about distill from R. It can make sort of blog in rmarkdown include all of it's features.

[@hugofco0772]

Nice :)

[@LunyaTheGay]

Nice video

[@hugo4it]

Omg a video about me! immense

[@Jesse-lw2hd]

Love the blog post 'end-the-fed' you must be a Bitcoiner!

[@110110010]

It's like PHP before the OOP wave hit

[@ignacyk3203]

Love that the video buffered on "Fastest way to render HTML in the world"

[@hippityhop9522]

This feels like Django framework

[@OscarFURIOUS]

Hugo + Netlify is the best

[@bugdeveloper]

hugo is awesome

[@mariocamspam72]

Interesting tech

[@IlkkaSavilampi]

I will totally steal your style for my video CV :)

[@josejuan98]

It would cool to make an Scala or Apache Spark in 100 seconds

[@julienchandelle]

You should make a video about plone et volto, that's an awesome CMS and one of the oldest

[@trendster9463]

When I read the title, I suddenly remembered Hugo from Alita Battle Angel

[@xr.spedtech]

Good, I can focus on the back end

[@asimsheikh429]

Everybody loves Hugo

[@saviour643]

wow, nice