# Gitlab Pages and Static Files

**URL:** <https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352>\
**Category:** support\
**Created:** [June 10, 2018, 2:45pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352 "2018-06-10T14:45:14Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![guissmo](https://avatars.discourse-cdn.com/v4/letter/g/f17d59/32.png) [@guissmo](https://discourse.gohugo.io/u/guissmo)\
**Post date:** [June 10, 2018, 2:45pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352/1 "2018-06-10T14:45:14Z")

</div>

Let  
X = [namespace.gitlab.io](http://namespace.gitlab.io)  
Y = [namespace.gitlab.io/project-name](http://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.

---

<div class="post-metadata">

**Author:** ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)\
**Post date:** [June 10, 2018, 6:23pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352/2 "2018-06-10T18:23:15Z")

</div>

Read [Requesting Help](https://discourse.gohugo.io/t/requesting-help/9132?u=maiki), and share the repo so we can see the code.

---

<div class="post-metadata">

**Author:** ![cmal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cmal/32/5324_2.png) [@cmal](https://discourse.gohugo.io/u/cmal)\
**Post date:** [June 11, 2018, 12:48pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352/3 "2018-06-11T12:48:32Z")

</div>

> [@guissmo](#):
>
> I find that the css files in are being searched for in X instead of Y.

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 🙂

---

<div class="post-metadata">

**Author:** ![cerrone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cerrone/32/7764_2.png) [@cerrone](https://discourse.gohugo.io/u/cerrone)\
**Post date:** [January 22, 2019, 1:11pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352/4 "2019-01-22T13:11:05Z")

</div>

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](http://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/](http://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.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 22, 2019, 2:07pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352/5 "2019-01-22T14:07:21Z")

</div>

> [@cerrone](#):
>
> (had to change “.” to “dot” in order to post the comment)

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

> [@cerrone](#):
>
> Changed from config.toml to config.yaml (as I understand that default new pages created with HUGO command are in yml format, not toml)

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.

> [@cerrone](#):
>
> Any idea whether that is a GL or HUGO issue, perhaps due to the GI file?

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.

---

<div class="post-metadata">

**Author:** ![cerrone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cerrone/32/7764_2.png) [@cerrone](https://discourse.gohugo.io/u/cerrone)\
**Post date:** [January 22, 2019, 2:18pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352/6 "2019-01-22T14:18:29Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 22, 2019, 2:45pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352/7 "2019-01-22T14:45:08Z")

</div>

> [@cerrone](#):
>
> YAML/TOML: ok, but why mix both?

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

> [@cerrone](#):
>
> [Hugo project files](https://www.dropbox.com/s/25kwdwf6kw8rx2o/Archive.zip?dl=0)  
> Theme: Hello Friend (Hugo themes page)  
> [Link to GL Pages](https://blendedio.gitlab.io/blog.blended.io/)

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:

> <https://github.com/panr/hugo-theme-hello-friend/blob/4e670046282bae1aa61db4de34f93e5ec864df86/layouts/partials/inject.stylesheet.html#L2>

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.

---

<div class="post-metadata">

**Author:** ![cerrone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cerrone/32/7764_2.png) [@cerrone](https://discourse.gohugo.io/u/cerrone)\
**Post date:** [January 22, 2019, 3:16pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352/8 "2019-01-22T15:16:52Z")

</div>

Thanks for the effort.

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

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 22, 2019, 3:33pm UTC](https://discourse.gohugo.io/t/gitlab-pages-and-static-files/12352/9 "2019-01-22T15:33:46Z")

</div>

> [@cerrone](#):
>
> Once the CSS/JS relative links are fixed, the Inspect actually shows a JS security issue.

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](https://github.com/panr/hugo-theme-hello-friend/issues) theme repo.

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