diff --git a/_includes/all_keypoints.html b/_includes/all_keypoints.html
index 8563df340a8df11ffb4a23e27c15f31be15ed56b..2af59005fae82283f72968406e61dea5e9c87b9b 100644
--- a/_includes/all_keypoints.html
+++ b/_includes/all_keypoints.html
@@ -7,7 +7,7 @@
   {% unless episode.break %}
     <tr>
       <td class="col-md-3">
-        <a href="{{ page.root }}{{ episode.url }}">{{ episode.title }}</a>
+        <a href="{{ relative_root_path }}{{ episode.url }}">{{ episode.title }}</a>
       </td>
       <td class="col-md-9">
         <ul>
diff --git a/_includes/base_path.html b/_includes/base_path.html
new file mode 100644
index 0000000000000000000000000000000000000000..0acf4b94888969a528843b73ddaef1454b054b46
--- /dev/null
+++ b/_includes/base_path.html
@@ -0,0 +1,27 @@
+{% comment %}
+This is adapated from: https://ricostacruz.com/til/relative-paths-in-jekyll
+
+`page.url` gives the URL of the current page with a leading /:
+
+- when the URL ends with the extension (e.g., /foo/bar.html) then we can get
+  the depth by counting the number of / and remove - 1
+- when the URL ends with a / (e.g. /foo/bar/) then the number / gives the depth
+  directly
+{% endcomment %}
+
+{% assign relative_root_path = '' %}
+
+{% assign last_char = page.url | slice: -1 %}
+
+{% if last_char == "/"}
+{% assign offset = 0 %}
+{% else %}
+{% assign offset = 1 %}
+{% endif %}
+
+{% assign depth = page.url | split: '/' | size | minus: offset %}
+{% if    depth <= 1 %}{% assign relative_root_path = '.' %}
+{% elsif depth == 2 %}{% assign relative_root_path = '..' %}
+{% elsif depth == 3 %}{% assign relative_root_path = '../..' %}
+{% elsif depth == 4 %}{% assign relative_root_path = '../../..' %}
+{% endif %}
diff --git a/_includes/carpentries.html b/_includes/carpentries.html
index 0a6953df9860e0025ce8bf0e093d2cfe8c87643c..37cd16e04d394ad90c2d70554b191f90ad632668 100644
--- a/_includes/carpentries.html
+++ b/_includes/carpentries.html
@@ -3,7 +3,7 @@
 {% endcomment %}
 <div class="row">
   <div class="col-md-2" align="center">
-    <a href="{{ site.carpentries_site }}"><img src="{{ page.root }}/assets/img/cp-logo-blue.svg" alt="The Carpentries logo" /></a>
+    <a href="{{ site.carpentries_site }}"><img src="{{ relative_root_path }}/assets/img/cp-logo-blue.svg" alt="The Carpentries logo" /></a>
   </div>
   <div class="col-md-8">
     <p><a href="{{ site.carpentries_site }}">The Carpentries</a> comprises
@@ -23,7 +23,7 @@
 </div>
 <div class="row">
   <div class="col-md-2" align="center">
-    <a href="{{ site.swc_site }}"><img src="{{ page.root }}/assets/img/swc-icon-blue.svg" alt="Software Carpentry logo" /></a>
+    <a href="{{ site.swc_site }}"><img src="{{ relative_root_path }}/assets/img/swc-icon-blue.svg" alt="Software Carpentry logo" /></a>
   </div>
   <div class="col-md-8">
      <p>Since 1998, <a href="{{ site.swc_site }}">Software Carpentry</a> has
@@ -38,7 +38,7 @@
 <br/>
 <div class="row">
   <div class="col-md-2" align="center">
-    <a href="{{ site.dc_site }}"><img src="{{ page.root }}/assets/img/dc-icon-black.svg" alt="Data Carpentry logo" /></a>
+    <a href="{{ site.dc_site }}"><img src="{{ relative_root_path }}/assets/img/dc-icon-black.svg" alt="Data Carpentry logo" /></a>
   </div>
   <div class="col-md-8">
     <p><a href="{{ site.dc_site }}">Data Carpentry</a> develops and teaches
@@ -53,7 +53,7 @@
 <br/>
 <div class="row">
   <div class="col-md-2" align="center">
-    <a href="{{ site.lc_site }}"><img src="{{ page.root }}/assets/img/lc-icon-black.png" alt="Library Carpentry logo" /></a>
+    <a href="{{ site.lc_site }}"><img src="{{ relative_root_path }}/assets/img/lc-icon-black.png" alt="Library Carpentry logo" /></a>
   </div>
   <div class="col-md-8">
     <p><a href="{{ site.lc_site }}">Library Carpentry</a> is in discussions with
diff --git a/_includes/episode_navbar.html b/_includes/episode_navbar.html
index c2bc80e84105e5d6c2bef7c830e23ea01f264c02..74f63e0f80caa2d4b50f2d7fa420df7954a81610 100644
--- a/_includes/episode_navbar.html
+++ b/_includes/episode_navbar.html
@@ -5,23 +5,23 @@
   <div class="col-xs-1">
     <h3 class="text-left">
       {% if page.previous.url %}
-      <a href="{{ page.root }}{{ page.previous.url }}"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span><span class="sr-only">previous episode</span></a>
+      <a href="{{ relative_root_path }}{{ page.previous.url }}"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span><span class="sr-only">previous episode</span></a>
       {% else %}
-      <a href="{{ page.root }}/"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span><span class="sr-only">lesson home</span></a>
+      <a href="{{ relative_root_path }}/"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span><span class="sr-only">lesson home</span></a>
       {% endif %}
     </h3>
   </div>
   <div class="col-xs-10">
     {% if include.episode_navbar_title %}
-    <h3 class="maintitle"><a href="{{ page.root }}/">{{ site.title }}</a></h3>
+    <h3 class="maintitle"><a href="{{ relative_root_path }}/">{{ site.title }}</a></h3>
     {% endif %}
   </div>
   <div class="col-xs-1">
     <h3 class="text-right">
       {% if page.next.url %}
-      <a href="{{ page.root }}{{ page.next.url }}"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span><span class="sr-only">next episode</span></a>
+      <a href="{{ relative_root_path }}{{ page.next.url }}"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span><span class="sr-only">next episode</span></a>
       {% else %}
-      <a href="{{ page.root }}/"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span><span class="sr-only">lesson home</span></a>
+      <a href="{{ relative_root_path }}/"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span><span class="sr-only">lesson home</span></a>
       {% endif %}
     </h3>
   </div>
diff --git a/_includes/favicons.html b/_includes/favicons.html
index 4ea6742d530460e08517cfabbd912c69f937b1d4..8a50b4d911591886ed90c11bb23a5cee5cfd7d6b 100644
--- a/_includes/favicons.html
+++ b/_includes/favicons.html
@@ -1,4 +1,4 @@
-{% assign favicon_url = site.baseurl | append: '/assets/favicons/' | append: site.carpentry | prepend: site.url %}
+{% assign favicon_url = relative_root_path | append: '/assets/favicons/' | append: site.carpentry  %}
 
 {% if site.carpentry == 'swc' %}
 {% assign carpentry = 'Software Carpentry' %}
diff --git a/_includes/javascript.html b/_includes/javascript.html
index a2066c202809b465acc364e63211461f435bbc8f..ac8f16d0e04c6b79976ee5e533340e82f123d0e4 100644
--- a/_includes/javascript.html
+++ b/_includes/javascript.html
@@ -1,9 +1,9 @@
 {% comment %}
   Javascript used in lesson and workshop pages.
 {% endcomment %}
-<script src="{{ page.root }}/assets/js/jquery.min.js"></script>
-<script src="{{ page.root }}/assets/js/bootstrap.min.js"></script>
-<script src="{{ page.root }}/assets/js/lesson.js"></script>
+<script src="{{ relative_root_path }}/assets/js/jquery.min.js"></script>
+<script src="{{ relative_root_path }}/assets/js/bootstrap.min.js"></script>
+<script src="{{ relative_root_path }}/assets/js/lesson.js"></script>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/_includes/main_title.html b/_includes/main_title.html
index d007abae203592c924f78bd178f2d22538214e07..592f880b04d7722eda544cdc07abecd9de304c99 100644
--- a/_includes/main_title.html
+++ b/_includes/main_title.html
@@ -1,4 +1,4 @@
 {% comment %}
   Main title for lesson pages.
 {% endcomment %}
-<h1 class="maintitle"><a href="{{ page.root }}{% link index.md %}">{{ site.title }}</a>{% if page.title %}: {{ page.title }}{% endif %}</h1>
+<h1 class="maintitle"><a href="{{ relative_root_path }}{% link index.md %}">{{ site.title }}</a>{% if page.title %}: {{ page.title }}{% endif %}</h1>
diff --git a/_includes/navbar.html b/_includes/navbar.html
index 868bce8dac32f877df39aa7a55d6337f09748b85..529a83c63979c6ae4c05b6c06bc30dff2268d4f2 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -14,45 +14,45 @@
       {% comment %} Select what logo to display. {% endcomment %}
       {% if site.carpentry == "swc" %}
       <a href="{{ site.swc_site }}" class="pull-left">
-        <img class="navbar-logo" src="{{ page.root }}/assets/img/swc-icon-blue.svg" alt="Software Carpentry logo" />
+        <img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/swc-icon-blue.svg %}" alt="Software Carpentry logo" />
       </a>
       {% elsif site.carpentry == "dc" %}
       <a href="{{ site.dc_site }}" class="pull-left">
