URLs for assets (CSS/JS/Images) on production server are incorrect

Kirby 2 Issues 🐛
1

I’m rather new to Kirby, but have to say that I’m really loving how you can customise the backend for the users - I’ve built a site for a friend and it works perfectly on my development server (MAMP running on my Mac).

However when I deploy the finished site to the production server (hosted with easily.co.uk) I run into some issues; I’m hoping that someone may have seen similar issues elsewhere and can point me in the correct direction.

When I’ve uploaded all of the files for the site to the production server (I’ve made sure that I’ve also copied the .htaccess file for Kirby) I can successfully navigate to the home page and it correctly loads the css, javascript and images. However, when I go to one of the other pages, the linked files are not found; inspecting the html in the developer tools in Chrome shows the following paths for the css file that it is trying to include:

Homepage

<link rel="stylesheet" href="http://www.mydomain.com/assets/css/main.css">

Second Page

<link rel="stylesheet" href="http://www.mydomain.com/index.php/about/experience/assets/css/main.css">

As you can see, on the second pages, it’s including the whole path to the page and then appending the ‘/assets/css/main.css’ path at the end, which is why it doesn’t find this. It’s doing the same for the images and javascript files…

If anyone has seen anything similar and could point me in the direction of a solution, I’d be most grateful; as I said earlier I’m really impressed with Kirby and want to start using it more, but have fallen at this last hurdle of getting it running on the hosted server.

2

Do you use the css() and js() helpers to link your css and js files? Could you paste the part of your template code in which you use those?

3

Yes I do - so for example I’ve copied in my header snippet where I include a main.css file. I’m using the css() helper to do that:

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <title><?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?></title>
  <meta name="description" content="<?php echo $site->description()->html() ?>">
  <meta name="keywords" content="<?php echo $site->keywords()->html() ?>">

  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  <?php echo css('assets/css/main.css') ?>

</head>
<body>

  <header class="site-header">

    <div class="container">
    etc...