How to host a Hugo site within a Jekyll site

Hi,

I would like to give Hugo a trial in a subdomain of my GitHub pages website (https://fusion809.github.io), specifically, https://fusion809.github.io/hugo, but how do I do this without it having adverse consequences on the remainder of my website which is Jekyll-powered? I have tried setting my baseurl to this subdomain in my config.toml but this failed miserably, and the Jekyll contents of my site were no longer visible and instead the top-level domain (fusion809.github.io) was where my Hugo site was. Any ideas?

Thanks for your time,
Brenton

  1. On GitHub go to preferences/settings of the www.github.com/fusion809/hugo repository and delete it. You will create it again a few steps below.
  2. If you are on a mac or Windows machine, download the GitHub desktop application. This will make it much easier.
  3. Create a Hugo site on your machine, completely independent of your jekyll folder structure. You know the one you use for fusion809.github.io (that means: not as a folder called hugo within it).
  4. Create your awesome hugo site with the baseurl set to https://fusion809.github.io/hugo in your config.toml. Get it working, check it out locally with hugo server --verbose at localhost:1313, make sure you’re happy with what you have.
  5. Go to the GitHub application upper left corner and click on the plus sign. There are three choices (add, create, clone). You want to click on “add”, then where it asks for a Local Path, click on choose, and navigate inside your hugo site directory (NOT at the top of your hugo structure) and CHOOSE the “public” folder. This is the same as going into the “public” folder with your terminal and typing “git init”. Once again, the “public” folder, not everything.
  6. Now that “public” is on git control locally you want to push it to GitHub. At the moment, on the GitHub application you can see it under “other”. Click on it to focus on it and hit “Publish” on the upper right corner.
  7. The dialogue will ask you for a name, a description, and you’ll get a dropdown with your account. That’s why on step one we erased the one you had. So you could use that name again. Give it the name “hugo”, any description and choose your account “fusion809”. Hit “Publish repository”. If there’s anything to commit, do it, and then hit “Sync”.
  8. The last step is to create a branch for github pages. So with your newly pushed “hugo” repository selected, go ahead and click on “create new branch” which is the third button on the top of the GitHub app. For the name you HAVE TO use “gh-pages” and where it says from, select master, which already will be selected for you. Do an initial commit on “gh-pages” and hit “Publish” or sync again. While on the gh-pages branch, run “hugo” on the top level again, just to make sure the site is rendered to “public” on the gh-pages branch, and do a second commit and sync (or push) again.

Voilá, your site will be up and running and your jekyll site and your hugo site will never mess with each other. Give it some five minutes to show up on https://fusion809.github.io/hugo. That’s how I’ve done it.

Caveat: This only publishes the final static site. If you want to have the rest of the Hugo assets on version control, you have to create another repository from the top of the file structure, but that doesn’t have to be on gh-pages, just push it as another repo to GitHub.

Thanks, I’m operating on Arch Linux though so #5 is not applicable. Could you please create a Linux-equivalent #5 dot point? Sorry, I should have told you my platform.

That’s why it’s easier with the desktop app :stuck_out_tongue: Anyway, create the “hugo” repo on GitHub. On the right there’s the “HTTPS Clone URL” copy that and while within the “public” folder:

git init

to get public on version control

git add .

to add everything, then

git commit -m 'First commit'

to do a commit and prepare everything for upload, then:

git remote add origin <paste the remote repository URL that you copied here>
# Sets the new remote
git remote -v 
# Verifies the new remote URL

then

git branch gh-pages
git checkout gh-pages

to create the new branch and move to it

git add .
git commit -m "Second Commit"
git push 

And that should do it.

point #6 also is difficult for me to follow as far as what I am meant to do with git at the command-line as it was written for the desktop app. Is that in your reply, “then git branch gh-pages…”?

My last post replaces from 5 onwards.

OK, well it isn’t working, see https://fusion809.github.io/hugo. I followed your guide to the letter.

you haven’t pushed the gh-pages branch yet. There’s only the master one, I see. Did you

git checkout gh-pages

…after the git branch thing?? If so, it might be how you have git configured. Try for that last one

git push origin gh-pages

I did. There are two branches see https://github.com/fusion809/hugo/branches

I see your index.html is jibberish with some Jekyll paragraph. That’s why GitHub is not rendering it.

Did you create a working Hugo site, somewhere completely different than your Jekyll structure. Did you get it running on your machine first? Did you create the git from within the public folder? I assume not, otherwise you’d have:

an index.html, a 404.html at least. And that content folder should not be in there.

Anyway, figure out how to create a working Hugo site first, and now you know the rest. Should be easy then. Cheers.

I did create it somewhere different, ~/GitHub/hugo which didn’t exist before following your instructions. It was running on my machine, here it is working locally

. I am getting a page build failure email from GitHub Pages:

The page build failed with the following error:

The submodule themes was not properly initialized with a .gitmodules file. For more information, see Troubleshooting Jekyll build errors for GitHub Pages sites - GitHub Docs.

If you have any questions you can contact us by replying to this email.

see I am having issues with my theme folder (which I cloned from GitHub - gohugoio/hugoThemes: A curated directory of Hugo themes, recursively with all the submodules). Since receiving this error I have run git submodule add https://github.com/spf13/hugoThemes . from within my themes/ folder and now I’m not sure how to push it to my repo properly.

Should not be an issue, since the themes folder should be one level up from inside the public folder, where we are git init ing, or did you clone it in there? In the public folder only the css from the theme ends up there. Now I’m lost. Surely a nested git thing.

I’d try from scratch again and instead of cloning the themes folder just do the “Download ZIP” thing on GitHub and mv it there so that git doesn’t track the themes folder by itself.

The rest of the instructions still work, once you have a proper index.html on gh-pages.

And the about.md and config.toml files should not be there as well. Now that I’m checking out your repo. You should only push the static contents of “public” to the gh-pages branch of the repo after running “hugo” to build the static site.

Needless to say that GitHub does not build with Hugo, just Jekyll, so having everything up there does nothing. It will never trigger a Hugo rebuild. Just push the static content of “~/GitHub/hugo/public/” there and it’ll render just fine.

You might also find this interesting: