Gitlab Pages and Static Files

support
1

Let
X = namespace.gitlab.io
Y = namespace.gitlab.io/project-name

So I have managed to deploy a Hugo site served under Y. That is, the HTML works when I type the url Y.

However, the CSS files do not work. After some investigation, I find that the css files in are being searched for in X instead of Y.

This is the case for static files as well. And even the homepage.

Here is my .gitlab-ci.yml:

image: monachus/hugo

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

In config.toml:

baseurl = Y

Can someone tell me please what to do to make the things point to the correct address?

Apologies I had to change to X and Y since I’m only allowed two links as a new user.

2

Read Requesting Help, and share the repo so we can see the code.

3

From what you say it seems to me that this is not a hugo issue but rather something like your theme trying to load the CSS from the webroot by starting with / such as <link rel="stylesheet" href="/css/style.css">.

You may debug this by opening the HTML source of your page then looking at the corresponding template in your theme :slight_smile:

4

I have somewhat similar issues.

  • repo-name: blog dot domain dot com (had to change “.” to “dot” in order to post the comment)
  • Followed HUGO Quickstart
  • Copied theme HELLO-FRIEND into the themes folder
  • Changed from config.toml to config.yaml (as I understand that default new pages created with HUGO command are in yml format, not toml)
  • Added GL CI file as per Hugo page: gohugo.io/hosting-and-deployment/hosting-on-gitlab/#readout
  • Pushed all to GL

I have these issues:
a. CSS was built but GL Pages does not appear to have, e.g. wrong link to CSS? see b.
b. all links on that page to local pages, look like user.gitlab.io/repo-name/repo-name/page/hello/

I guess for reasons of b. CSS does not load.

Any idea whether that is a GL or HUGO issue, perhaps due to the GI file?

Thank you.

5

You could also use the code block button </> or wrapped it in backticks i.e. `

No need for the above. config.toml provides the main configuration for a Hugo project it doesn’t have anything to do with the hugo new command.

You need to show us the source code of your Hugo project and that is access to the Gitlab repo, also a link to the published website would help.

There is no other away for us to know what the issue is with your setup.

6

YAML/TOML: ok, but why mix both?

Hugo project files
Theme: Hello Friend (Hugo themes page)
Link to GL Pages

Note that the theme author writes to run the Hugo server like this hugo server -t hello-friend and not like it’s shown on gohugo: hugo server

Thanks for the help. Much appreciated.

Update: The issue could to be that generating the static site locally with hugo results in (obvious I guess) the same static artefact that GL generates via their CI. Is it a theme issue then?

7

It doesn’t really make any difference. Hugo can work with both of these formats within a single project.

Right. So you have set the baseURL as baseURL: blog.blended.io and this is published on Gitlab Pages at https://blendedio.gitlab.io/blog.blended.io/

I suppose that the above is just a temporary URL since the final one will be blog.blended.io. As a rule of thumb it’s always best to test a website by making the baseURL value exactly the same as the URL under which the project will be published.

But in this particular case the missing stylesheet has the wrong URL for another reason. If you have a look at:

You will see that the theme author has entered a forward slash in the beginning of the href attribute.

That forward slash points to the host root of a domain. You have assigned your project’s baseURL to a subdomain and Hugo cannot guess the correct URL in this scenario.

Therefore you need to override the above partial from the theme you’ve chosen to use.

Under the root of your Hugo project there is already an empty /layouts/ directory.

Within this directory replicate the folder structure of the above partial. i.e. /layouts/partials/inject.stylesheet.html

Then within inject.stylesheet.html enter the following:

<link rel="stylesheet" href="assets/style.css">

Test again and if this does not fix the missing CSS then test your project under its intended subdomain and not the GitLab one.

1 Like
8

Thanks for the effort.

Once the CSS/JS relative links are fixed, the Inspect actually shows a JS security issue.

9

That is beyond the scope of this forum.

If you think that this is something that the theme author should look into I suggest that you open an issue in the HelloFriend theme repo.

If you do that make sure to provide a detailed report of the JS security issue.

2 Likes