-        <img class="navbar-logo" src="{{ page.root }}/assets/img/dc-icon-black.svg" alt="Data Carpentry logo" />
+        <img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/dc-icon-black.svg %}" alt="Data Carpentry logo" />
       </a>
       {% elsif site.carpentry == "lc" %}
       <a href="{{ site.lc_site }}" class="pull-left">
-        <img class="navbar-logo" src="{{ page.root }}/assets/img/lc-icon-black.svg" alt="Library Carpentry logo" />
+        <img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/lc-icon-black.svg %}" alt="Library Carpentry logo" />
       </a>
       {% elsif site.carpentry == "cp" %}
       <a href="{{ site.carpentries_site }}" class="pull-left">
-        <img class="navbar-logo" src="{{ page.root }}/assets/img/cp-logo-blue.svg" alt="The Carpentries logo" />
+        <img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/cp-logo-blue.svg %}" alt="The Carpentries logo" />
       </a>
       {% endif %}
 
       {% comment %} Always show link to home page. {% endcomment %}
-      <a class="navbar-brand" href="{{ page.root }}{% link index.md %}">Home</a>
+      <a class="navbar-brand" href="{{ relative_root_path }}{% link index.md %}">Home</a>
 
     </div>
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav">
 
 	{% comment %} Always show code of conduct. {% endcomment %}
-        <li><a href="{{ page.root }}{% link CODE_OF_CONDUCT.md %}">Code of Conduct</a></li>
+        <li><a href="{{ relative_root_path }}{% link CODE_OF_CONDUCT.md %}">Code of Conduct</a></li>
 
         {% if site.kind == "lesson" %}
 	{% comment %} Show setup instructions. {% endcomment %}
-        <li><a href="{{ page.root }}{% link setup.md %}">Setup</a></li>
+        <li><a href="{{ relative_root_path }}{% link setup.md %}">Setup</a></li>
 
         {% comment %} Show lesson episodes for lessons. {% endcomment %}
         <li class="dropdown">
-          <a href="{{ page.root }}/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Episodes <span class="caret"></span></a>
+          <a href="{{ relative_root_path }}/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Episodes <span class="caret"></span></a>
           <ul class="dropdown-menu">
             {% for episode in site.episodes %}
-            <li><a href="{{ page.root }}{{ episode.url }}">{{ episode.title }}</a></li>
+            <li><a href="{{ relative_root_path }}{{ episode.url }}">{{ episode.title }}</a></li>
             {% endfor %}
 	    <li role="separator" class="divider"></li>
-            <li><a href="{{ page.root }}{% link aio.md %}">All in one page (Beta)</a></li>
+            <li><a href="{{ relative_root_path }}{% link aio.md %}">All in one page (Beta)</a></li>
           </ul>
         </li>
 	{% endif %}
@@ -60,18 +60,18 @@
 	{% comment %} Show extras for lessons or if this is the main workshop-template repo (where they contain documentation). {% endcomment %}
 	{% if site.kind == "lesson" %}
         <li class="dropdown">
-          <a href="{{ page.root }}/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Extras <span class="caret"></span></a>
+          <a href="{{ relative_root_path }}/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Extras <span class="caret"></span></a>
           <ul class="dropdown-menu">
-            <li><a href="{{ page.root }}{% link reference.md %}">Reference</a></li>
+            <li><a href="{{ relative_root_path }}{% link reference.md %}">Reference</a></li>
             {% for extra in site.extras %}
-            <li><a href="{{ page.root }}{{ extra.url }}">{{ extra.title }}</a></li>
+            <li><a href="{{ relative_root_path }}{{ extra.url }}">{{ extra.title }}</a></li>
             {% endfor %}
           </ul>
         </li>
 	{% endif %}
 
 	{% comment %} Always show license. {% endcomment %}
-        <li><a href="{{ page.root }}{% link LICENSE.md %}">License</a></li>
+        <li><a href="{{ relative_root_path }}{% link LICENSE.md %}">License</a></li>
 	{% if page.source %}
 	{% if page.source == "Rmd" %}
 	<li><a href="{{site.github.repository_url}}/edit/gh-pages/{{page.path|replace: "_episodes", "_episodes_rmd" | replace: ".md", ".Rmd"}}">Improve this page <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></li>
diff --git a/_includes/syllabus.html b/_includes/syllabus.html
index 92270f835e6f799412411a2aeda03a5b26e94c2a..e393687a05a7b5da3d02ded55711a54ad75ad67c 100644
--- a/_includes/syllabus.html
+++ b/_includes/syllabus.html
@@ -17,7 +17,7 @@
   <tr>
     {% if multiday %}<td class="col-md-1"></td>{% endif %}
     <td class="{% if multiday %}col-md-1{% else %}col-md-2{% endif %}"></td>
