diff --git a/public/templates/data.tmpl b/public/templates/data.tmpl
index 1abd9ec..2de6360 100644
--- a/public/templates/data.tmpl
+++ b/public/templates/data.tmpl
@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
   {{#is_vector}}
-  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&key_query}}" />
-  <script src="/mapbox-gl.js{{&key_query}}"></script>
+  <link rel="stylesheet" type="text/css" href="{{baseURL}}/mapbox-gl.css{{&key_query}}" />
+  <script src="{{baseURL}}/mapbox-gl.js{{&key_query}}"></script>
   <style>
     body {background:#000;color:#ccc;}
     #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
@@ -17,9 +17,9 @@
   </style>
   {{/is_vector}}
   {{^is_vector}}
-  <link rel="stylesheet" type="text/css" href="/mapbox.css{{&key_query}}" />
-  <script src="/mapbox.js{{&key_query}}"></script>
-  <script src="/leaflet-hash.js{{&key_query}}"></script>
+  <link rel="stylesheet" type="text/css" href="{{baseURL}}/mapbox.css{{&key_query}}" />
+  <script src="{{baseURL}}/mapbox.js{{&key_query}}"></script>
+  <script src="{{baseURL}}/leaflet-hash.js{{&key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -98,7 +98,7 @@
     }
   };
   xhttp.responseType = 'json';
-  xhttp.open('GET', '/data/{{id}}.json{{&key_query}}', true);
+  xhttp.open('GET', '{{baseURL}}/data/{{id}}.json{{&key_query}}', true);
   xhttp.send();
 
   var propertyList = document.getElementById('propertyList');
@@ -123,7 +123,7 @@
   <h1 style="display:none;">{{name}}</h1>
   <div id='map'></div>
   <script>
-    var map = L.mapbox.map('map', '/data/{{id}}.json{{&key_query}}', { zoomControl: false });
+    var map = L.mapbox.map('map', '{{baseURL}}/data/{{id}}.json{{&key_query}}', { zoomControl: false });
     map.eachLayer(function(layer) {
       // do not add scale prefix even if retina display is detected
       layer.scalePrefix = '.';
diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl
index 11a2cc8..8428afe 100644
--- a/public/templates/index.tmpl
+++ b/public/templates/index.tmpl
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>TileServer GL - Server for vector and raster maps with GL styles</title>
-  <link rel="stylesheet" type="text/css" href="/index.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="{{baseURL}}/index.css{{&key_query}}" />
   <script>
     function toggle_xyz(id) {
       var el = document.getElementById(id);
@@ -17,23 +17,23 @@
 </head>
 <body>
   <section>
-    <h1 class="title {{#if is_light}}light{{/if}}"><img src="/images/logo.png" alt="TileServer GL" /></h1>
+    <h1 class="title {{#if is_light}}light{{/if}}"><img src="{{baseURL}}/images/logo.png" alt="TileServer GL" /></h1>
     <h2 class="subtitle">Vector {{#if is_light}}<s>and raster</s>{{else}}and raster{{/if}} maps with GL styles</h2>
     <h2 class="box-header">Styles</h2>
     <div class="box">
     {{#each styles}}
       <div class="item">
         {{#if thumbnail}}
-          <img src="/styles/{{@key}}/rendered/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
+          <img src="{{baseURL}}/styles/{{@key}}/rendered/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
         {{else}}
-          <img src="/images/placeholder.png" alt="{{name}} preview" />
+          <img src="{{baseURL}}/images/placeholder.png" alt="{{name}} preview" />
         {{/if}}
         <div class="details">
           <h3>{{name}}</h3>
           <p class="identifier">identifier: {{@key}}</p>
           <p class="services">
             {{#if serving_rendered}}
-              services: <a href="/styles/{{@key}}/rendered.json{{&../key_query}}">TileJSON</a>
+              services: <a href="{{baseURL}}/styles/{{@key}}/rendered.json{{&../key_query}}">TileJSON</a>
             {{/if}}
             {{#if wmts_link}}
               | <a href="{{&wmts_link}}">WMTS</a>
@@ -47,14 +47,14 @@
         <div class="viewers">
           {{#if serving_data}}
             {{#if serving_rendered}}
-              <a class="btn" href="/styles/{{@key}}/{{&../key_query}}{{viewer_hash}}">Viewer</a>
+              <a class="btn" href="{{baseURL}}/styles/{{@key}}/{{&../key_query}}{{viewer_hash}}">Viewer</a>
             {{/if}}
           {{/if}}
           {{#if serving_rendered}}
-            <a class="btn" href="/styles/{{@key}}/?{{&../key_query_part}}raster{{viewer_hash}}">Raster</a>
+            <a class="btn" href="{{baseURL}}/styles/{{@key}}/?{{&../key_query_part}}raster{{viewer_hash}}">Raster</a>
           {{/if}}
           {{#if serving_data}}
-            <a class="btn" href="/styles/{{@key}}/?{{&../key_query_part}}vector{{viewer_hash}}">Vector</a>
+            <a class="btn" href="{{baseURL}}/styles/{{@key}}/?{{&../key_query_part}}vector{{viewer_hash}}">Vector</a>
           {{/if}}
         </div>
       </div>
@@ -65,15 +65,15 @@
     {{#each data}}
       <div class="item">
         {{#if thumbnail}}
-          <img src="/data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
+          <img src="{{baseURL}}/data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
         {{else}}
-          <img src="/images/placeholder.png" alt="{{name}} preview" />
+          <img src="{{baseURL}}/images/placeholder.png" alt="{{name}} preview" />
         {{/if}}
         <div class="details">
           <h3>{{name}}</h3>
           <p class="identifier">identifier: {{@key}}{{#if formatted_filesize}} | size: {{formatted_filesize}}{{/if}} | type: {{#is_vector}}vector{{/is_vector}}{{^is_vector}}raster{{/is_vector}} data</p>
           <p class="services">
-            services: <a href="/data/{{@key}}.json{{&../key_query}}">TileJSON</a>
+            services: <a href="{{baseURL}}/data/{{@key}}.json{{&../key_query}}">TileJSON</a>
             {{#if wmts_link}}
               | <a href="{{&wmts_link}}">WMTS</a>
             {{/if}}
@@ -85,10 +85,10 @@
         </div>
         <div class="viewers">
           {{#is_vector}}
-          <a class="btn" href="/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">X-Ray view</a>
+          <a class="btn" href="{{baseURL}}/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">X-Ray view</a>
           {{/is_vector}}
           {{^is_vector}}
-          <a class="btn" href="/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">Raster view</a>
+          <a class="btn" href="{{baseURL}}/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">Raster view</a>
           {{/is_vector}}
         </div>
       </div>
@@ -96,7 +96,7 @@
     </div>
   </section>
   <footer>
-    <a href="https://www.klokantech.com/" target="_blank"><img src="/images/klokantech.png" /></a>
+    <a href="https://www.klokantech.com/" target="_blank"><img src="{{baseURL}}/images/klokantech.png" /></a>
     <p>
       <a href="https://github.com/klokantech/tileserver-gl" target="_blank">Powered by TileServer GL ({{server_version}})</a> – <a href="https://www.klokantech.com/" target="_blank">open-source project from Klokan Technologies GmbH.</a>
     </p>
diff --git a/public/templates/viewer.tmpl b/public/templates/viewer.tmpl
index 92dbce5..0b6496d 100644
--- a/public/templates/viewer.tmpl
+++ b/public/templates/viewer.tmpl
@@ -4,11 +4,11 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
-  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&key_query}}" />
-  <script src="/mapbox-gl.js{{&key_query}}"></script>
+  <link rel="stylesheet" type="text/css" href="{{baseURL}}/mapbox-gl.css{{&key_query}}" />
+  <script src="{{baseURL}}/mapbox-gl.js{{&key_query}}"></script>
   <link rel="stylesheet" type="text/css" href="/mapbox.css{{&key_query}}" />
-  <script src="/mapbox.js{{&key_query}}"></script>
-  <script src="/leaflet-hash.js{{&key_query}}"></script>
+  <script src="{{baseURL}}/mapbox.js{{&key_query}}"></script>
+  <script src="{{baseURL}}/leaflet-hash.js{{&key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -26,12 +26,12 @@
     if (preference == 'vector') {
       var map = new mapboxgl.Map({
         container: 'map',
-        style: '/styles/{{id}}.json{{&key_query}}',
+        style: '{{baseURL}}/styles/{{id}}.json{{&key_query}}',
         hash: true
       });
       map.addControl(new mapboxgl.Navigation());
     } else {
-      var map = L.mapbox.map('map', '/styles/{{id}}/rendered.json{{&key_query}}', { zoomControl: false });
+      var map = L.mapbox.map('map', '{{baseURL}}/styles/{{id}}/rendered.json{{&key_query}}', { zoomControl: false });
       new L.Control.Zoom({ position: 'topright' }).addTo(map);
       setTimeout(function() {
         new L.Hash(map);
diff --git a/src/server.js b/src/server.js
index 50d4062..3c2e0d5 100644
--- a/src/server.js
+++ b/src/server.js
@@ -69,7 +69,7 @@ module.exports = function(opts, callback) {
   }
 
   var options = config.options || {};
-  var baseURL = config.baseURL;
+  var baseURL = options.baseURL;
 
   var paths = options.paths || {};
   options.paths = paths;
@@ -300,7 +300,8 @@ module.exports = function(opts, callback) {
     });
     return {
       styles: styles,
-      data: data
+      data: data,
+      baseURL: baseURL
     };
   });
 
@@ -314,6 +315,7 @@ module.exports = function(opts, callback) {
     style.name = (serving.styles[id] || serving.rendered[id]).name;
     style.serving_data = serving.styles[id];
     style.serving_rendered = serving.rendered[id];
+    style.baseURL = baseURL;
     return style;
   });
 
@@ -331,6 +333,8 @@ module.exports = function(opts, callback) {
     }
     data.id = id;
     data.is_vector = data.format == 'pbf';
+
+    data.baseURL = baseURL;
     return data;
   });
 
