Making a website with Hugo | Silvestar Bistrović | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (42m)
    • 1. Intro

    • 2. Starting with the project

    • 3. Adding navigation

    • 4. Adding the first blog post

    • 5. Adding partials and data files

    • 6. Finalizing the project


About This Class


During this course, you will learn how to make a static website using Hugo.

Most websites built using other frameworks, like Wordpress, are slow and insecure. Hugo is all you need to make a lightweight, fast and secure site.

It is not absolutely necessary, but it would be great if you are familiar with HTML, Markdown, and working in Terminal or Command Prompt. Bonus points for anyone who know how to use versioning control systems like Git.

The completed project could be seen here:

Contact mail: [email protected]


1. Intro: Hello Making convictions. Cuba. I'm so this I'm a developer have been developed absence since 2011. I specialize in user interface CSS or Pre's. And just during this course you will learn how to create the best of Cuba. You what could be considered a part of the German people? Most upsets built using other Prem looks like purpose will be slow. Any secure, you really need to make a life right in your sight. He sold the experience building medicine to Cuba. I will show you how to use it with a simple stuff Absolutely necessary. But it would be great if you know how to use HTML and help work on all these points for anyone Know couple use virgin in control systems. Now let's start making that They said the complete project could be seeing on Cuba but those to the streets. But from what age are 2. Starting with the project: hello and welcome for making the bits of the cure. I'm Celester and you can find more about me on my Brexit or you can just say hi, my Peter. During this course we've built a new website. Did a book the project would be seeing on this link. We will build our new home page about fish and we will have a book section My guess. It's quote lessons and we will care articles in it. In these ways, some people learn after he stole your love to use command line, interface away the new competition and to run a local Web server and how to head and left for out front page. The court is available in my teacup. Requester is then making a vested in Cuba and branches feature. Listen one. What is Huebel? She was an office source That, except generate its field in Go For is an open source programming language. It makes it easy to build simple, reliable and official statics generators are sisters that compiled templates in the static fictional babies. It means that people will be serving started pages, and that's be very fast and secure. Before we start, we have to restock fuel was available for my quest in those minutes. If you have any problems with installation, please feel free to contact me. And I will be careful to help you projective Puritans told on your computer Run you go version. You will see this output which will tell you which person you are running right now. In my case, it zero point for tonight Coins too. Now we could create the new websites to create the new upset. We could use your new site, men, and we put that name of the folder which will be created for this for this purpose. I really run Hugo, You cite making of actually the Cuba and this will create a new folder fold making a website that your it's time for the first tip. If you are familiar with it gives it is good time to start your repository. We'll go back to our puzzle and navigate your folder. In my case, it's making a venture that you go and then we'll run. Man, get units. This will initialize the empty keeps reports. Now we can expect this structure of our I deliver the open the folder in my usual studio food and we look at this folder, we'll see it through to the coffee quality for counting file. Cares a few options like Basie or L Language entitled We could even change this making up website You go and it will be used to define this verdict. Stifle. Then we kept content which will be used toe start the content for our project. Then data data is older with data files that could be used across the website. For example, if they want to display social leaks, we could create a data file And you're that that I felt find then displayed social links. You know, for example, that became a louts. This is the holder Better really will be placing out their plates. I think this very before saved our CSS down escaped and images and thinks this folder is for placing the TV. You're going to build the first contact that we will be. Eddie will be competition Run Cuba New underscore Index that Andy I recorded the same You go new underscore index and dig. This will automatically place new file in our point folder. You'll be used as a calm page file are already killed. Some contacting steps are templates like there used to create a new content. For example, this difficult and defiled colder archetypes has that I don't date dropped settings here. Be inspector new file pills. Same our index file, title date and dropped. But what is this data? It is commonly used to store title date categories and other settings for the pager falls. In our case, we can. I thought, that is empty. Date is current date and dropped experience Hugo for accidentally publishing unfinished content so the default option is true. We will change the title making website with you. Right now we have content, but we don't care loud for our home page pate for Cocoa page. Really Starch Command and put the new X html file louts folder. My much Lauer's This HTML We spoke created the new file in our louts holder. It is empty. We could use this basic layout for our home page, Kobe, this coat and basically that new file just so free and then based here I will the first line nothing much. Here we have the basic HTML structure with type HTML get and body inside the body. We have pointed short court that you all are content from the X Files content will be placed under his front method. You will get back to it later. It's time for our second you're using damn it and you're familiar? Redid. Instead of hoping based, you can use HTML cynical and five abbreviation. Keep up and we'll show you the same structure for HTML with that type HTML head and body. We want to change Tyto making a website. You go and we want to it on your short put wanted decided today. Great. Now we can accountant and template for our home page. And now we conceived in browser around the local service. It would use humor Server command Caesar Home page is still in draft mode. Be sure that they option the command. They still compile old drafts in our project. So ran Hugo served D and you will see that it's very past. Everything is compiled didn't three milliseconds and we could open our project This address their concerted my case Go hit and open it. If you see a blank page like I like I kept here, then everything works became title in our browser because we set it up in take, and we have nothing to display Now we could get some more content. Content is basically or Britain in. Martin Martin is very powerful, and it's very straightforward once you get used to it. So feel grief to explore. The teachers have to it more important to your site. So let's at some point gilded getting one and two partners my page. Look, open this these to my home page like this. You leave this line and I will say that you don't have to stop several because Huber kept life reloading in it, and it'll automatically refresh your browser. Let's see if we have a new port here, and it's the same exact from our file. So our file, uh, puts the contents from our point of file. Excellent. Now we have come Paige and because save it and committed to our story and we could use command, get Ed, I will stop you from running and look with old files. I could give and get started. Trick twelves are there and see if we have four or new files and I will committed with the message adding co pitch rate kept first commit. That's it this lesson. We learned how to use Hugo to create the new content to run local Web, sir, and helped with the new left in the next life. Severe alert helped to build the project. Healthy new pages, the reuse layout, coat and navigation and used about variables. If you have any problems or questions, please feel free to put me and I will be kept. Help you project could be seen on this address by 3. Adding navigation: hello and welcome to make it effectively Cuba. This is less to I'm Sylvester nuclear more about me and my veg set. We can say Iran Twitter too. This lesson you learned Culpability of project healthcare The new base materials layout quote healthy and navigation come to us. Cuba burials. You already know. How do you think you will have to use one line interface? Okay, that hope pitch new loud and help to use a local observers to review the changes in the Broza The court for this lesson is available. Last time we stopped seeing changes in the browser. Sometimes you want to see the brick compel court compiler pages to build your project. Use Yugoslavs Day command stories. You work dignity and we see that the project is built. You could build our sites. Public folder Let's see the structure of our brother but older could be found in the root for project. You see the ticket html while and other several calls we really know XML files for now, open the HTML file. You'll see it is our home page. You see some people characters then reopened the file which in fully, Joe's utf eight little pick civil camps. Okay, let's say the new page Cuba. Move about certainty on your page, Do you a boat? And with the new Fitch, go to the project and open from the folder you'll see Knew you felt about nd. Now we already know that Hugo Bill. It's front meta data to our new file This time you violated title toe. Let's get more mild unquoted to despoil Elokobi discord. Face it in my pile about the seat. When matter is here, just hoping good and save it. Now we need the new left for about page. We will make a new folder, he said aloud. Smolder called underscore Default and we will lead a new file. It's full Siegel, but html Whoever look attempts file and use this file toe display our about page. Okay, they do this now. Terminal right? Make here. No. Then we should let you file bulls. Which team? This new files reveal that the new loud hoping this coat basically single html I really was image to do this. No single. Then I will have a new title. Said about the night of Constant tripled in the booth. We should run our local server again it in Run, Hugo served D See service files are still in draft. Mort, let's go and open site in the browser. Local post. 13 30. Now we still see the homepage, and if we go toe about there, you see about H two sif titles, change and constant exchange. Getting a new template that is almost the same doesn't seem like the best breaks. More developers like driving that dry stands for Don't you feed himself? We should fight for export. The reasonable quote or basting. Create the new file inside the loudest broke holder for the face off built html. Next, Kobe the coat from the simulation off while basic into Basil File Corbett and based. It replaced the title with the Cuba Variable copes. You have a look at your Indian file, and if it has a title that you displayed here, Bigler Place our so called for content with new book. It's really before Maine's Don't forget to close to Look Manville. It made that run this book with more somatic products. Today's tumult, while now we will replace the coat inside the layoff files with the sleeping please here and based insights. These files. Now we should drive local lips seven again and see the chains. Cuba Server D Man referred to wage It's working the home page. It's working great now regulated navigation to our Brexit, who provides a quote for ending. Remain, we believe, is the most straightforward navigation from the Cuban documentation, hoping to put up to the open body. Take so we'll be disporting go to Basil because they want to use to put for both nuts. He's spacing and saved. Navigation is not enabled by the court to enable it. Officially, the new option to the conflict on file this auction is called Section pages. Menu said it domain is in main navigation for this. Go to fire this sitting here. Save it still doesn't know which pages to include in the delegation. We should add settings for menu in bait to the home page into the about page because this go to home page. I made it with the same for their well, bitch. But wait to make it a second time in the navigation. Save it. Save the changes in the browser Sea navigation. Before we conclude this lesson, let's try to understand cover navigation works first we find ago variable current page and assigning through the current context that is the current page cynical on People's to is for declaring and initializing. Then we look over the main navigation items using the range, given the range feature fundamental for building templates in Cuba. There sorting menu items by bait that is over the added to the pages disappointment of property you walk is really birth of sorting mechanisms. Next we're checking. Give the current pages active. We are doing this by using Cuba's built in function east Manu current. You're always comparing the current page variable Viteri item off the main navigation, the giver main else Uber rich navigation to check, The doctor tells you. Gotta let it should compare the current variable with the current navigation right? What is the dot? What is the context? Really? You develop level off the template based off html file. The dot means data that is available to it. For example, the title Sure put we love the title of the current rich. Therefore, the context is the current page date in the hope the dot means current tight. In our example don't decide. Look says the context to the current killing. This feature allows us to use your help title in name shortfalls laced with current items. Euro until the name respectful. Beware the title Short Port in the title take and the range was not the same different. It is different. The 1st 1 was the title of the current page. The other one is in love, and its meaning is the car navigation I. It's time to build a big set again so the local Web server will see Run Cuba Day. Now we should commit the changes. But first we should exclude the public folder for my report. It is a common practice and the new file by typing touch, don't ignore and add public to the file. We will ignore all files inside about cold touch. Get that? Probably, you know. Now meet the changes really was. Get it. Don't. Then we could see the status Well. Is that here? And then we could permit new message. We will stop here, we added a new about page created a new base template. Be aided navigation. The next listen, learn help with a new post healthier, the new loud for a force and how toe. Least all articles. See you in the next lesson. And don't forget we could contact me if you need help. For if you have any questions. 4. Adding the first blog post: Hello and welcome back. Making arrests and secure. This is Lesson three. I'm Celeste, our nuclear moan about me, my Brexit or just say hi on my Twitter. This lesson We will learn how to have any forced healthcare, the new layout for a force and helpful least alert By now, we already know how to use uber have to add new content out there new else and culpable navigation. The court for this lesson is available from this company. Let's say the Blue Post you're building a mix of with a blow, if you knew less is slash license. One of them's a disc amended will create a new folder in a folder coalescence in the new model. That will be our first article. You put your different man for the folder in the file, but remember to change the name and all future reference lessons. Folder and files. Let me open this file. We consider familiar front matter data in the file. Since this is our first post, we could practice setting more Martin call. That's it. An orderly store or post. Every cooperative scored open the lesson based here. You see, we already have battle dates on draft in front of the baby. Now let's start the local Web server. People serve D. C. Start wanting still in draft mode, then open local coast. 13 13. We could see that require new navigation. First, let's get Laissus. Listen well. Here we have our first locals. At this point, he was using the full play out for single beta Esperon. Are good breakfast straight, different out for both coasts. We will create a new folder Inside Layouts folder for license. And then we will create new file called Single dot html. The Web server. Maybe there. Let's since then, touch lives. This is a single with HTML. Now we should have a hope of discord, basically not Newell Out pile. Now it's laissus basic land saving. Besides defining the main wolf and outfitting department, let's say the cyber to this layout, so it will be different from the post lab. I've delayed a couple of years Bowling's here. Start the VIPs ever again fresh, and we could see ourselves here before we build a new all out with an article east. Let's head to more practice. Stop served here or new Less is listen to in less than three you. It's next. We should have a nuclear file into the pork shoulder. Goalless dot html Much this there is more than one way helped Lisa Lark Person. You're really was built in originator for this purpose. Let's hope it is sports least salutation started server again. See our page Ambrose it Right now we have at least a part of this year. Let's expect the cost for January 2. Released more clothes. First regulate the title for a book page using familiar titles. Short Coat. Because our folder very store article Siskel License will noted this page is called Lessons . Can we ate that page later? It really the right through our articles in the older articles inside the look we put despite the girl in the title The chart. Lastly the case. More articles recorded originator controls, people, kids, internal templates. In one of these templates, this paginated off HTML, they do not see the pigeon controls yet we should find a number of pages per page. We could say this option locally or in the Beijing later direct, who said the number of pages per page globally. Patient sitting through the file equals to save it and we see that now. Mikael Pagination close to set the number of pages per page locally changed out the page. Aerator toe pager Native to the list. Html Right now, if we reset this option globally to 10 if you will still display only two articles per page , it's not a good practice to set on the two pages page. Change this to then for whatever number we want. I don't relate these in your school setting. Let's see now we kept We are here. We will build a product and commendable, some just ever run Cuba D It's us. You could see that we have modified politics and a new palace. Powerful committees. It commits message posts in ending you allows for a forced together. We're done for this. Listen, we learned how they're both coasts and how police that and we learn how to read your notes . In the next lesson, people learn how to get partials country data files how they have social links from the data file. Thank you for your attention. See in the next lesson. And don't forget you could contact me if you need help or if you have any questions by 5. Adding partials and data files: hello and welcome back to making bits of Cuba. Just listen for I'm Sylvester and you can find more about me. My website. They hire me. Peter This lesson middle of helpless partials help to add a data file and how to use the data to read social links to the site record for this lesson is available in this gift. Humbly. What is the partial? Most empathy languages are. Trump is a reusable piece, of course, that would be booted from one more, which partials Toby it to our existing projects. People did together is a separate partial recall that a striver, although cyber, reduced only for flow course it is advisable Separate, standalone elements that said this partials New Parcels folder Make their she's and then you go live far side work. Let's go to the court from basic HTML template New great html file. We want to extract this court netted or partial spacing. Save the basic mission. Repeat the action for the cyber fashion. So open lessons, you know, extract this side and put it in cyber HTML again fixed up for months. Now we want to go there partials in the class. We should a partial humor. You know that passions are stored layout, partials, folders. And if you look there to find specific partial head partial heather dot html based off template and a partial cyber HTML to articles, simulation of them, basil Where should either But then your license symbol Marshall Side work Not not that we're passing the current context to the partials. Married is not. In the end of the partials function, this means that we could do the same logic in the killer pressure. So we passed the context here. Now, Cubanos, that these current patient goes, you get around the server now way should get the same sites. Hear music partials developer could easily fix or after the killer. For example, in the changeable we propagated 12 pages. This approach is often consider is a good practice in general, always tried to extract repeating court to make it easier to maintain. If you have the same court in different places, we were more likely forget to change the court. No place if you care additional data that we want to Cuba to use from the build process like every social links. So the footer then issued ed data in the data folder that the House should be. Family Jason Paternal files legal aid in Yemen. Sarah Much social carry on file related at least of social links, each least tight and go store social title. And socially here is coming to do it in. Yeah, I will talk to Scott. Go back to editor. Find social mammal basis. For now, we have the wife's address entitled Problems. Now we lead the new partial dot html fashion. We got to this by social links and 1/4 touch partials. 60 mil. The data stored now we are files are accessible. It's a map site plate of bearable dollar. Sign means that you are accessing a global very Let's go for the sport. Milito reporter. Explore my thing Say we will do the Social East. We believe the range punch. Since the range of creating the new context, we could use a trip and titled Welcome Information Store in the current least life. But there is a partial. We need to include the partial seat on page. What there is general used on the old pages related to the base off that html No, don't forget the context. If you start local banks ever see the changes on the browser? You look server de fresh. Here's our quarter. No pages home page from about page one lessons even on our article. Don't forget the building site and committee changes the server Dave to build any questions stating they went, This is it regarding our project structure. We learned a lot during this four lists. Let helped build the basic basic. The next lesson you will learn help. Weight loss. It's javascript, CSS just help make final Genius store project. Thank you for your attention here in the next lesson. Don't forget, you can contact me within itself. But if you have any questions, let it go. 6. Finalizing the project: Hello, Milken Baked making of absolute you'll. If you want to know more about me, go to my website or just say hi from my Peter. In this lesson, we will learn how to a styling floor. Websites outweighed Johnston file and help create an image to decide along the way you could be making final changes to pull the show for you. The court for this lesson is available. These coupling first, we will update the article East People sort of articles by date. Right now, the first time people least last one added, Let's changes make first article first, at least real use by the fielder go to the least name by date. We could see that our article serving our sort record next to lead summary instead of title on police template change title to summary inside the range. By default, Cuba will try to wait summary automatic. Sometimes it works, sometimes not. The biggest problem is the HTML structure doesn't know where the end of the age and all Tommy's, and it would break out regional structure. This is my work is a few different places of summer is putting foot patrol, middle use, manual splitting this means people that they snap it in the article in a place everyone, our summary train, go back to the article and that stupid you see how you could bring your summary of the article East people. That title that is Listen one. And now we have a light here. We should have been a section for every article We've loved it, our louts to make them more semantic by any section and article tax Been appropriate. Let's update the computer out. I hope this coat basically from age clout. It's up to about page left. Siegel html. We should also be the article, the snout and what we discovered the least you could have put their and via logic that low cost listen, go save It is time to have some style for website. All assets should be stored static folder by the bulls to organize our assets. Relay the separate folder for each facet or CFCs. Files were left CSS folder, then relayed Stylebook says that's what making folder study ceases. Then, before static Sisters started Sis's the C. S s court some a week with the best way to put open file and get up on the road. So little hope it. According basically, sisters, while like this, people in Congress believe in my browser from the role. Select all copy. What did it Static cirrhosis style Go for the court. Now we have to go through the style, Edley, with the correct part to the fire. Be unremitting static from our but because you go places so close it from static folder to the root of the project. I recall for this code open based off families, The net make sources since filed in the case of be open on broad it. Now we will see significant change. You got several big fresh. My better, isn't it? They take a low post loose. We care cyber here, Pooter. Together. If you go to places, we will see your license. And about Page and my page. Josh, could France Toby, It same base is seized this west. We should create the new bold of Js and then place the file inside of Let's that new colder making dear static do this then much starting just street Js We really just a simple council message. So we know the characters to file is imported. Let's go to Js I suggest you talk disposal message. Don't forget to its crypt at its source. Actually, be careful. Nothing good starting to the but for this related to the bottom of the often It's just before the closing 40 Take would be inspect. There goes the scene out Love match. We live on image tool. First, we should have a new folder for images Server directory, static Jeep. They will cope with the image inside of it. This is a murder. Syntax carried an image to the contact and corporate this open my fridge based here they actually that's true. Start with exclamation point. There's square brackets then alternative text here and then leave the Reinisch inside regular brackets. I will save this run server again Goto about which we have a low wage. The project is complete Building project and make the final chametz. Here we go. D I get that. But it's doctors. There are a lot of modified wells in a few in your wells. Now commit the changes. Congratulations. You made your first website Cuba. I hope you will continue exploring to go and finish the project. I would love to say place Emily once it is finished with full project could be seen on this address. I hope you enjoyed lessons. Take you for the new forces by