Hi, I now have a problem that seems easier to solve.
When I run hugo server in local, everything is ok. My local site is shown normally. But, When I follow the tutorial of deploying hugo to Github Pages, something weird happens.
My remote site shows wrong style. And I use browser console to know that some css file can not be found.
So I check the index.html and find that the of these css are different between two branch(one is pushed from local, the other is auto generated by github action).
Location of some css files has been changed. The blog/ prefix which is my project name is disappered!
<!-- Before github actions -->
<script src=/blog/js/journal.js></script>
<!-- After github actions, the branch: gh-pages -->
<script src=/js/journal.js></script>
but when you run hugo server it uses http://localhost:1313/ so you’ve developed with a different assumption about where a URL like /blog/js/journal.js lives.
but when you run hugo server it uses http://localhost:1313/
When I run hugo server, it use http://localhost:1313/blog/ in my computer… Everything is fine in local site. Maybe something wrong?
And the file-not-found message on remote site points to https://wangloo.github.io/vendor/css/bootstrap.min.css. It is indeed not found. But https://wangloo.github.io/blog/vendor/css/bootstrap.min.css is found.
^Csoben@soben-HP:~/blog$ hugo server
Start building sites …
hugo v0.99.1-d524067382e60ce2a2248c3133a1b3af206b6ef1 linux/amd64 BuildDate=2022-05-18T11:18:14Z VendorInfo=gohugoio
| EN
-------------------+-----
Pages | 66
Paginator pages | 4
Non-page files | 3
Static files | 14
Processed images | 0
Aliases | 23
Sitemaps | 1
Cleaned | 0
Built in 108 ms
Watching for changes in /home/soben/blog/{archetypes,content,static,themes}
Watching for config changes in /home/soben/blog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/blog/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Oh! Are you editing files under themes/diary? If so, don’t do that, copy the file you want from themes/diary into your site root. For example themes/diary/layouts/partials/head.html should be copied to layouts/partial/head.html and edited there.
That will use the unmodified diary theme. Then make changes by copying as I suggested. But you will need to use Hugo extended locally and in your GHA if it changes the CSS or JS.
Actually, with the wrong way to use theme, I did deploy successfully and the remote site was normal for a while in the past. But since I update hugo from 0.8x to 0.99.1(I guess), it becomes abnormal.
Yes, there are other sub-sites under www.wangloo.github.io.
I think you may be getting tripped up my Hugo’s terminology. Absolute means a link like https://example.com/and/some-url. Relative means /and/some-url. For page-relative links e.g. (and/some-url) there hasn’t been a term in the docs.
It’s not language that the barrier here, it is me trying to figure what is going on. I’m poking at the site now. When I use hugo --gc it generates with the problem URL so it’s not a workflow or GitHub Pages issue.
Okay. I figured it out. The problem is that with an absolute url like /vendor/css/bootstrap.min.css both relURL and absURL respect the path relative the site instead of the baseURL.
Meaning if you use /blog/vendor/css/bootstrap.min.css I think it will work (testing momenarily).
Another options is to use a <base href="{{ .Site.BaseURL }}"> but that has a set of things that will break.
The choices, I think, are to modify the theme layouts to use /blog/ when they begin with /, or to use a different theme that explicitly support living in a subdirectory.
I just tried this, and remote site gets normal. But the local site(http://localhost:1313/blog/) gets abnormal. I probably understand the reason of it(redundant /blog prefix).
If you don’t use latest with the hugo install action, but instead specify v0.99.1 you ought to be golden (provided you revert to before making the changes needed for v0.101.0).
