Hugo Actually Explained (Websites, Themes, Layouts, and Intro to Scripting)

Рет қаралды 126,541

Күн бұрын

Hugo will allow you to create optimal website, but we shall overcome the "Hugo Hump" in this video. You gotta understand how templates and themes were before you get into the really impactful stuff.
I still do explain partials, shortcodes and other more scriptable things here, but the main goal is getting you to understand how a Hugo site is configured and arranged.
Link to the repository we use here:
github.com/LukeSmithxyz/lugo
00:00 Introduction
00:55 How to Install Hugo and on Themes
02:13 Getting Started
04:29 The Directory Structure of a Hugo Site
06:27 The hugo server command
08:20 Making new Pages
10:23 Notice the Tags
12:36 Directories and the template in archetypes/
14:40 Subdirectories in content
16:28 Linking and images in Hugo
18:47 Customizing Indexes (Interjection from the Future)
20:43 Looking at Layouts
20:02 Lists vs Singlefiles
24:48 First look at Hugo Scriptability
27:40 The RSS template
28:27 Homepages/indexes without lists of articles
29:43 Hugo's Scriptability and Partials
34:33 "I Can't Believe It's Not a Dynamic Site!"
35:22 Shortcodes (Example on Images)
38:43 Hugo Review
My website: lukesmith.xyz
Classical books reprinted by me: lindypress.net
Get all my videos off KZfaq: videos.lukesmith.xyz
or Odysee: odysee.com/$/invite/@Luke:7
Please donate: donate.lukesmith.xyz
BTC: bc1qw5w6pxsk3aj324tmqrhhpmpfprxcfxe6qhetuv
XMR: 48jewbtxe4jU3MnzJFjTs3gVFWh2nRrAMWdUuUd7Ubo375LL4SjLTnMRKBrXburvEh38QSNLrJy3EateykVCypnm6gcT9bh
OR affiliate links to things l use:
www.vultr.com/?ref=8384069-6G Get a VPS and host a website or server for anything else.
www.epik.com/?affid=we2ro7sa6 Get a cheap and reliable domain name with Epik.

Пікірлер: 214

@SimoAtlas 2 жыл бұрын

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.

@korosama 2 жыл бұрын

Suckless philosophy

@nicechordwiwi 2 жыл бұрын

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.

@astronemir Жыл бұрын

Nice tip

@user-yc9rp2jg1s Жыл бұрын

野生好和弦耶

@compton8301 Ай бұрын

Why not serve images through a CDN?

@wannabelikegzus 2 жыл бұрын

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.

@Kersich86 2 жыл бұрын

dude jinja2 is everywhere

@pazu_513 2 жыл бұрын

It's over... Luke is using a web development framework. The soydevs won...

@Ruben-tm3fg 2 жыл бұрын

It's golang so I think is fine

@pazu_513 2 жыл бұрын

@@happygofishing literally nothing wrong with javascript

@asleeponmykeyboard3039 2 жыл бұрын

as long as its not overused it can be great

@jdp_man1924 2 жыл бұрын

@@pazu_513 there are tons of things wrong with javascript no i will not provide any evidence or citations

@mistakenmeme 2 жыл бұрын

@@jdp_man1924 based

@isahilliogluu 8 ай бұрын

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.

@vidhukant1073 2 жыл бұрын

Ah yes perfect timing. This TOTALLY could've helped but the new hugo re-write of my website just went live

@tacitus_ 2 жыл бұрын

Time to live edit in production 😂

@Hobojoe529 2 жыл бұрын

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.

@MisterConscio 2 жыл бұрын

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.

@johncurran9597 Жыл бұрын

Outstanding work here. Thank you. This was exactly the kind of comprehensive introduction I was hoping to find.

@justanotheruserxxl 2 жыл бұрын

Finally someone explains me what I have been too lazy to read for myself. Thx Luke

@Studio1XN 2 жыл бұрын

Nice one Luke! I have been using it almost for 3 years now. Solid choice!

@deveshtarasia2636 2 жыл бұрын

The tutorial I have been looking for. Thank you Luke for posting this!

@triscal 2 ай бұрын

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!

@FourOf92000 Жыл бұрын

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.

@jaimecss Жыл бұрын

Awesome! no BS and straight to the point. There is more material here than in 5 hours in Skillshare

@AwesomeMediaify 2 жыл бұрын

I literally wanted to learn this today, can't believe this timeline

@unpostable 2 жыл бұрын

Amazing.. I had started the quickstart instructions and started futzing around just a couple days before this video dropped.

@grybro Жыл бұрын

Loved the Video. Explained exactly what I needed to do! Waiting for your next one.

@emacsking4310 2 жыл бұрын

OMG LUKEBROS 40 MINUTES OF EPIC CONTENT !!!! ✋😲🤚

@korosama 2 жыл бұрын

This made me lol'd

@emacsking4310 2 жыл бұрын

