Make the site work with a different baseurl

Author: tschneidereit

404.md

@@ -6,11 +6,11 @@ layout: default
     <div class="container w-container">
         <div class="width-container">
         <div class="flex-center m-hero">
-            <img src="/images/404-illustration.svg" alt="" class="_404-illustration">
+            <img src="{{ site.baseurl }}/images/404-illustration.svg" alt="" class="_404-illustration">
             <h1 class="_404-heading">Error: 404</h1>
             <h3 class="_404-sub-heading">Page Not Found</h3>
             <a href="index.html">
-                Go to Main Page<img src="/images/right-arrow.svg" alt="" class="arrow-icon">
+                Go to Main Page<img src="{{ site.baseurl }}/images/right-arrow.svg" alt="" class="arrow-icon">
             </a>
         </div>
         </div>

_config.yml

@@ -17,7 +17,7 @@ title: Bytecode Alliance
 email: hello@bytecodealliance.org
 description: >- # this means to ignore newlines until "baseurl:"
   Welcome to the Bytecode Alliance
-baseurl: "/" # the subpath of your site, e.g. /blog
+# baseurl: "/" # the subpath of your site, e.g. /blog
 url: "https://bytecodealliance.org" # the base hostname & protocol for your site, e.g. http://example.com
 locale: en_US # language_territory is the default
 twitter_username: bytecodeallies

_includes/footer.html

@@ -6,4 +6,4 @@
 </footer>
 <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js" type="text/javascript"
     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-<script src="/js/webflow.js" type="text/javascript"></script>
+<script src="{{ site.baseurl }}/js/webflow.js" type="text/javascript"></script>

_includes/head.html

@@ -2,16 +2,16 @@
     <meta charset="utf-8">
     <title>Bytecode Alliance</title>
     <meta content="width=device-width, initial-scale=1" name="viewport">
-    <link href="/css/normalize.css" rel="stylesheet" type="text/css">
-    <link href="/css/webflow.css" rel="stylesheet" type="text/css">
-    <link href="/css/style.css" rel="stylesheet" type="text/css">
+    <link href="{{ site.baseurl }}/css/normalize.css" rel="stylesheet" type="text/css">
+    <link href="{{ site.baseurl }}/css/webflow.css" rel="stylesheet" type="text/css">
+    <link href="{{ site.baseurl }}/css/style.css" rel="stylesheet" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
     <script
         type="text/javascript">WebFont.load({ google: { families: ["IBM Plex Sans:regular,italic,500,500italic"] } });</script>
     <script
         type="text/javascript">!function (o, c) { var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch") }(window, document);</script>
-    <link href="/images/favicon.png" rel="shortcut icon" type="image/x-icon">
-    <link href="/images/webclip.png" rel="apple-touch-icon">
+    <link href="{{ site.baseurl }}/images/favicon.png" rel="shortcut icon" type="image/x-icon">
+    <link href="{{ site.baseurl }}/images/webclip.png" rel="apple-touch-icon">
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}

_includes/nav.html

@@ -1,26 +1,26 @@
 <nav data-collapse="medium" data-animation="default" data-duration="400" class="nav w-nav">
-    <div class="container w-container"><a href="/" class="brand w-nav-brand w--current"><img
-                src="/images/bytecode-alliance-logo.svg" width="164" alt="Bytecode Alliance logo"></a>
+    <div class="container w-container"><a href="{{ site.baseurl }}/" class="brand w-nav-brand w--current"><img
+                src="{{ site.baseurl }}/images/bytecode-alliance-logo.svg" width="164" alt="Bytecode Alliance logo"></a>
         <nav role="navigation" class="nav--menu w-nav-menu">
-            <a href="/mission" class="nav-link w-nav-link">Mission &amp; Values</a>
-            <a href="/press/formation" class="nav-link w-nav-link">Press Releases</a>
-            <a href="/articles" class="nav-link w-nav-link">Articles</a>
+            <a href="{{ site.baseurl }}/mission" class="nav-link w-nav-link">Mission &amp; Values</a>
+            <a href="{{ site.baseurl }}/press/formation" class="nav-link w-nav-link">Press Releases</a>
+            <a href="{{ site.baseurl }}/articles" class="nav-link w-nav-link">Articles</a>
             <a href="https://github.com/bytecodealliance/" class="github-link w-inline-block"><img
