[SOLVED] Deployed website does not load css/javascript(?)

support
1

I have designed my website to a certain extent. Running “hugo -server” it looks as expected, accessed via localhost:1313. Screenshot:

Screenshot_20160815_233227.png1919×901 1.36 MB

However, when I run “hugo” and upload the “public/” folder to my FTP, the site looks like this:

Screenshot_20160815_234141.png1919×905 162 KB

I checked the docs and found this issue but it didn’t fix anything to add {{ $.Site.BaseURL }} to my css links.

That’s my config.toml (first lines):

baseurl = "https://inspiritana.org/test"
languageCode = "en-us"
title = "inspiritana"
# Enable comments by entering your Disqus shortname
disqusShortname = "devcows"
# Enable Google Analytics by entering your tracking code
googleAnalytics = ""
# Define the number of posts per page
paginate = 10
theme = "universal"

That’s in my head.html partial:

  <link href="{{ $.Site.BaseURL }}css/font-awesome.min.css" rel="stylesheet">
   <link href="{{ $.Site.BaseURL }}css/bootstrap.min.css" rel="stylesheet">
   <link href="{{ $.Site.BaseURL }}css/roboto-font.css" rel="stylesheet">
   <!-- Css animations  -->
   <link href="{{ $.Site.BaseURL }}css/animate.css" rel="stylesheet">
   <!-- Theme stylesheet, if possible do not edit this stylesheet -->
   <link href="{{ $.Site.BaseURL }}css/style.default.css" rel="stylesheet" id="theme-stylesheet">
   <!-- Custom stylesheet - for your changes -->
     <link href="{{ $.Site.BaseURL }}css/color-scheme.css" rel="stylesheet">
   <link href="{{ $.Site.BaseURL }}css/custom.css" rel="stylesheet">
   <!-- Favicon and apple touch icons-->
   <link rel="shortcut icon" href="{{ .Site.BaseURL }}img/favicon.ico" type="image/x-icon" />
   <link rel="apple-touch-icon" href="{{ .Site.BaseURL }}img/apple-touch-icon.png" />
   <!-- owl carousel css -->
   <link href="{{ $.Site.BaseURL }}css/owl.carousel.css" rel="stylesheet">
   <link href="{{ $.Site.BaseURL }}css/owl.theme.css" rel="stylesheet">

And those .css files are accessible under the given parts. Even the source code of the deployed site points to the right files.

And that’s inside my scripts.html partial:

     <script src="{{ $.Site.BaseURL }}/js/jquery-1.11.0.min.js"></script>
     <script>
         window.jQuery || document.write('<script src="{{ $.Site.BaseURL }}/js/jquery-1.11.0.min.js"><\/script>')
     </script>
     <script src="{{ $.Site.BaseURL }}/js/bootstrap.min.js"></script>

     <script src="{{ $.Site.BaseURL }}/js/jquery.cookie.js"></script>
     <script src="{{ $.Site.BaseURL }}/js/waypoints.min.js"></script>
     <script src="{{ $.Site.BaseURL }}/js/jquery.counterup.min.js"></script>
     <script src="{{ $.Site.BaseURL }}/js/jquery.parallax-1.1.3.js"></script>
     <script src="{{ $.Site.BaseURL }}/js/front.js"></script>

     <!-- owl carousel -->
     <script src="{{ $.Site.BaseURL }}/js/owl.carousel.min.js"></script>
2

It looks like you need a / between

{{$.Site.BaseURL}}

and “css”

Right now the browser is looking for “url/testcsss/”…

screenshot: https://cl.ly/201e191j0x1J

1 Like
3

Oh snap! I could’ve spotted that myself… :disappointed_relieved:

Thanks a million!

4

@inspiritana If you are always referencing these files from the root and you’re not talking about things like canonical URLs, you can just reference the root directly without the .BaseURL; ie, —

<link rel="stylesheet" href="/css/bootstrap.min.css">

And then you won’t have any issues with it working locally or once built and uploaded to FTP.

1 Like
5

pet peeve, esp. in theme files - beware of using root relative urls and assuming the site will live at the base of a server. They break when the site is hosted under a directory name, such as project sites at github or gitlab.

I had to go through and do lots of <link rel="stylesheet" href={{ "/css/main.css" | relURL }} /> type stuff for css (and similar for js) files in some themes I looked at to make it work for hosting at site root as well as under directory names.

6

Right @Rob_Arnold. Hence the if. That said, BaseURL is a practical option.