Add URL debug message shown when baseurl is not configured correctly

_config.yml

@@ -13,8 +13,7 @@
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
-baseurl: "" # the subpath of your site, e.g. /blog
-url: "" # the base hostname & protocol for your site, e.g. http://example.com
+baseurl: "/" # the subpath of your site, e.g. /blog
 
 # Build settings
 markdown: kramdown

_includes/widgets/url_debug_message.html

@@ -0,0 +1,23 @@
+<div id="url-debug-message" class="row mt-3 d-none">
+    <div class="col">
+        <div class="alert alert-warning my-0" role="alert">
+            <h5><i class="fas fa-exclamation-triangle"></i> Action required</h5>
+            <strong>Problem:</strong>
+            The current root path of this site is <code class="root-path-text"></code>,
+            which does not match the <code>baseurl</code> (<code>{{ site.baseurl }}</code>) configured in <code>_config.yml</code>.
+            <br>
+
+            <strong>Solution:</strong>
+            Please set the <code>baseurl</code> in <code>_config.yml</code> to "<code class="root-path-text"></code>".
+        </div>
+    </div>
+</div>
+
+<script>
+if(location.pathname != "{{ site.baseurl }}"){
+    document.getElementById("url-debug-message").classList.remove('d-none');
+}
+document.querySelectorAll(".root-path-text").forEach(function(element){
+    element.textContent = location.pathname;
+});
+</script>

index.html

@@ -6,6 +6,8 @@
 ---
 {% include widgets/profile_card.html %}
 
+{% include widgets/url_debug_message.html %}
+
 {% if site.data.display.homepage.show_experience %}
 {% include widgets/experience_card.html %}
 {% endif %}