The lightbi theme doesn't like baseURLs with subdirectories

Using Themes
1

Hi, I’ve looked through similar topics but none seem to be what I’m looking for. I’m using the lightbi template and somehow I got it to work the first time and uploaded it to my webserver. I’ve just created some new posts and now the links (which did work) are not doing this time… this is what is showing in the public/index.html file:

    <script *src***=**"https://fourbranches.co.uk/blog/js/dark-mode.js"></script>

    <link *rel***=**"stylesheet" *href***=**"/blog/style.min.css">

    <link *href***=**"/vendor/glightbox/css/glightbox.min.css" *rel***=**"stylesheet">

    <script *src***=**"https://fourbranches.co.uk/blog/vendor/glightbox/js/glightbox.min.js"></script>

As you can see, some are using the full url and some totally missing it. I’ve tried changed the baseUrl in the hugo,toml file - I’ve tried with a single forward slash mentioned in one topic, double as mentioned in another and the full url as on my webserver. Each time I get the hugo server command to work perfectly but on hugo command no styles and/or partial styles. The favicon works every time lol. on the full URL clicking on a link in the index.html takes me to the post on my webserver, but not for the new posts I’ve just created - I’m at a loss as to how I accomplished it the first time round. I had a look at headless cms for uploading new content but seems too complicated and defeats the object of using Hugo - they sound just like when I was using wordpress. I can’t figure out how to create a workflow for github that will allow me to use my own webserver and that won’t alter the main part of my website which by necessity is php based - a genealogy website. You can see my website at http://www.fourbranches.co.uk and the blog is linked as a subfolder

Hoping someone can help me. Thanks in advance

1 Like
2

please don’t try to style quoted text. Wrap HTML code in ```html and ``` or use the </> button

<script src="https://fourbranches.co.uk/blog/js/dark-mode.js"></script>
<link rel="stylesheet" href="/blog/style.min.css">
<link href="/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<script src="https://fourbranches.co.uk/blog/vendor/glightbox/js/glightbox.min.js"></script>

sounds like you create ONLY the blog part using Hugo and copy it to your php site. If that’s the case:

  • Keep in mind, that Hugo does not clean up the public folder when generating a site. So it might be you have something different there in your sites/public or the location where you use it in your php site.

    cleaning up public and your php sites blog folder could help

  • You have a problem with the part of your site that creates your stylesheet links.

    1. educated guess: due to the fact, that the order of the href and rel tgas is different. it seems you have that plugged in somewhere in your layouts
    2. educated guess: your config.toml is: baseURL = "https://fourbranches.co.uk/" and you generate the links using .RelPermalink

    • make sure your is set to baseURL = "https://fourbranches.co.uk/blog/"

    • view the development site using localhost:1313/blog/

    • check your config/code where you added the styles

      if you cannot figure out, please share your code and sources that is used to generates the lines you posted. (easiest your repo :wink:
      any theme involved here?
      see Requesting Help

  • adding a post should not alter your layouts. There must be something different going on.

    we would also need sources here

your mentioned github workflow thing:

  • would be a different topic
  • would need more details about how you build up your complete site incl.
    repos used, build php site, how you include blog …
3

See https://github.com/binokochumolvarghese/lightbi-hugo/issues/94.

2 Likes
4

Lightbi Author here.

I am working on that and gLightbox issue is already fixed. Will fix issues related to the fonts also.

Thank you @jmooring for opening the issue.