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
This is my repo. GitHub - Sudo-Victor-Victory/github-portfolio . (You can see the following in the repo)
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???
Inspect the console in your browser’s dev tools. It’s loaded with errors, and here’s why:
Every link is relative to the host.
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?
First, create an issue in the theme’s GitHub repo. This theme is borked.
Second, test locally and you’ll see the same problem:
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.
1 Like
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"
1 Like
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
1 Like
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
Fav.icon just WON’T let me find it. I’m stuck
GitHub - Sudo-Victor-Victory/github-portfolio and here’s the website again
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.
This is the change:
committed 12:59AM - 18 Mar 25 UTC
Or you can cut/paste the whole thing again:https://gohugo.io/host-and-deploy/host-on-github-pages/#step-7
Thank you for updating me about the change! I would have for sure missed it
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
the search.js fix of omitting the / infront of index.json is really intriguing too.
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.
1 Like
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
1 Like
system
March 20, 2025, 6:39pm
13
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.
