Deployed Hugo on Github pages, theme & images are missing

support
1

Hi.

I’ve been really frustrated over the past few days trying to get this thing deployed. Finally got it today but the theme, images, are missing :frowning:

This is my repo. GitHub - Sudo-Victor-Victory/github-portfolio. (You can see the following in the repo)
This is the baseURL in my TOML in the root directory.

baseURL = "https://Sudo-Victor-Victory.github.io/github-portfolio/"

Themes is located in themes/hugo-profile

There’s only 1 submodule

[submodule "themes/hugo-profile"]
	path = themes/hugo-profile
	url = https://github.com/gurusabarish/hugo-profile.git

What am I doing wrong???

2

Inspect the console in your browser’s dev tools. It’s loaded with errors, and here’s why:

image
image556×323 36.5 KB

Every link is relative to the host.

3

Holy.

Yeah that’s a ton of issues. I think the original Theme used Netlify so idk if that’s why they used so many relatives. Some of those are definitely my fault though. I was under the impression that as long as it was under static you could just reference it like /images/the_image.jpg

I’m so new to web programming - the goal is that I need to make those links Global instead of relative right?

How would I go about fixing it? :sob:

4

First, create an issue in the theme’s GitHub repo. This theme is borked.

Second, test locally and you’ll see the same problem:

image
image514×459 16.4 KB

Third, change stuff like this:

<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/font.css" media="all">

To use the relURL function instead:

<link rel="stylesheet" href="{{ `css/font.css` | relURL }}" media="all">

Note there is no leading slash in front of css/font.css… that’s really important. See documentation to understand why.

Fourth, and you may already know this, don’t edit theme files. Override them instead.

5

Remove all of this from your site config. I’m not sure where this came from (maybe a netlify config file), but it doesn’t belong here:



[build]
publish = "exampleSite/public"
command = 'cd exampleSite && echo -e "\ngoogleAnalytics: $GOOGLE_ANALYTICS \ndisqusShortname: $DISQUS_SHORTNAME \n" >> config.yaml && hugo --gc --minify --themesDir ../..'

[context.production.environment]
HUGO_VERSION = "0.143.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
HUGO_THEME = "repo"

[context.split1]
command = "cd exampleSite && hugo --gc --minify --enableGitInfo --themesDir ../.."

[context.split1.environment]
HUGO_VERSION = "0.143.0"
HUGO_ENV = "production"
HUGO_THEME = "repo"

[context.deploy-preview]
command = "cd exampleSite && hugo --gc --minify --buildFuture --themesDir ../.. -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.143.0"
HUGO_THEME = "repo"

[context.branch-deploy]
command = "cd exampleSite && hugo --gc --minify --themesDir ../.. -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.143.0"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"
6

Clean up your repository. For example, the public directory should not be under source control.

touch .gitignore
echo ".hugo_build.lock" >> .gitignore
echo "/public" >> .gitignore
echo "/resources" >> .gitignore
git rm -rf public .hugo_build.lock
git add -A
git commit -m "Clean up repository"
git push
7

Thank you - a lot of these suggestions really helped towards getting this website on the right path!

There’s 2 things that I’m stuck on and this will be good to go!

I need to change a file within the theme. My search won’t work until I go into the themes/hugo-profile/static/js/search.js and changeawait fetch (/index.json) to wait fetch("index.json) . Something tells me that I should move the search.js file to my own static folder and modify it there. Is that right? But then I’d prob need to modify a ton of other js scripts. Idk

  1. Fav.icon just WON’T let me find it. I’m stuck :frowning: I got it for the main page. But for gallery or blog, it just won’t let me get it. It keeps 404’ing.

GitHub - Sudo-Victor-Victory/github-portfolio and here’s the website again

8

https://github.com/Sudo-Victor-Victory/github-portfolio/blob/main/layouts/partials/head.html#L5

You need to do the same thing… path without leading slash, then pass through the relURL function.

I’ll look at the JS thing a little later.

Also, heads up… the sample GitHub Pages workflow in our documentation is going to change a little bit in about 10 minutes. Nothing major, but fixes a stupid caching limitation.

9

This is the change:

Or you can cut/paste the whole thing again:
https://gohugo.io/host-and-deploy/host-on-github-pages/#step-7

10

Thank you for updating me about the change! I would have for sure missed it :laughing:

I accidentally omitted the relURL change to the fav.png on the previous commit, but I had tried it and ran into the 404 issue. Since it was in the root of static AND in the generated public (its not used but it was amazing for figuring out what components are relative to what) but still got the issue :sob:

the search.js fix of omitting the / infront of index.json is really intriguing too.

11

Your logo/icon link is broken for the same reason everything else was broken: you need to pass the values through the relURL function.

diff --git a/layouts/partials/sections/footer/copyright.html b/layouts/partials/sections/footer/copyright.html
index 3045d36..3747b0f 100644
--- a/layouts/partials/sections/footer/copyright.html
+++ b/layouts/partials/sections/footer/copyright.html
@@ -4,7 +4,7 @@
             {{ if or .Site.Params.navbar.brandLogo .Site.Params.favicon }}
                 <div class="pb-2">
                     <a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">
-                        <img alt="Footer logo" src="{{ .Site.Params.navbar.brandLogo | default .Site.Params.favicon }}"
+                        <img alt="Footer logo" src="{{ .Site.Params.navbar.brandLogo | default .Site.Params.favicon | relURL }}"
                             height="40px" width="40px">
                     </a>
                 </div>
diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html
index 5741f4c..fdffd5e 100644
--- a/layouts/partials/sections/header.html
+++ b/layouts/partials/sections/header.html
@@ -52,7 +52,7 @@
             <!-- navbar brand -->
             <a class="navbar-brand primary-font text-wrap" href="{{ .Site.BaseURL | relURL }}">
                 {{ if and (or (.Site.Params.favicon) (.Site.Params.navbar.brandLogo)) (.Site.Params.navbar.showBrandLogo | default true) }}
-                <img src="{{ .Site.Params.navbar.brandLogo | default .Site.Params.favicon }}" width="30" height="30"
+                <img src="{{ .Site.Params.navbar.brandLogo | default .Site.Params.favicon | relURL }}" width="30" height="30"
                     class="d-inline-block align-top">
                 {{ .Site.Params.navbar.brandName | default .Site.Params.title }}
                 {{ else }}

For your JS problem:

mkdir static/js
cp themes/hugo-profile/static/js/search.js static/js

Then change this:

let response = await fetch("/index.json");

To this:

let response = await fetch("/github-portfolio/index.json");

Please log an issue with the theme author (e.g., “Cannot serve site from subdirectory”):
https://github.com/gurusabarish/hugo-profile

This is a terrible experience for any new comer who wants to host on GitHub pages.

12

Implemented the changes, deployed and it looks good.

I also created the issue Cannot serve site from subdirectory - Required Changes (relURL and search.js) · Issue #225 · gurusabarish/hugo-profile · GitHub with a little explanation and suggestions on how to implement. Thank you Jmooring I learned a ton about web development, hugo, proper maintenance / documentation, reading documentation, and had some fun along the way :slight_smile: