Your theme's demo is not working on the Hugo Themes website

[onedrawingperday]

Hello @Lednerb

I see that since commit 79846b1 your theme is using Hugo Pipes.

However you have not committed the generated resources of your theme and as a result your theme's demo fails to generate on the Hugo website.

To fix this issue please have a look at the updated README of Hugo Themes: https://github.com/gohugoio/hugoThemes#resources You need to commit the /resources/ directory and its contents in your theme's repository.

If you have any questions do not hesitate to ask me or @digitalcraftsman

[Lednerb]

@onedrawingperday thank you very much for the hint! I will update and commit the resources in the next days and leave a message here when it's done.

[Lednerb]

Hi @onedrawingperday

I've just wanted to fix this issue and followed the Readme, but no public/resources folder gets generated.

The styles get generated as follows:

{{ $variables := resources.Get "sass/_variables.scss" }}
{{ $theme := resources.Get "sass/theme.scss" }}
{{ $combined := slice $variables $theme | resources.Concat "sass/combined.scss" | resources.ExecuteAsTemplate "sass/combined.scss" .  }}
{{ $style := $combined | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

and scripts:

{{ $js := resources.Get "js/externalDependencies.js" }}
{{ $secureJS := $js | resources.Fingerprint "md5" }}
<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>

{{ $jsTemplate := resources.Get "js/theme.js" }}
{{ $secureJS := $jsTemplate | resources.ExecuteAsTemplate "js/theme.js" . | fingerprint "md5" }}
<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>

So I'm using the .Permalink syntax.

However a /resources/_gen directory gets generated but not within the public folder but directly under /

---

Will it work to copy and commit this folder?

If so, maybe we should update the README of hugo themes, otherwise I would kindly ask for your help ;)

[onedrawingperday]

@Lednerb You need to use .RelPermalink for your Hugo Pipes resources, in every template because your theme's demo will be available in a subdirectory of the Hugo website.

Will it work to copy and commit this folder?

If so, maybe we should update the README of hugo themes, otherwise I would kindly ask for your help ;)

You need to execute hugo from your Example Site's directory locally and then commit what is under exampleSite/public/resources/ in your theme's repository. The README is fine as is.

Once you do this let me know so that I can test your theme with the Build Script.

Thanks.

[Lednerb]

Please have a look at 8770b9b.

I've updated to .RelPermalink but the public/resources folder gets not generated...

[onedrawingperday]

8770b9b looks fine.

Regarding the public/resources folder please try the following:

• Go into your theme's exampleSite directory.
• In line 5 of exampleSite/config.toml enter this parameter: themesDir = "../.."
• Save
• Open a terminal from within the /exampleSite/ directory and run hugo
• After a while you should have a exampleSite/public/ directory and within that the /resources/ that we need. Copy this folder under the root of your theme.
• Make sure to delete the exampleSite/public/ after doing the above step because it is no longer needed.
• Commit the changes.
• Let me know.

P.S. Whenever you update your theme's SCSS you will need to generate your theme's resources and then commit them again.

[Lednerb]

Hi again and thank you for the instructions!

I've followed them and again there is a resources folder generated but not within the public folder.
It gets generated in the exampleSite/resoureces now.

---

P.S. Whenever you update your theme's SCSS you will need to generate your theme's resources and then commit them again.

Thanks for the hint, I will write a deploy script when the public/resources folder will be generated finde but at the moment it's always under the root path.

I'm using the latest hugo extended version: Hugo Static Site Generator v0.51/extended linux/amd64 BuildDate: 2018-11-07T10:31:39Z

[onedrawingperday]

Hi @Lednerb and thanks for your response.

I am not using Hugo Extended myself since I do not rely on SCSS.

Can you please tell me if the a resources folder exampleSite/resources contains the generated resources? Or is it empty?

If the folder contains the generated resources, then please commit the entire folder under the root of your theme's repository, so that I can test the theme demo with the Build Script.

---

Also note that just a few hours ago the README of the Hugo Themes repository was updated.

Apparently the use of .RelPermalink for Hugo Pipes Resources is a temporary workaround due to bug gohugoio/hugo#5226 once this bug is resolved this fix might need change in your theme's templates once again.

Sorry about that, but we were not aware of the impact this bug report had on Theme Demos of the Hugo Website until yesterday.

[Lednerb]

Hi again @onedrawingperday

I've updated the repo and committed the resources folder directly.
Since 8770b9b the .RelPermalink is used, so it shout work regarding the new issue.

Please let me know if it will work with this changes.

[onedrawingperday]

@Lednerb Now your basic CSS is getting served when I test your theme's demo.

However the icon fonts are missing because you have hard-coded the Example Site's baseURL.

To fix this issue under /bilberry-hugo-theme/assets/sass/_variables.scss please change line 1 to the following:

{{ $fonts := "dist/fonts/" | absURL }}   
$fonts-folder: '{{ .Site.Params.CustomFontsURL | default $fonts }}';

The way you have hard-coded the URLs makes them point to https://example.com instead of your theme's local /dist/fonts/ directory and as a result I am getting CORS errors for every single one those fonts because the URLs point to the example domain.

Please do the above change, re-generate your theme's resources and let me know so that i can test further.

P.S. I am tagging @digitalcraftsman because I think that he needs to know about the issue with the hard-coded icon fonts URLs.

[onedrawingperday]

Eh. I see that you pushed a new commit as I was updating the code snippet.

Bear with me just a minute. I'll test your commit right now and let you know.

This the first time I encounter this issue so I don't have a ready-made fix. I need to test first.

[Lednerb]

Hey @onedrawingperday

thanks for the critical hint here. I've forgotten this part.

New version pushed.

---

Thank you very much for your help, time and engagement not only on this theme but also here gohugoio/hugoThemes#430 (comment) and in general with the Hugo Theme department! 👍 🎉

Great work!

[onedrawingperday]

@Lednerb
No dice with commit: 7d6eb09

Please try the following:

{{ $fonts := "dist/fonts/" | absURL }}   
$fonts-folder: '{{ .Site.Params.CustomFontsURL | default $fonts }}';

[Lednerb]

@onedrawingperday done.

[onedrawingperday]

@Lednerb

I had to install Hugo Extended to troubleshoot this issue.

Please delete the entire existing /resources/ directory, then regenerate and again commit the new resources.

Let me know once you do this so that I can test with the contents of your repository.

[onedrawingperday]

Hello again @Lednerb

Any updates on this? You only need to regenerate your theme's resources as you did before and commit them again in your repo so that the icon fonts in your theme's demo load properly on the Hugo website.

Can you please look into it?

Thanks.

[Lednerb]

Hi @onedrawingperday

sorry for the delay. I've uploaded it again in f72e2b3

Please check. If there's still an issue and you have the solution for this... I'm open for PRs ;)

Thank you for pinging here again.

[Lednerb]

@onedrawingperday thanks for the PR, it's merged.