BYE WORDPRESS - Building a open-source static site with Hugo

hello everybody this is techa and in this video what i'm going to be doing is showing you how to use well how i'm using hugo a static site generator a completely free and open source static site generator that not only works completely fine on linux but also works on windows and mac now full shout out to both chris titus tech and distrotube for their videos on this subject this is how i learned about it um in this video what i'm doing is showing you how to build a website with hugo how to theme it how to create your very first post and how to make a public directory for it that you can then upload to an external server as well as show you the project i've been working on which is rebuilding techhut.tv so first before i get into some of that what we're going to do is actually go into the hugo website talk a little bit more about it and go into exactly what static websites are versus uh things you'd see traditionally like wordpress now hugo as i said is one of the most popular open source static site generators one of the things that's really good about this is depending on your skill set not only do you have full control over all of the files that hugo generates but you actually can go in and edit the actual framework itself for somebody who actually has the skill set to do that that is very very handy and somebody without that kind of skill set could you completely utilize this as well somebody like me i can't write code to save my life but i can easily read it understand it and edit it and for somebody with that kind of a skill set you're gonna have a really good time with hugo now a quick little tidbit on static sites versus most other websites static site is simply a website that is only files as html files css files and images and that is about it whereas you get into something like a wordpress hosted websites which might be a majority of the internet those use mysql databases php things like that basically even for a small site something like mine where it just has like right now i think 20 or so articles it pulls uh information from databases and that's good for something like maybe a online store or something with content that's constantly changing like a social media website but a lot of these websites now like normal blogs don't really need databases or anything like that and there are a lot of pros to static sites and one of them it mentions right down here that is blazing fast and this is because like for example my wordpress website might be around 100 megabytes and it's not that big of a website whereas the static website i generated is roughly a megabyte if you don't count the pictures and if you do count all the pictures it's probably about 10 megabytes so that's a lot less information that somebody has to download when they're on your website and in turn it makes the website speed quicker and things like social media not social media search engines really enjoy that so it can actually help you rank higher in certain cases so skimming through here we can see that it is very flexible um the everything is done through short codes and markdown which that has a little bit of a learning curve to it but with something like this you could just find little resources through github guides mastering markdown it basically goes through everything you need to know to write a general markdown file which is basically formatting stuff such as item lists headers bolding things images stuff like that it's very similar to basic html but almost easier once you get a grasp of it so jumping back over to the hugo website uh you could go scroll down and learn a lot more about it there's the themes that we're going to get into in just a sec if you go over to docs there's a ton of helpful information here from hugo's lookup order the structure install hugo this is probably a resource you're going to want to go to if you're running something like i am manjaro which is an arch based linux distribution you can just search it in the aur install it easy easy easy but you can see down here has information on how to do it in mac with home brew chocolaty with windows and fetch it directly from github there's a lot of ways to get hugo going back a little bit the directory structure this is something that you're going to want to go to but it'll basically lays out everything that you have your main config file which i'll show you and that's where most of the data for your website not most your data but where a lot of stuff is pulled from such as your site title and we'll get more into that in just a sec but what we're going to do for now is actually look at some of the theming options right here we have a complete list of all the different themes that you could use i do recommend unless if you want to write your own theme and you do have background in html and css it is kind of good to go through and actually kind of decide on what theme you're going to want to use first because a lot of the times most of the themes have the same instructions but sometimes they have specific instructions that they recommend using when building a new website the theme that i'm using for tech dot tv is the clarify theme all theme pages generally have instructions so if i just scroll down here it gives me a lot of different previews a table of contents features and then right here it says getting up and running so we're going to kind of go through this in my terminal so you can see how this is done let's go ahead and switch to my main desktop here and we're going to run this this right here is actually a server running which i will show you in just a sec of my website being hosted locally if we jump back over to firefox real quick you can see this is my current techhut.tv website it's a wordpress website very it's not very slow but it just is clunky but if we go over here this is the techcut.tv that i'm currently working on and you can see if i jump through real quick everything is very very snappy it's hosted locally but it's basically just as fast when it's on a server and if i go down here real quick to my center screen i stop this local server i go back to my firefox and then i try to go home for example it will be unable connect because that is no longer running so let's go back down here and actually create a new site i'm going to change my directory back to the home directory watch is right here and from there we're going to go to these instructions and it's hugo new site your site name so this is going to create in whatever directory you're in so right now i'm in my home directory and all you need to do once this is installed to create a new site is just go hugo new site and then name your site so for this example i'm just going to call it example hit enter and then it says congratulations your new hugo site has been created that gives you a couple more steps everything's super intuitive and it kind of guides you along the way and we saw over here it create the example folder which is where my site is being hosted open that up we have a couple different things we have a themes folder static layouts data content archetypes and config the first thing i'm going to open here real quick is the config as you can see there's not really much going on in there right now if i zoom in you can just see it just has the base url language code and title now this is where theming it comes in so if i go back up here to firefox real quick and i go to this theme there's going to be instructions that will eventually put the example website as my main website and then i can just go ahead and edit their site to do this i'm just going to grab this which will add the theme into the directory and then go back to my terminal here and we're going to want to make sure that we're actually in the directory for our website so let's cd into example now that we're in there we can do the get in it and then run the command to actually clone that theme into the themes hugo clarity folder hit enter it's going to go ahead and do that and then if we go in here just to check we have the hugo clarity now we're going to do is paste in this command which they recommended us do which simply is going to take this example site and paste it into our main directory so if i go ahead and do that hit enter it's going to overwrite all of those we're going to say yes and we should be good to go so now if i open up the config you can see it's going to look much different i'm going to go ahead and make this bigger so you can see now doing theming like this makes it incredibly easy because then all you need to do is go in and actually edit everything to your liking so in addition to the base url and title that we saw earlier we have our theme already selected uh you have your various categories what you want those things to be called under here you have various options for xhtml the heading lines and a lot of them have these little notes in here so if you're not exactly sure what they are a lot of things will tell you you have your links to some social media a place to put in google analytics so that makes it extremely easy to actually track the activity on your website and a lot more if i go ahead and close this out you can see that the theme itself actually comes with a lot of different things if you go in here you have a readme one thing you might want to play with later if you have any issues especially is under layouts partials here you can go ahead and add this to your layouts directory on your actual example site or whatever site you're doing and edit things like the header for example i know on my website i needed to edit the the actual header to get it how i wanted so you actually have the code and here's where you can change like the site title and stuff if the config is not working that's something i ran into but close this out we go into our example all your actual posts and everything are going to be stored in the content folder and here is where you can change some of the pages that it comes with so you see a about md md is for markdown i'm gonna open that up and then you can see this file so if i go ahead zoom in here you can see the some of the page information is separated this way and the title is about gives a description a date some aliases so if you type the website slash about us it'll go to the same page with hugo and contact i'm going to show you editing this in action so let's make this a little bit bigger here and let's bring this down so you can kind of see it and open up our terminal and what we're going to do is actually run this web page so if i go to my local host here and try to run it you can see it's not gonna work but if i make sure i'm in the actual directory for the website and i type something like hugo serve it will then build that site and serve it locally so now if i go to it you can see that this is the example website for clarity and the page that i want to edit real quick is this about page right here so if i go back into that markdown and let's just say i got rid of everything here and wrote a good old hello hello world and one of the markdowns is to do these asterisks on both sides and that will bold the text as you can see give that a save and you can see that when there is a change on here it automatically displays over here and that is mostly due to the hugo server you can see that it has a change retec change detected and it completely rebuilt the website and it gave the source information and all that it was the about md file and you can use markdown to really really get that to look good now you can create new pages and posts through the terminal but i would actually recommend especially if you're using a theme like this to just create a new go under posts and copy one of these so for example we have here this markdown syntax guide what i was doing was just copying pasting giving it a new title so let's just say hugo dash tutorial continue you can see every single time i do anything the website will refresh because there's a change detected and then i could go into that actual hugo tutorial open down the mark open up the markdown file and here you have a lot of information now this will be different depending on what theme you use this is just how the clarity theme has everything set up and then from here you could go in and edit your author the title so let's say i changed this to hugo tutorial i changed the date to 2020 so make sure it shows up at the top you can get rid of some of these tags change it to something like hugo and i'll just leave the rest as in as is for now just to show you one right once i save this it's going to detect the change down here and you'll see this change right here so file save and everything was fairly instant you can read more and this one of the things that's really good about these files is they already have a lot of the markdown language in them so you could use these as a reference or use these to build your posts off of and that's what i was doing a lot on my website techhut.tv which i'll actually go ahead and show you i'm going to get rid of this real quick close out this markdown and move this back over here if i go back to my home directory and go to techhut which this is the actual website i was working on let's end this server so control c that ends it we can cd into this so cd tech cut just like that i am now in tech cut and then if i run the hugo serve command again it will be serving the actual tech hut website so if i go into firefox over here and go into local host you can see now it is at the techhut.tv website and an example of what i was doing which i was just showing you i go under content posts you can see all the different posts i have so far and this is everything that was previously on tech tv so by the time you're watching this video this might actually be live so you can go ahead and check that out now one thing i'm actually going to show you real quick if i go back to my desktop real quick what we're going to do is build it out so we have the public directory that we want to upload to a server to host so we're going to be doing this out of the tech cut website i was building so that's cd in there cd tech hut and it's as simple as running a hugo command and what that's going to do is actually build the website using all the markdown files and everything to make the static website so we run hugo we can see that it has created 93 pages with uh 61 static files and the 57 different aliases gives you a little rundown of exactly what it did so that is nice and the total time it took to do it so once you have that done we can see over here that it created a public folder and this is the folder that you're going to want to upload to your root directory on whatever shared web host github whatever to actually host the website so it might not work well it might not look pretty but if i go ahead and open up this html yeah this is what it looks like because the base url is set to techcut.tv and it's on localhost and a local file so it's not going to look right but when you do upload this with to the proper domain it will look fine but that is an example of that let's go back to our center screen and really that's it i'll have links below to a playlist for somebody who made very very good in-depth tutorials that i was using one last little thing we'll check out before i go is the websites for both distro 2 so distro tube which he uses the exact same thing so you can see his website the uh this is done through hugo this is a static website that's why it is so very quick you open up everything it's super snappy this is one example of this and the other example i think it's chris titus tech he uses this as well so if i go to his website this is also a static website generated through hugo so overall it is very very nice uh government entities use this big insurance companies use this and i would recommend you use it and play with it too even if you don't have a website to host it's fun to get on your computer build a little site learn markdown play with it again i'll have links to all the resources that you need in the description i hope you enjoyed this video have a beautiful day have a beautiful day and goodbye

Channel: TechHut

Views: 11,470

Rating: 4.8941178 out of 5

Keywords: linux, linux tutorial, desktop enviorment, hugo, web development, open source, static site generator, host local websites, build a website

Id: dSBoFfnylIU

Length: 18min 21sec (1101 seconds)

Published: Wed Dec 16 2020