@@korosama HECKIN' EPIC!

@leothegeek4432 2 жыл бұрын

Just started building my blog in Hugo and this video popped up! Thanks!

@window.location 2 жыл бұрын

you know hugo is good when you see him making Italian gesture like every 5 min. (12:08)

@Raccoonov 2 жыл бұрын

LMAO 🤌🏼

@pasanflo Жыл бұрын

Thanks! Seems like the introduction I was searching for. Subscribed

@RoynelFlores 2 жыл бұрын

Epic Luke looking forward to more content like this!

@Monaco_mechanical 2 жыл бұрын

Luke... you're the best dude. Thank you. For this and all your vids

@ezu5131 2 жыл бұрын

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.

@Antifragileathlete Жыл бұрын

Thank you very much, I've started to learn Computer programming and your videos are excellent. I'm watching them to learn.

@dancinglazer1628 2 жыл бұрын

literally shaking rn

@big_whopper Жыл бұрын

Love the pace of the video. Thanks!

@hamodi2458 2 жыл бұрын

glad you are making tech videos again 🙂

@futuregootecks Жыл бұрын

super helpful, great breakdown! i'm a hugo-believer now!

@sergeykuznetsov7688 Жыл бұрын

Thanks! That was a really useful introduction to hugo!

@tudorcelstan 3 ай бұрын

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.

@toddrlyons Жыл бұрын

This helped me to modify a template I really liked that was missing social media links. Thanks!

@holymegadave 2 жыл бұрын

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!

@rishavbhardwaj2930 3 ай бұрын

thanks luke this vid really helped me in starting out with hugo

@niikasd 2 жыл бұрын

This was very helpful. Thank you.

@LukeAvedon 2 жыл бұрын

Love hugo! Just started with it.

@JBuchmann 6 ай бұрын

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!

@braiinworms 2 жыл бұрын

Love it. Any chance we will get a classic Luke Smith rant about github copilot 😍

@liamconverse8950 2 жыл бұрын

Hey keeps your paws off this nice Christian boy Miss ((Katz))

@braiinworms 2 жыл бұрын

@@liamconverse8950 roger that 🫡

@sbr895 2 жыл бұрын

Nice video! I have one question: what commenting system do you suggest to integrate in Hugo web site?

@ape853 2 жыл бұрын

Thanks for the video Luke

@andljoy 2 жыл бұрын

I have been so waiting for this .

@BurgerKingHarkinian 2 жыл бұрын

Finally it's here!

@marcuswest4572 5 ай бұрын

Excellent content Luke.

@gentoogentoo4476 2 жыл бұрын

Luke annihilating pajεεts on youtube again

@acronproject Жыл бұрын

Thanks for this Mr. Smith

@thedrunknmunky6571 4 ай бұрын

Thank you for not treating me like an idiot. Great video!

@coo463 2 жыл бұрын

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.

@PixelTrik 2 жыл бұрын

Ah yeah Hugo, it made me love static site generators that I built one from scratch using NextJS.

@nerminsky1039 9 ай бұрын

Luke is amazing teacher 👍

@joshpck 2 жыл бұрын

Awesome! I've used Jekyll quite a bit in the past. Why did you settle on HUGO?

@Yunes948 2 жыл бұрын

Loved the vid thanks

@orri0 Жыл бұрын

Thanks a lot, man!

@chaussebenjamin 9 ай бұрын

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.

@lukaszpodgorski 4 ай бұрын

Thanks for this video :)

@tentickterror8308 2 жыл бұрын

EXCELLENT VIDEO LUCAS

@holymegadave 2 жыл бұрын

EXCELENTE VIDEO LUKE

@BhanteSubhuti 5 ай бұрын

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.!

@jayfisher3359 9 ай бұрын

How do I use the title: '{{ replace .File.ContentBaseName `-` ` ` | title }}' if I want it to remove the hyphen from the tags visible on site?

@brookster7772 Жыл бұрын

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 KZfaq activity in the past couple years...

@JKhalaf Жыл бұрын

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?

@jonathanhoyos8191 2 жыл бұрын

Just in time. I'm just learning about hugo and u came

@BurgerKingHarkinian 2 жыл бұрын

😏

@1Lll_llllllLLLLllllll_llL1 6 ай бұрын

how is it going?

@davidr2421 2 жыл бұрын

Gaps are lookin thick lately, Luke

@infinityminuszero 2 жыл бұрын

Does anyone know what is the tool that Luke is using to quickly view/traverse directories from terminal?

@linuxramblingproductions8554 2 жыл бұрын

@dvp7388 Жыл бұрын

I was hoping to add a banner to my hugo site but so far I have not found the answer

@IlyaasKapadia Жыл бұрын

How do I use the lugo theme on Netlify?

@epix4300 2 жыл бұрын

cool stuff

@urisan1 Жыл бұрын

Thank you for this great tutorial. I wish you would do a video explaining how to integrate hugo with vimwiki