-                    src="/images/github-icon.svg" alt="" class="github"></a></nav>
+                    src="{{ site.baseurl }}/images/github-icon.svg" alt="" class="github"></a></nav>
         <div class="menu-button w-nav-button">
             <div class="w-icon-nav-menu"></div>
         </div>
     </div>
 </nav>
 <nav data-collapse="medium" data-animation="default" data-duration="200" class="nav-mobile w-nav">
-    <div class="container w-container"><a href="/" class="brand w-nav-brand w--current"><img
-        src="/images/bytecode-alliance-logo.svg" width="164" alt="Bytecode Alliance logo"></a>
+    <div class="container w-container"><a href="{{ site.baseurl }}/" class="brand w-nav-brand w--current"><img
+        src="{{ site.baseurl }}/images/bytecode-alliance-logo.svg" width="164" alt="Bytecode Alliance logo"></a>
         <nav role="navigation" class="nav--menu w-nav-menu">
-            <a href="/mission" class="nav-link m-link w-nav-link">Mission &amp; Values</a>
+            <a href="{{ site.baseurl }}/mission" class="nav-link m-link w-nav-link">Mission &amp; Values</a>
             <div class="separate"></div>
-            <a href="/press/formation" class="nav-link m-link w-nav-link">Press Releases</a>
+            <a href="{{ site.baseurl }}/press/formation" class="nav-link m-link w-nav-link">Press Releases</a>
             <div class="separate"></div>
-            <a href="/articles" class="nav-link m-link w-nav-link">Articles</a>
+            <a href="{{ site.baseurl }}/articles" class="nav-link m-link w-nav-link">Articles</a>
             <div class="separate"></div>
             <a href="https://github.com/bytecodealliance/" class="nav-link github w-nav-link">GitHub</a>
             <div class="separate"></div>

_posts/2019-11-21-multi-value-all-the-wasm.md

@@ -181,7 +181,7 @@ And then additionally, when targeting Wasm, we also use a few more moving parts:
 
 Here's a summary of the toolchain's pipeline, showing the inputs and outputs between tools:
 
-<a href="/articles/img/rust-wasm-toolchain.svg"><img src="/articles/img/rust-wasm-toolchain.svg" alt="A diagram showing the pipeline of the Rust and Wasm toolchain." width="1088" height="143" class="alignleft size-full wp-image-34027"  role="img" /></a>
+<a href="{{ site.baseurl }}/articles/img/rust-wasm-toolchain.svg"><img src="{{ site.baseurl }}/articles/img/rust-wasm-toolchain.svg" alt="A diagram showing the pipeline of the Rust and Wasm toolchain." width="1088" height="143" class="alignleft size-full wp-image-34027"  role="img" /></a>
 
 My goal is to unlock interface types with multi-value functions. For now, I haven't been focusing on code size wins from generating multi-value blocks. For my purposes, I only need to introduce multi-value functions at the edges of the Wasm module that talk to interface adapters; I don't need to make all function bodies use the optimal multi-value instruction sequence constructs. Therefore, I decided to have `wasm-bindgen`'s post-processor rewrite certain functions to use multi-value returns, rather than add support in LLVM.<sup id="back-llvm-multi-value">[0](#foot-note-llvm-multi-value)</sup> With this approach I only needed to add support to the following tools:
 
@@ -518,7 +518,7 @@ Ok, so at this point, we can generate multi-value Wasm binaries with the Rust an
 
 Enter [Wasmtime][], the WebAssembly runtime built on top of [the Cranelift code generator][cranelift]. Wasmtime translates WebAssembly into Cranelift's IR with the `cranelift-wasm` crate, and then Cranelift compiles the IR down to native machine code.
 
-<a href="/articles/img/wasmtime-and-cranelift.svg"><img src="/articles/img/wasmtime-and-cranelift.svg" alt="Pipeline from a Wasm binary through Wasmtime and Cranelift to native code" width="887" height="169" class="alignleft size-full wp-image-34026"  role="img" /></a>
+<a href="img/wasmtime-and-cranelift.svg"><img src="img/wasmtime-and-cranelift.svg" alt="Pipeline from a Wasm binary through Wasmtime and Cranelift to native code" width="887" height="169" class="alignleft size-full wp-image-34026"  role="img" /></a>
 
 Implementing multi-value Wasm support in Wasmtime and Cranelift roughly involved two steps:
 

articles/index.md

@@ -7,7 +7,7 @@ layout: article
     <li>
       {% avatar user=post.github_name size=75 %}
       <div>
-        <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
+        <h2><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h2>
         {{ post.excerpt }}
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
         <aside>Posted on {{ post.date | date: date_format }}</aside>