You can also put images in /content, alongside the markdown files, too. The image files in /static will remain, well, static. But if you put image files in /content, Hugo will automatically resize or convert the files into smaller format (at least in the theme I use), and you can insert the image with relative path this way.
Excellent quick and simple intro to Hugo. I've learned a lot and did not notice how the 40 minutes passed. You are the "Carl sagan" of web development! Thank you.
First, you are a fantastic guide through technical matters. Interesting to listen to, informative, just insulting enough to make sure everybody knows you're the expert. Second, it's interesting seeing a static site framework. I thought those were completely dead.
Same here. I started experimenting a few weeks ago after Luke started mentioning it. I couldn't find a good single video tutorial for it though so this is definitely a great addition.
I really like when you take the time to explain the folder hierarchy, it helps a lot to understand. It's funny how people gets triggered by this very simple static site generator.
This was supremely useful! Thanks so much for the walk through. Hugo is both super simple, but also super complicated. Being able to see you walk through it and pass along the wisdom you have gained helped me tons!
I had my doubts but I'm pretty impressed actually. I have a few projects coming up to make websites for my friends' businesses and I got really tired of all the bloat the moment i brought in a framework. This one seems tweakable enough at a low level without you having to devote all your time to minutiae.
I am going to slowly switch my client work from Wordpress to Hugo in the future. But I have a lot to learn in order to do it. I'm even thinking to one day bring together a team to create an open-source visual CMS dedicated to Hugo + Tailwind or an open source framework of choice for component functionality without a JS infrastructure. Great video, we miss you, Luke. Hope you're doing well.
To have proper segmentation, the best way to go would probably be to version control the site and the theme separately and use git submodules to load the theme into the site.
I learned HUGO a few years ago and liked what i saw but I did find parts of it kind of unintuitive, plus I feel like I forgot everything I learned, haha. This video should be perfect as a refresher, thanks!
Its meee Lugo! Hey Uncle Luke let me tell ya that discovering your channel was one of the greatest things that happened to me in 2019. Since then i selfhosted a lot of things, created my own web page (stealing your css), discovered new and interesting free software. Yesterday i found the FreedomBox project that sells little one board computers to make little server (like raspberries). They stated that the hardware made by olimex is totally open and libre. It comes preinstalled with Debian for Arm. Another one is LibreServer. Do you know about those projects? Cheers and thanks for all the content!
@@danielyrovas That makes sense, but if say someone wanted to follow along but with a different theme, knowing to download it as a submodule would be great. i know they can just read the documentation to find that out, or refernce the themes README, but it helps others.
That I used for based.cooking? It was awful and buggy and since there are so many file reads and writes going on, it is infinitely faster to do this in a compiled language.
Not to mention when you write shell scripts with commands like sed and awk, obviously you are calling external programs all the time. So that script that to analyze a single file and get data from it would call grep and sed or something 10 times, which was ridiculous, especially for a site with more than ten pages.
Great Video..... Question: I love HUGO for its simplicity... How is the user popularity of Hugo vs the other static site gens? Seems to have little TH-cam activity in the past couple years...
Does anyone know how to change the favicon on a hell-friend-ng theme? I've gave it a couple of tries through various guides but can get it working for some reason. Thank you in advance.
WIth content in Hugo being Markdown files, how does one add TailwindCSS classes to the content? The whole point of TailwindCSS is that you directly add the classes you need to the HTML elements. Am I right that you can't do that when using Hugo?
Does it generate code like word press where it adds in all that tracking stuff and monitoring of mouse hovers and stuff? And when you look at the code, is it all jumbled together so that the html is almost unreadable? I am untrusting of these things that make code automatically for good reason.
Key binding to turn off transparency! At 25:25 Luke turns off transparency, ostensibly with a key command. Help me out fellow LARBS users. How is this achieved? I looked around in all the configs and readme files.. nothing.. Pls help.. otherwise I have to "killall xcompmgr" ... I guess I just answered my own question.. I will alias those two commands or something: "killall xcompmgr" and "xcompmgr &"
But that's not great, because then you have to leave open the terminal that ran the "compmgr &" command. Pls lmk if you have any clues how to achieve transparency / opacity toggle on / off.
@@LukeSmithxyz From st/config.h { MODKEY, XK_s, changealpha, {.f = -0.05} }, { MODKEY, XK_a, changealpha, {.f = +0.05} }, so "Alt + s" for more transparency and "Alt + a" for less transparency.. Seems like a small thing, but it's huge for me. Thank you! God bless you ☦️
yeah so basically hugo also has an archetypes folder by default which creates markdown with "draft = false".... in the frontmatter so that took me a solid hour to figure out..... once again. SHOW you folder structure for the whole lesson plz lol. u told us to cloe this ito a hugo starter template so we theoretically will by default have a duplicate of these two folders. and yes hierarchically there should be an archetype in the root not the theme so this will be a common roadblock fore some who are just starting out!
Nice video 😊 Btw, your lf configuration, does it work properly on macOS? And/or do I need some real configuration for open/preview etc..? At the moment I’m using Midnight Commander, but looking for an alternative.
Hugo was cool... 5 years ago. But it's cooler than the old and moldy Jekyll tho :p But to the point tho, static site generator at the end is the way. I make all small-biz sites as static as they are only informational, they don't need wordpress and bloated SEO shit. if you're site is good and people visit it, SEO rankings will come naturally.
Honestly, this looks nice but if you know basic html css and javascript, Nuxt feels like a better and more flexible choice. I think it's lighter too. Template syntax for data binding and directives definitely feels more intuitive to me in Nuxt.
I think the point of this video is to demonstrate that you don't need a JavaScript framework to build a simple blog website. Nuxt is certainly a good option for building complex web apps that need to serve a number of features, but for simple use cases like this, a Static Site Generator will do. I'm aware Nuxt also supports Full SSG like Gatsby or Hugo, but as far as I know, they haven't implemented that yet with Nuxt 3.
@@Flash136 Yes Nuxt 3 has yet to fully implement SSG. I agree, building a simple website doesn't need much and Hugo is definitely a better option then Squarespace or Wix. Or even Wordpress. That being said, if you know javascript, you would want a more tailored tool which is still quite simple but gives you more control.
I love how you love simple things. Simple things are easy to understand and manage and they serve the purpose instead of adding unnecessary stuff.
Suckless philosophy
It's over... Luke is using a web development framework. The soydevs won...
It's golang so I think is fine
@@happygofishing literally nothing wrong with javascript
as long as its not overused it can be great
@@pazu_513 there are tons of things wrong with javascript
no i will not provide any evidence or citations
@@jdp_man1924 based
You can also put images in /content, alongside the markdown files, too.
The image files in /static will remain, well, static. But if you put image files in /content, Hugo will automatically resize or convert the files into smaller format (at least in the theme I use), and you can insert the image with relative path this way.
Nice tip
野生好和弦耶
Why not serve images through a CDN?
Excellent quick and simple intro to Hugo. I've learned a lot and did not notice how the 40 minutes passed. You are the "Carl sagan" of web development! Thank you.
First, you are a fantastic guide through technical matters. Interesting to listen to, informative, just insulting enough to make sure everybody knows you're the expert.
Second, it's interesting seeing a static site framework. I thought those were completely dead.
dude jinja2 is everywhere
Finally someone explains me what I have been too lazy to read for myself. Thx Luke
Ah yes perfect timing. This TOTALLY could've helped but the new hugo re-write of my website just went live
Time to live edit in production 😂
Same here. I started experimenting a few weeks ago after Luke started mentioning it. I couldn't find a good single video tutorial for it though so this is definitely a great addition.
I really like when you take the time to explain the folder hierarchy, it helps a lot to understand. It's funny how people gets triggered by this very simple static site generator.
I literally wanted to learn this today, can't believe this timeline
Amazing.. I had started the quickstart instructions and started futzing around just a couple days before this video dropped.
Awesome! no BS and straight to the point. There is more material here than in 5 hours in Skillshare
I have been trying to figure out Hugo's internal logic for like three weeks and I'm kicking myself for not watching this earlier. Thanks.
you know hugo is good when you see him making Italian gesture like every 5 min. (12:08)
LMAO 🤌🏼
This was supremely useful! Thanks so much for the walk through. Hugo is both super simple, but also super complicated. Being able to see you walk through it and pass along the wisdom you have gained helped me tons!
you should continue this series about HUGO, since it is very powerful tool, and you are not limited with only basics of it
Nice one Luke! I have been using it almost for 3 years now. Solid choice!
OMG LUKEBROS 40 MINUTES OF EPIC CONTENT !!!! ✋😲🤚
This made me lol'd
@@lendall00 HECKIN' EPIC!
Outstanding work here. Thank you. This was exactly the kind of comprehensive introduction I was hoping to find.
The tutorial I have been looking for. Thank you Luke for posting this!
Luke... you're the best dude. Thank you. For this and all your vids
I had my doubts but I'm pretty impressed actually. I have a few projects coming up to make websites for my friends' businesses and I got really tired of all the bloat the moment i brought in a framework. This one seems tweakable enough at a low level without you having to devote all your time to minutiae.
literally shaking rn
Just started building my blog in Hugo and this video popped up! Thanks!
I am going to slowly switch my client work from Wordpress to Hugo in the future. But I have a lot to learn in order to do it. I'm even thinking to one day bring together a team to create an open-source visual CMS dedicated to Hugo + Tailwind or an open source framework of choice for component functionality without a JS infrastructure. Great video, we miss you, Luke. Hope you're doing well.
Loved the Video. Explained exactly what I needed to do! Waiting for your next one.
Love the pace of the video. Thanks!
Epic Luke looking forward to more content like this!
To have proper segmentation, the best way to go would probably be to version control the site and the theme separately and use git submodules to load the theme into the site.
Thanks! Seems like the introduction I was searching for. Subscribed
Ah yeah Hugo, it made me love static site generators that I built one from scratch using NextJS.
I learned HUGO a few years ago and liked what i saw but I did find parts of it kind of unintuitive, plus I feel like I forgot everything I learned, haha. This video should be perfect as a refresher, thanks!
I really like Hugo, but I'm sceptical about the Go language because it's developed by Google. How dependent is this language from Google?
Its meee Lugo! Hey Uncle Luke let me tell ya that discovering your channel was one of the greatest things that happened to me in 2019. Since then i selfhosted a lot of things, created my own web page (stealing your css), discovered new and interesting free software. Yesterday i found the FreedomBox project that sells little one board computers to make little server (like raspberries). They stated that the hardware made by olimex is totally open and libre. It comes preinstalled with Debian for Arm. Another one is LibreServer. Do you know about those projects? Cheers and thanks for all the content!
I was hoping to add a banner to my hugo site but so far I have not found the answer
Thoughts on Jekyll vs Hugo?
Thank you very much, I've started to learn Computer programming and your videos are excellent. I'm watching them to learn.
thanks luke this vid really helped me in starting out with hugo
Luke, just curious, can you tell me the reason why you downloaded the theme directly over showing how to download the theme as a git submodule?
because you aren't actually supposed to use this as a theme, but rather a starting point to develop your own site.
@@danielyrovas That makes sense, but if say someone wanted to follow along but with a different theme, knowing to download it as a submodule would be great. i know they can just read the documentation to find that out, or refernce the themes README, but it helps others.
Love it. Any chance we will get a classic Luke Smith rant about github copilot 😍
Hey keeps your paws off this nice Christian boy Miss ((Katz))
@@PlasmaSnake369 roger that 🫡
Smuke Lith!
Nice vid. What was the problem with the Makefile+"Scripts using GNU commands" approach?
That I used for based.cooking? It was awful and buggy and since there are so many file reads and writes going on, it is infinitely faster to do this in a compiled language.
Not to mention when you write shell scripts with commands like sed and awk, obviously you are calling external programs all the time. So that script that to analyze a single file and get data from it would call grep and sed or something 10 times, which was ridiculous, especially for a site with more than ten pages.
@Andrii Shafar Nothing, it makes sense to use more complex generators when sites requiere it
@@LukeSmithxyz What do you think about pblog xyz then? Pandoc based, but might require more work than hugo tbh
Thank you for not treating me like an idiot. Great video!
super helpful, great breakdown! i'm a hugo-believer now!
Thanks! That was a really useful introduction to hugo!
His terminal looks awesome! And what is the OS he is using?
arch linux and st
Gaps are lookin thick lately, Luke
Does anyone know what is the tool that Luke is using to quickly view/traverse directories from terminal?
Lf
Nice video! I have one question: what commenting system do you suggest to integrate in Hugo web site?
I have been so waiting for this .
Finally it's here!
Luke is amazing teacher 👍
Luke annihilating pajεεts on youtube again
Excellent content Luke.
How do I use the title: '{{ replace .File.ContentBaseName `-` ` ` | title }}' if I want it to remove the hyphen from the tags visible on site?
I had similar problems like you said. chicken and egg. I made one site by luck. .and I decided I should learn more. Great video.!
Just in time. I'm just learning about hugo and u came
😏
how is it going?
It's like watching my dad making a website.
Love your videos btw
Awesome! I've used Jekyll quite a bit in the past. Why did you settle on HUGO?
when i run the hugo command im not getting any HTML in the public folder
where are the rest of the videos on how to add navbars and the rest
Great Video.....
Question: I love HUGO for its simplicity... How is the user popularity of Hugo vs the other static site gens? Seems to have little TH-cam activity in the past couple years...
Does anyone know how to change the favicon on a hell-friend-ng theme? I've gave it a couple of tries through various guides but can get it working for some reason. Thank you in advance.
WIth content in Hugo being Markdown files, how does one add TailwindCSS classes to the content? The whole point of TailwindCSS is that you directly add the classes you need to the HTML elements. Am I right that you can't do that when using Hugo?
Use `hugo server -D` to also render draft pages.
Does it generate code like word press where it adds in all that tracking stuff and monitoring of mouse hovers and stuff?
And when you look at the code, is it all jumbled together so that the html is almost unreadable?
I am untrusting of these things that make code automatically for good reason.
This helped me to modify a template I really liked that was missing social media links. Thanks!
This generated an index.xml in "public" but no index.html?
I think I will use this to write a documentation site for my app at work. Python sphinx isn't good enough.
Luke thanks for the great video, I’m trying to modify the template CSS but nothing works can you help or share some good tutorial?
Thanks!
What is this? Does anybody know this beautiful Mdir like thing? (15:20)
Is he using linux and if so how does he navigates folders in terminal like that, I mean without using cd command, any Ideas,?
linux with i3 window manager
He is using "lf" and "dwm"
What file manager are you using in the terminal?
Its called "lf"
Key binding to turn off transparency! At 25:25 Luke turns off transparency, ostensibly with a key command. Help me out fellow LARBS users. How is this achieved? I looked around in all the configs and readme files.. nothing.. Pls help.. otherwise I have to "killall xcompmgr" ...
I guess I just answered my own question.. I will alias those two commands or something: "killall xcompmgr" and "xcompmgr &"
But that's not great, because then you have to leave open the terminal that ran the "compmgr &" command. Pls lmk if you have any clues how to achieve transparency / opacity toggle on / off.
My st build has a key for decreasing transparency. Obviously it's only for one terminal at a time.
@@LukeSmithxyz
From st/config.h
{ MODKEY, XK_s, changealpha, {.f = -0.05} },
{ MODKEY, XK_a, changealpha, {.f = +0.05} },
so "Alt + s" for more transparency and "Alt + a" for less transparency..
Seems like a small thing, but it's huge for me. Thank you!
God bless you ☦️
Thanks for this Mr. Smith
Love hugo! Just started with it.
"I'm going to interject" 😭😭😭😭😭
i created a markdown file called about and its not creating the page.... no idea why
yeah so basically hugo also has an archetypes folder by default which creates markdown with
"draft = false".... in the frontmatter so that took me a solid hour to figure out..... once again. SHOW you folder structure for the whole lesson plz lol. u told us to cloe this ito a hugo starter template so we theoretically will by default have a duplicate of these two folders. and yes hierarchically there should be an archetype in the root not the theme so this will be a common roadblock fore some who are just starting out!
Thanks for the video Luke
Thank you Luke
@♜ Pínned by Luke Smith ah yes! Thanks "Pinned by Luke Smith". Very based!
How do I use the lugo theme on Netlify?
EXCELLENT VIDEO LUCAS
EXCELENTE VIDEO LUKE
When did Luke stop using brave
@♜ Pínned by Luke Smith he really is a bot
what is the IDE ?
This was very helpful.
Thank you.
What's next u gonna start making SPA (S stands for soy) React pages?
tags don't work for some reason
Nice video 😊 Btw, your lf configuration, does it work properly on macOS? And/or do I need some real configuration for open/preview etc..? At the moment I’m using Midnight Commander, but looking for an alternative.
20:20 maybe it's /posts
Luke can you record this in Latin?
JAMstack bros we can't stop winning
oh no Luke fell for the GO meme
Thanks for this video :)
Thank you for this great tutorial.
I wish you would do a video explaining how to integrate hugo with vimwiki
+8,000,000 geek points for the massive padding on your tiling window manager 😂
idk it's called margin.
@@zohaib0335 gaps
Why not just use ngnix?
Hugo was cool... 5 years ago. But it's cooler than the old and moldy Jekyll tho :p But to the point tho, static site generator at the end is the way. I make all small-biz sites as static as they are only informational, they don't need wordpress and bloated SEO shit. if you're site is good and people visit it, SEO rankings will come naturally.
Loved the vid thanks
Thanks a lot, man!
I write HTML and CSS directly for my website
Hugo kinda seems like a newfangled version of php with some helpful features
Honestly, this looks nice but if you know basic html css and javascript, Nuxt feels like a better and more flexible choice. I think it's lighter too. Template syntax for data binding and directives definitely feels more intuitive to me in Nuxt.
I think the point of this video is to demonstrate that you don't need a JavaScript framework to build a simple blog website.
Nuxt is certainly a good option for building complex web apps that need to serve a number of features, but for simple use cases like this, a Static Site Generator will do.
I'm aware Nuxt also supports Full SSG like Gatsby or Hugo, but as far as I know, they haven't implemented that yet with Nuxt 3.
@@Flash136 Yes Nuxt 3 has yet to fully implement SSG. I agree, building a simple website doesn't need much and Hugo is definitely a better option then Squarespace or Wix. Or even Wordpress.
That being said, if you know javascript, you would want a more tailored tool which is still quite simple but gives you more control.
Javascript frameworks are a cancer. You probably don’t need JavaScript on your site.
The thing is shipping without any JS code, I suggest using Astro.
I wish I would’ve had this a few years ago
It's so funny watching this as a frontend engineer
soydev?
@@ordici_