-    <td class="col-md-3"><a href="{{ page.root }}{% link setup.md %}">Setup</a></td>
+    <td class="col-md-3"><a href="{{ relative_root_path }}{% link setup.md %}">Setup</a></td>
     <td class="col-md-7">Download files required for the lesson</td>
   </tr>
   {% for episode in site.episodes %}
@@ -42,7 +42,7 @@
       <td class="{% if multiday %}col-md-1{% else %}col-md-2{% endif %}">{% if hours < 10 %}0{% endif %}{{ hours }}:{% if minutes < 10 %}0{% endif %}{{ minutes }}</td>
       <td class="col-md-3">
         {% assign lesson_number = lesson_number | plus: 1 %}
-	{{ lesson_number }}. <a href="{{ page.root }}{{ episode.url }}">{{ episode.title }}</a>
+	{{ lesson_number }}. <a href="{{ relative_root_path }}{{ episode.url }}">{{ episode.title }}</a>
       </td>
       <td class="col-md-7">
         {% if episode.break %}
diff --git a/_layouts/base.html b/_layouts/base.html
index d8fefd6b1c93db26d5283550659beac2c7eba053..a083eb1f7bd8658f4f93d2bc5c3ba71ab7ac4c5d 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -1,6 +1,5 @@
 ---
 ---
-
 {% comment %}
 When rendering websites locally, `site.github.url` doesn't get resolved
 properly unless GitHub PAT are set up and available in the environment.
@@ -16,6 +15,8 @@ GitHub where `site.github.url` will be defined.
 {% assign search_domain_url = site.github.url  %}
 {% endif %}
 
+{% include base_path.html %}
+
 <!doctype html>
 <html lang="en">
   <head>
@@ -25,10 +26,10 @@ GitHub where `site.github.url` will be defined.
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- meta "search-domain" used for google site search function google_search() -->
     <meta name="search-domain" value="{{ search_domain_url }}">
-    <link rel="stylesheet" type="text/css" href="{{ page.root }}/assets/css/bootstrap.css" />
-    <link rel="stylesheet" type="text/css" href="{{ page.root }}/assets/css/bootstrap-theme.css" />
-    <link rel="stylesheet" type="text/css" href="{{ page.root }}/assets/css/lesson.css" />
-    <link rel="stylesheet" type="text/css" href="{{ page.root }}/assets/css/syntax.css" />
+    <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/bootstrap-theme.css" />
+    <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/lesson.css" />
+    <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/syntax.css" />
 
     {% include favicons.html %}
 
diff --git a/_layouts/workshop.html b/_layouts/workshop.html
index 3525da390ded29b56c2c7270038f2a690f553384..1143b6b287207eb5a703072f13da8b8289da93cd 100644
--- a/_layouts/workshop.html
+++ b/_layouts/workshop.html
@@ -25,9 +25,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="last-modified" content="{{ site.time }}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="{{ page.root }}/assets/css/bootstrap.css" />
-    <link rel="stylesheet" type="text/css" href="{{ page.root }}/assets/css/bootstrap-theme.css" />
-    <link rel="stylesheet" type="text/css" href="{{ page.root }}/assets/css/lesson.css" />
+    <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/bootstrap.css" />
+
+    <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/bootstrap-theme.css" />
+    <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/lesson.css" />
 
     {% include favicons.html %}
 
diff --git a/bin/boilerplate/_extras/figures.md b/bin/boilerplate/_extras/figures.md
index 02ceff6f0ae9409866d73c6d40c7cfc0adb3b5b7..9746da96d5b046126bca4e4693c2b1795e0b2c6a 100644
--- a/bin/boilerplate/_extras/figures.md
+++ b/bin/boilerplate/_extras/figures.md
@@ -51,7 +51,7 @@ title: Figures
           }
         }
       }
-      episode_url = "{{ page.root }}" + lesson_episodes[i];
+      episode_url = "{{ base }}" + lesson_episodes[i];
       xmlHttp[i].open("GET", episode_url);
       xmlHttp[i].send(null);
     }
diff --git a/bin/boilerplate/aio.md b/bin/boilerplate/aio.md
index a418f3b45ee2c3a59950a49e5f5434cbd7dada46..f9d0e50c97849cede50d7cbb24370644e5466deb 100644
--- a/bin/boilerplate/aio.md
+++ b/bin/boilerplate/aio.md
@@ -20,7 +20,7 @@
         article_here.innerHTML = htmlDocArticle.innerHTML;
         }
       }
-      episode_url = "{{ page.root }}" + lesson_episodes[i];
+      episode_url = "{{ base }}" + lesson_episodes[i];
       xmlHttp[i].open("GET", episode_url);
       xmlHttp[i].send(null);
     }