FREELessons: 5Length: 47 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Publishing Your Hugo Website

In this final lesson, I’ll show you how to host your static Hugo website (for free) using a service called Netlify. Let’s go!

Related Links

2.4 Publishing Your Hugo Website

Welcome back to the course. In this final lesson, I'll show you how to host your Hugo static website for free using a service called Netlify, let's go. Before we get into all that, I just want to show you one quick last thing. Once you've finished developing your website with Hugo, you can go ahead and enter the Hugo command. This will basically build your site and it's gonna create a public folder with all the HTML, CSS, JavaScript images and all of your site assets ready to go. You can control how the building is done by changing some parameters in config.yamo. Again, you have to consult the documentation for that. But essentially, once you have this public folder, this is the one or these are the contents that you're gonna upload to your live server. Now, we're not gonna do that today. So I'm gonna actually delete this public server, this public folder, excuse me. Instead, we're gonna use a service called the Netlify. Now, this is a really cool service, with it you basically connect a GitHub repo, you give it a command to build your website if you're using a workflow like that. Like maybe if you're using npm or Grunt or Gulp or in this case, Hugo. We can tell Netlify to build it and then upload it to a live server, and that happens automatically. So let me show you how we can quickly do that. First of all, we need a GitHub repo with all of our files, right? So I'm actually gonna go to the terminal and I'm gonna say, git init. And I'm doing that inside my working directory. This is basically gonna create a GitHub repository, is gonna initialize a GitHub repository in that folder. Next I need to create a .gitmodules file in the same folder because I need to add this paper mod theme as a sub module. This is gonna make it so much easier to update once we have all of these files in GitHub. So in here, I'm gonna say something like this, submodule themes/papermod, I give it the path that I have right here in my working directory. And then a URL to the GitHub repository of my themes, okay? I save that and now because I'm using Visual Studio code, this is already integrated with GitHub, using my own account. And I can just commit the changes, let's call this initial commit. And now after authorizing GitHub, this is gonna ask me where I want the repository to be published or how, is it public or private repository, I'm gonna select public repository. And now it's publishing to GitHub, and that's it. Now, if I go back to GitHub, you can see that I have a hugo-demo repository updated just now. And this contains all of my website's files including, see the themes inside. I have the sub-module that I defined previously. Now if I click this, it's just gonna take me to the GitHub page of the original theme. Pretty cool, right? All right, so now that we've uploaded this to GitHub, we can go to Netlify. We can create an account, I'm gonna log in because I already have an account. And right here I have a site that I created yesterday when I was testing Hugo. So here we say new site from Git, we connect with GitHub. That's gonna ask me for which repository I wanna use. In my case, it's hugo-demo, so this one. This is gonna ask you which branch you want to deploy by default, that's master, we're gonna leave it at that. Base directory, we don't really need to worry about this right now. Build command, we're gonna say Hugo because that's what we wanna use and we wanna use the publish directory as a publish directory, now excuse me, public, not publish. Show advanced, we're gonna add the HUGO_VERSION variable, right here. And to find out the Hugo version, we can just say hugo version in here, and it's 0.87.0. So once that's done, we can just hit deploy site. And Netlify will do its magic, it's gonna run Hugo, it's gonna create that public directory for us with all the necessary files. And by the way, this is free. There are paid options for Netlify but if you just want a very fast free option, this is the way to do it. So, right now Netlify published our site at this address right here. And I said earlier that it sets up a custom domain for us. We actually have to do that ourselves. So we can buy a domain, a custom domain. And we can attach it to this website for free by the way, it's only gonna cost us the domain name. But for now, it published our address, our website to this address right here, and we can open that and we can see it. There it is, Demo for Hugo. So we can now go to Categories, Tags, and we can see our Archives and everything works pretty much flawlessly. I say pretty much because you can see that some of the links don't really work, right? And when we open our post here we can't see the image. So what's going on there? Well, we do need to make one final change, we need to copy this address right here. We need to go back to our code open up confighamol. And the base URL we've gotta set it to the final, Address of our website. Now, here's something really, really cool. I'm gonna commit these changes to GitHub, change the base URL, and I'm gonna sync that. And Netlify is so amazing that it detects these changes in my GitHub repository, so it redeploys my website. So now, if I refresh my website here you'll see that the image works, all the links are working. I can go here I can go back to the homepage, everything works really well. And again, if I wanna make another change to my website. Let's say, I wanna change the first post. Let's say, I wanna change title to, This is the first post on Hugo, right? Save that, publish your change to GitHub, and you'll see that Netlify will update our website automatically for us. So let's wait a little bit and once we refresh, we can see the updated post, how cool is that? And as I was saying in a previous video, the exact cost of all of this, of getting a static website created and hosted publicly was $0 because Hugo is free, Netlify is free for this kinda application, all as well. And that's about it for this course. It was a quick introduction to working with Hugo and I believe it gave you all the essential information to get you started on this path of creating a static website. There's a lot more you can do with Hugo and I encourage you to explore the documentation and play around with the tool yourself so you can determine if it's a good fit for your workflow. You'll actually be surprised how many times you don't actually need a bulky CMS like WordPress to create a website. For a lot of website types, static is the way to go honestly and Hugo is a great tool for that. With that said, thank you very much for watching this course, I'm Adi, and until next time, take care

Back to the top