Hugo website not rendering in Github pages

1
votes

I am trying to correctly visualize my portfolio on Github pages after deploy with no success and I am running out of ideas for what the problem might be.

Problem:

  • The live page either shows " This site is open source. [Improve this page]" if my index.html is inside of “layouts” folder (as it is originally in the theme) or it shows the raw index.html file - if I place index.html in the root.

Facts:

  1. I am able to run the website without any problem locally, and it renders the expected result.
  2. I have followed the suggestions of having “/” as baseURL.
  3. I have tried placing the index.html file in the root directory (seems the logic structure to adopt)
  4. Inspecting the index page, I get no errors on the console whatsoever when index.html is placed in the root and shows live (as raw html).
  5. I get no deployment errors (I follow the builds in Github’s deployment log).
  6. I am able to access css, js and images folder publicly and see the content with the live url.

I am new to Hugo and I have no idea what I can do more, any help would be much appreciated! My repository is: https://github.com/anaritagomes/anaritagomes.github.io

I am using Hugo's "UILite" theme: https://themes.gohugo.io/hugo-uilite/

1
frontendgithub-pageshugo
How are you actually publishing the site? You can't just drop the sources into a github repository and have it work: you need to render the pages (run hugo to create the public directory) and then publish that directory to e.g. your gh-pages branch (which you could do either manually or automate via GitHub Actions). if you do that, it seems to work just fine. - larsks
See e.g. these docs from the Hugo project - larsks

1 Answers

1
votes

A lot of stuff with Hugo isn't written for beginners and a lot of people have the same problem.

In simple terms, when you run Hugo on your computer it will set up a website that you can access through Hugo (i.e. on localhost:1313). It's a bit like when you create a file in Photoshop it saves it as a PSD file that you can access through Photoshop but if you want to actually put that file on the internet you'll export it as a PNG file or a JPG (or whatever).

Well in Hugo this "export" step also has to be done. The command to do this is just "hugo -D". This will create a folder called "public" and it's the contents of this folder that you send to Github pages.