<projectname> prefix is disappered in css location info after deploy to github pages

wangloo · August 16, 2022, 5:32am

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>

You can see the code in there blog/index.html at gh-pages · wangloo/blog (github.com) and there blog/index.html at main · wangloo/blog (github.com)

It does not happen at first, but may be after updating hugo(NOT sure). And I just start learning website so I need your help!

Outout of hugo env:

hugo v0.99.1-d524067382e60ce2a2248c3133a1b3af206b6ef1 linux/amd64 BuildDate=2022-05-18T11:18:14Z VendorInfo=gohugoio
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.18"

cshoredaniel · August 16, 2022, 6:31am

In your config.toml you have

baseURL = "https://wangloo.github.io/blog/"

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.

See Local Server badly generates my website - #14 by damien

wangloo · August 16, 2022, 6:54am

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.

Where should I check?

cshoredaniel · August 16, 2022, 6:58am

Are you sure?

Run

hugo server -b http://localhost:1313/blog/

and it will definitely use a baseURL of http://localhost:1313/blog/

What is the output of the hugo server command? It should tell you what it is using.

Conversely, use

hugo server -b http://localhost:1313/

and it will run without /blog/.

wangloo · August 16, 2022, 7:23am

That’s my output of hugo server:

^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

cshoredaniel · August 16, 2022, 7:33am

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.

cshoredaniel · August 16, 2022, 7:42am

Actually… I think you need the extended version of Hugo.

You haven’t specified that in the workflow.

        with:
          hugo-version: 'latest'
          extended: true

That is I think you need to uncomment extended: true

Yep! I downloaded Hugo basic 0.99.1 and did hugo server and it throws errors. That’ll be what is happening in your GHA.

wangloo · August 16, 2022, 8:20am

You are right! I did make this mistake.

For me, a website beginer, how to solve this problem? Now I just want to make my blog work normal with original diary theme.

Thanks, cshoredaniel!

cshoredaniel · August 16, 2022, 8:33am

I would suggest doing a fresh checkout:

git clone --recursive --shallow-submodules https://github.com/wangloo/blog blog-clean-diary

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.

wangloo · August 16, 2022, 9:29am

I have done the following steps:

copy blog/theme/diary/layouts/ to blog/layouts/
copy blog/theme/diary/assets/ to blog/assets
uncomment extended = true in workflow file.

Run hugo server locally, everything is fine. Output local address is http://localhost:1313/blog/.

So I try to push changes to github repo. After github action, the blog/prefix also is disappered like origin. What step did I miss?

cshoredaniel · August 16, 2022, 9:36am

In your workflow trying doing this:

submodules: recursive

instead of

submodules: true

The diary theme itself has submodules.

cshoredaniel · August 16, 2022, 9:51am

Using a sub-directory is tricky.

I’ll have to poke at the theme. It may not support doing that.

Is this a hard requirement (that the site be under /blog)?

wangloo · August 16, 2022, 9:55am

I have done this. But still not show normally…

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.

cshoredaniel · August 16, 2022, 9:56am

I noticed this in your head.html

<link type="text/css" rel="stylesheet" href="{{"/vendor/css/bootstrap.min.css" | relURL}}">

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.

wangloo · August 16, 2022, 10:11am

I understand the different between relative and absolute. But I can not figure out how it relates to my question.

can you explain in detail? Sorry, english is not my mother-language. Thank you for your patience.

cshoredaniel · August 16, 2022, 10:14am

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.

cshoredaniel · August 16, 2022, 10:30am

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.

Those are the ‘easy’ options, at least (IMO).

cshoredaniel · August 16, 2022, 10:40am

Hmmm… Bug in relURL with leading slash when baseURL includes a subdirectory · Issue #9994 · gohugoio/hugo · GitHub

If you specify a version before v0.101.0 it will likely work as expected when you deploy.

EDIT: With hugo 0.99.1 doing hugo --gc gives the right paths in /public.

The moral of story is always deploy with the same version as you use locally.

wangloo · August 16, 2022, 10:56am

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).

I’m reading and trying to understand this post.

cshoredaniel · August 16, 2022, 11:00am

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).