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

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

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"

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

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?

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

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

:face_with_thermometer:

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.

1 Like

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.

1 Like

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!

1 Like

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.

I have done the following steps:

  1. copy blog/theme/diary/layouts/ to blog/layouts/
  2. copy blog/theme/diary/assets/ to blog/assets
  3. 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?

In your workflow trying doing this:

submodules: recursive

instead of

submodules: true

The diary theme itself has submodules.

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

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.

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.

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.

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.

1 Like

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

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.

1 Like

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.

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