I am really confused as to how to deploy hugo with Github

Hey,

I want to use hugo as my static site generator but I don’t know how to make it work. I’ve read through the documentation and even the specialised guide for it but I am still really confused as to what I have to do. With jekyll, I could just make a git repository of the entire jekyll blog and I can see the results online instantly. However with hugo I don’t know what I should do. Can someone please explain what I should do to make it work as if I am 5. Thank you a lot for any help.

When you run hugo server, hugo renders your site on memory, but you need to create the files on disk before commiting them to github pages branch.

So, to generate the public folder, containing all the html and other static files, just run hugo without any other subcommand.

Now you can add/commit this folder to the ghpages branch. :wink:

hey sjardim,

So I have this directory with my blog :

I have my content in the ‘contents’ folder and I am using a theme I cloned to ‘themes’ (https://github.com/azmelanar/hugo-theme-pixyll). Do I need to put the entire folder under my .github.io directory or just my public folder? I want an efficient workflow that I can use. With jekyll, I simply wrote my markdown files then I just did :

  1. git add .
  2. git commit . -m ‘new post’
  3. git push
  4. new posts can be seen live on my site

Can I do something like that with hugo?

Hi nikivi!

Yes, you can have a nice and easy workflow as the one you described. In the tutorial that Spencer Lyon wrote, you can see a workflow that may suits you.

TL;DR:
You’re going to need two branches, one, the ‘master’ holding all content files and themes. One, called gh-pages as a sub-tree holding only the content of the public dir.


I personally don’t recommend gh-pages to host a website, there are better options like netlify.com (free and paid) and Firebase Hosting. Firebase will get you SSL and CDN for free! And you can use your own domain. And are easy to setup as well.

2 Likes

Yeah, I tried going through his tutorial and I really can’t get it to work. I am sadly not very familiar with git and branching, only know basic commands and the commands he writes out in the guide do not work for me :

Also when I try to edit my config.toml as he does with contender and layoutdir specified :

When I run the server, I get errors :

Although in theory I have everything the same as he does. This is so confusing. :frowning:

This is the github repo of the blog.

Git is pretty confuse to me as well :slight_smile:
I’ve found a gist that may explain things better: https://gist.github.com/cobyism/4730490

But like I said, there are better and easier options instead of gh-pages. I’ve tried firebase and had it running in a blink (I already had nodejs installed).

I am on the same boat, I tried different tutorials for deploying to github with no results. There are many different tutorials out there and none of them worked for me. I gave up at last and waiting for someone to make a tutorial for non techy bloggers like me.

1 Like

I personally don’t recommend gh-pages to host a website, there are better options like netlify.com (free and paid) and Firebase Hosting5. Firebase will get you SSL and CDN for free! And you can use your own domain. And are easy to setup as well.

I have used the netlify tutorial and it was dead simple to get running. It DOES work in an add > commit > push workflow.

3 Likes

hey @justrjlewis,

I have just went through the entirety of the tutorial and it is quite nice and clear. However while it does work locally for me and all my posts and everything show, it doesn’t seem to build it properly and doesn’t allow me to see the result live. I have literally done everything by the instructions. :frowning:

Here is the repository with the site : https://github.com/nikitavoloboev/hugo. I really am not sure why it does not work and show me the result.

It says that the site is live after building it :

However I am not sure where I should see my result. When I try to preview the URL, it is empty :

You need two things:
1 - The actual theme files unders themes/angels-ladder
2 - Set the theme on your config.toml:

baseurl = "/" languageCode = "en-us" title = "my blog" theme = "angels-ladder"

So you can just set Netlify to run “hugo” to generate the public folder contents. And, of course, set public as your webserver root folder.

hey @sjardim,

I added the ‘theme = “angels-ladder”’ to my config.toml and everything in there as you have. In my Netlify I have these settings as I wanted to run it on a personal domain I have :

I believe I have everything set out right in my DNS settings on name cheap (following the guide) :

However I am not sure if I have done it correctly as after building I get this log back :

But going to www.nikitavoloboev.xyz, I see nothing.

Thank you so much for your help, I really think I am close to making it work.

Okay, but I can’t see the theme files on your repository yet. They need to be there, otherwise hugo will create empty html files. Your domain seems fine, a ping to it returns 198.61.251.14

ps: Your build command can be just “hugo” (remove the theme subcommand) as you already have the theme name set in the config file.

hey,

Isn’t this the folder with the theme?

For some reason github doesn’t show the contents of the folder, it just shows the folder with the theme. But the theme is under git and on github I believe, perhaps I am wrong. I just did the usual ‘git add .’ git commit . -m ‘init’ git push origin master’.

I am not really sure what you mean.

Actually you are just referencing a cloned repository but Netlify can’t see the files as they are actually not there. Maybe someone more knowledgeable on the git arts can help us in this matter. :slightly_smiling:

But for get things running, delete the * .git folder** from the angels-ladder theme folder and add/commit the files again. After that, the theme files will appear on github.

If you are not sure how to do that, you can add me as a collaborator on the repo, and I do it for you. :slight_smile:
Go to settings / collaboration on github and add me there (sjardim)

I have added you as collaborator :slightly_smiling:

Thank you.

Thanks and I just did it!
Check your domain. :wink:

Wow, thank you so much :heart:

Just so I understand it, now if I want to add more content, I just write down my markdown files in the ‘post’ directory and git add . git commit . -m ‘new post’ with ‘git push’ and that’s it?

This is really great, also is it okay that I will keep this repository privately? Will Netlify pick it up like that?

All I have left is adding disqus comments and tags and it is complete. Thank you again for your help. :smile:

You’re welcome!

Yes, just write posts and commit them. Netlify will receive a notification automatically and build the site again. Every commit you do will start a new build on Netlify. So be careful with your build limit if are running on the free plan.

Netlify will work on a private repo just fine. :slightly_smiling:

You can remove me from the collaborators now or keep it a little longer if you need.

The tutorial uses YAML, but your file is TOML. Replace the colons with equal signs and that error won’t be a problem.