@alejandromedina1019 2 жыл бұрын

Thank you Luke

@BurgerKingHarkinian 2 жыл бұрын

@♜ Pínned by Luke Smith ah yes! Thanks "Pinned by Luke Smith". Very based!

@flyingdinosaur8871 Жыл бұрын

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!

@saavestro2154 2 жыл бұрын

Nice vid. What was the problem with the Makefile+"Scripts using GNU commands" approach?

@LukeSmithxyz 2 жыл бұрын

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.

@LukeSmithxyz 2 жыл бұрын

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.

@saavestro2154 2 жыл бұрын

@Andrii Shafar Nothing, it makes sense to use more complex generators when sites requiere it

@d3stinYwOw Жыл бұрын

@@LukeSmithxyz What do you think about pblog xyz then? Pandoc based, but might require more work than hugo tbh

@minoo1160 Жыл бұрын

What file manager are you using in the terminal?

@klerunder7769 Жыл бұрын

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?

@NicolasRuizX 2 жыл бұрын

It's like watching my dad making a website. Love your videos btw

@chickenwings273 2 жыл бұрын

Thanks luke

@umbragloom440 Жыл бұрын

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?

@danielyrovas Жыл бұрын

because you aren't actually supposed to use this as a theme, but rather a starting point to develop your own site.

@umbragloom440 Жыл бұрын

@@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.

@newmilleniumblowjob 2 жыл бұрын

good to see that my ni99a luke started to use librewolf

@oglothenerd 8 ай бұрын

Smuke Lith!

@Embassy_of_Jupiter 2 жыл бұрын

Cloudflare pages + workers allows you to host static websites + some dynamicity with FaaS. Since it's cloudflare it's insanely fast and responsive. I wonder if that is possible in a community driven way. Everyone has a box at home that provides hosting and your website's root location, but you also host other peoples website if you are closer or they need more bandwith and vice versa. A sort of P2P Platform as a Service. Kind of like I too pee or 0 net, but for normal websites on the normal interweb.

@francisgg7046 2 жыл бұрын

I think I will use this to write a documentation site for my app at work. Python sphinx isn't good enough.

@sleepntsheep1169 2 жыл бұрын

"I'm going to interject" 😭😭😭😭😭

@programmer474 5 ай бұрын

when i run the hugo command im not getting any HTML in the public folder

@nassehk Жыл бұрын

His terminal looks awesome! And what is the OS he is using?

@1Lll_llllllLLLLllllll_llL1 6 ай бұрын

arch linux and st

@mcveyj 2 жыл бұрын

Thoughts on Jekyll vs Hugo?

@ade5324 2 жыл бұрын

Thanks :D

@user-wi6gp6zs6p Жыл бұрын

tags don't work for some reason

@IbrahimAli-nv5bz Жыл бұрын

Is he using linux and if so how does he navigates folders in terminal like that, I mean without using cd command, any Ideas,?

@elainequan3031 Жыл бұрын

linux with i3 window manager

@annahri 2 жыл бұрын

Use `hugo server -D` to also render draft pages.

@danielyrovas 2 жыл бұрын

oh no Luke fell for the GO meme

@frogfox9577 Жыл бұрын

what is the IDE ?

@Joel-nz1gd 7 ай бұрын

where are the rest of the videos on how to add navbars and the rest

@fossforever512 2 жыл бұрын

I may use this to remake my website

@ditchcomfort 2 жыл бұрын

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.

@francisgg7046 2 жыл бұрын

Luke can you record this in Latin?

@Cookiekeks Жыл бұрын

Why not just use ngnix?

@stephenlock9704 2 жыл бұрын

+8,000,000 geek points for the massive padding on your tiling window manager 😂

@zohaib0335 2 жыл бұрын

idk it's called margin.

@jad_c 2 жыл бұрын

@@zohaib0335 gaps

@user-kl5pk9pd3t 9 ай бұрын

What is this? Does anybody know this beautiful Mdir like thing? (15:20)

@unpostable 2 жыл бұрын

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 &"

@unpostable 2 жыл бұрын

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 2 жыл бұрын

My st build has a key for decreasing transparency. Obviously it's only for one terminal at a time.

@unpostable 2 жыл бұрын

@@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 ☦️

@yadat6354 2 жыл бұрын

JAMstack bros we can't stop winning

@trailblazingfive 2 жыл бұрын

What's next u gonna start making SPA (S stands for soy) React pages?

@IMSpangler 2 жыл бұрын

When did Luke stop using brave

@IMSpangler 2 жыл бұрын

@♜ Pínned by Luke Smith he really is a bot

@bhaveshverma8629 2 жыл бұрын

Amazing as always.....

@ellidi7404 Жыл бұрын

First of all, great guide, appreciate the effort, keep it up! But instead of constantly dragging the ego-cam around, just drop it. It's very distracting. If you must include it, you could try to make it smaller and find a static position for it?