diff --git a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md
index 3a25f15b1..497433a8e 100644
--- a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md
+++ b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md
@@ -12,7 +12,7 @@ Because of that, getting started with it can be a little bit confusing at first.
 
 ## 1. Use the REPL
 
-The [Svelte REPL](repl) is the easiest way to begin. You can choose from a list of examples to get you started, and tweak them until they do what you want.
+The [Svelte REPL](/repl) is the easiest way to begin. You can choose from a list of examples to get you started, and tweak them until they do what you want.
 
 <aside><p>You'll need to have <a href="https://nodejs.org/">Node.js</a> installed, and know how to use the terminal</p></aside>
 
diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md
index d56c5312e..97e020af9 100644
--- a/site/content/blog/2019-04-20-write-less-code.md
+++ b/site/content/blog/2019-04-20-write-less-code.md
@@ -159,6 +159,6 @@ In Vue, meanwhile, we have a default export with a `data` function that returns
 
 ## Death to boilerplate
 
-These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
+These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
 
-How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.
+How? By choosing a different set of constraints. Because [Svelte is a compiler](/blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.
diff --git a/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
index 89d71caf3..c372d2a85 100644
--- a/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
+++ b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
@@ -12,13 +12,13 @@ We think you're going to love it.
 
 ## What is Svelte?
 
-Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write *declarative* state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like [virtual DOM diffing](blog/virtual-dom-is-pure-overhead) that eat into your frame budget and tax the garbage collector.
+Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write *declarative* state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like [virtual DOM diffing](/blog/virtual-dom-is-pure-overhead) that eat into your frame budget and tax the garbage collector.
 
 Instead, Svelte runs at *build time*, converting your components into highly efficient *imperative* code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.
 
-The first version of Svelte was all about [testing a hypothesis](blog/frameworks-without-the-framework) — that a purpose-built compiler could generate rock-solid code that delivered a great user experience. The second was a small upgrade that tidied things up a bit.
+The first version of Svelte was all about [testing a hypothesis](/blog/frameworks-without-the-framework) — that a purpose-built compiler could generate rock-solid code that delivered a great user experience. The second was a small upgrade that tidied things up a bit.
 
-Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding *developer* experience. It's now possible to write components with [significantly less boilerplate](blog/write-less-code) than you'll find elsewhere. Try the brand new [tutorial](tutorial) and see what we mean — if you're familiar with other frameworks we think you'll be pleasantly surprised.
+Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding *developer* experience. It's now possible to write components with [significantly less boilerplate](/blog/write-less-code) than you'll find elsewhere. Try the brand new [tutorial](/tutorial) and see what we mean — if you're familiar with other frameworks we think you'll be pleasantly surprised.
 
 To make that possible we first needed to rethink the concept at the heart of modern UI frameworks: reactivity.
 
@@ -94,4 +94,4 @@ We don't take this lightly: hopefully once you've experienced Svelte 3 you'll un
 
 As grueling as this release has been, we're nowhere near finished. We have a ton of ideas for generating smarter, more compact code, and a long feature wish-list. [Sapper](https://sapper.svelte.dev), our Next.js-style app framework, is still in the middle of being updated to use Svelte 3. The [Svelte Native](https://svelte-native.technology/) community project, which allows you to write Android and iOS apps in Svelte, is making solid progress but deserves more complete support from core. We don't yet have the bounty of editor extensions, syntax highlighters, component kits, devtools and so on that other frameworks have, and we should fix that. We *really* want to add first-class TypeScript support.
 
-But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
\ No newline at end of file
+But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](/tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](/chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
diff --git a/site/content/docs/00-introduction.md b/site/content/docs/00-introduction.md
index 2ca82a869..2fece5534 100644
--- a/site/content/docs/00-introduction.md
+++ b/site/content/docs/00-introduction.md
@@ -4,8 +4,8 @@ title: Before we begin
 
 This page contains detailed API reference documentation. It's intended to be a resource for people who already have some familiarity with Svelte.
 
-If that's not you (yet), you may prefer to visit the [interactive tutorial](tutorial) or the [examples](examples) before consulting this reference.
+If that's not you (yet), you may prefer to visit the [interactive tutorial](/tutorial) or the [examples](/examples) before consulting this reference.
 
-Don't be shy about asking for help in the [Discord chatroom](chat).
+Don't be shy about asking for help in the [Discord chatroom](/chat).
 
-Using an older version of Svelte? Have a look at the [v2 docs](https://v2.svelte.dev).
\ No newline at end of file
+Using an older version of Svelte? Have a look at the [v2 docs](https://v2.svelte.dev).
diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index cc2673d94..d1751320c 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -28,7 +28,7 @@ A `<script>` block contains JavaScript that runs when a component instance is cr
 
 ---
 
-Svelte uses the `export` keyword to mark a variable declaration as a *property* or *prop*, which means it becomes accessible to consumers of the component (see the section on [attributes and props](docs#template-syntax-attributes-and-props) for more information).
+Svelte uses the `export` keyword to mark a variable declaration as a *property* or *prop*, which means it becomes accessible to consumers of the component (see the section on [attributes and props](/docs#template-syntax-attributes-and-props) for more information).
 
 ```sv
 <script>
@@ -44,7 +44,7 @@ Svelte uses the `export` keyword to mark a variable declaration as a *property*
 
 You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that whenever a prop is removed by the consumer, its value is set to `undefined` rather than the initial value.
 
-In development mode (see the [compiler options](docs#compile-time-svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
+In development mode (see the [compiler options](/docs#compile-time-svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
 
 ```sv
 <script>
@@ -57,7 +57,7 @@ In development mode (see the [compiler options](docs#compile-time-svelte-compile
 
 If you export a `const`, `class` or `function`, it is readonly from outside the component. Function *expressions* are valid props, however.
 
-Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](docs#template-syntax-element-directives-bind-element).
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-element-directives-bind-element).
 
 ```sv
 <script>
@@ -109,7 +109,7 @@ Update expressions (`count += 1`) and property assignments (`obj.x = y`) have th
 
 ---
 
-Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](tutorial/updating-arrays-and-objects).
+Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](/tutorial/updating-arrays-and-objects).
 
 ```sv
 <script>
@@ -191,7 +191,7 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve
 
 ---
 
-A *store* is an object that allows reactive access to a value via a simple *store contract*. The [`svelte/store` module](docs#run-time-svelte-store) contains minimal store implementations which fulfil this contract.
+A *store* is an object that allows reactive access to a value via a simple *store contract*. The [`svelte/store` module](/docs#run-time-svelte-store) contains minimal store implementations which fulfil this contract.
 
 Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialization and unsubscribe when appropriate.
 
@@ -222,7 +222,7 @@ Local variables (that do not represent store values) must *not* have a `$` prefi
 store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
 ```
 
-You can create your own stores without relying on [`svelte/store`](docs#run-time-svelte-store), by implementing the *store contract*:
+You can create your own stores without relying on [`svelte/store`](/docs#run-time-svelte-store), by implementing the *store contract*:
 
 1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.
 2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.
@@ -241,7 +241,7 @@ You can `export` bindings from this block, and they will become exports of the c
 
 You cannot `export default`, since the default export is the component itself.
 
-> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](docs#run-time-svelte-store).
+> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](/docs#run-time-svelte-store).
 
 ```sv
 <script context="module">
diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index ec257ad34..aeabeb7a5 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -929,7 +929,7 @@ The `transition:` directive indicates a *bidirectional* transition, which means
 {/if}
 ```
 
-> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](docs#run-time-client-side-component-api).
+> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs#run-time-client-side-component-api).
 
 ##### Transition parameters
 
@@ -1022,7 +1022,7 @@ A custom transition function can also return a `tick` function, which is called
 {/if}
 ```
 
-If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](tutorial/deferred-transitions) possible.
+If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible.
 
 
 ##### Transition events
@@ -1148,9 +1148,9 @@ DOMRect {
 
 ---
 
-An animation is triggered when the contents of a [keyed each block](docs#template-syntax-each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an *immediate* child of a keyed each block.
+An animation is triggered when the contents of a [keyed each block](/docs#template-syntax-each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an *immediate* child of a keyed each block.
 
-Animations can be used with Svelte's [built-in animation functions](docs#run-time-svelte-animate) or [custom animation functions](docs#template-syntax-element-directives-animate-fn-custom-animation-functions).
+Animations can be used with Svelte's [built-in animation functions](/docs#run-time-svelte-animate) or [custom animation functions](/docs#template-syntax-element-directives-animate-fn-custom-animation-functions).
 
 ```sv
 <!-- When `list` is reordered the animation will run-->
@@ -1257,7 +1257,7 @@ on:eventname={handler}
 
 ---
 
-Components can emit events using [createEventDispatcher](docs#run-time-svelte-createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
+Components can emit events using [createEventDispatcher](/docs#run-time-svelte-createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
 
 ```sv
 <SomeComponent on:whatever={handler}/>
@@ -1617,7 +1617,7 @@ All except `scrollX` and `scrollY` are readonly.
 
 ---
 
-Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](docs#template-syntax-element-directives-use-action) on the `<body>` element.
+Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs#template-syntax-element-directives-use-action) on the `<body>` element.
 
 `<svelte:body>` also has to appear at the top level of your component.
 
@@ -1644,7 +1644,7 @@ As with `<svelte:window>` and `<svelte:body>`, this element has to appear at the
 
 ```sv
 <svelte:head>
-	<link rel="stylesheet" href="tutorial/dark-theme.css">
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
 </svelte:head>
 ```
 
@@ -1657,7 +1657,7 @@ As with `<svelte:window>` and `<svelte:body>`, this element has to appear at the
 
 ---
 
-The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](docs#compile-time-svelte-compile). The possible options are:
+The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs#compile-time-svelte-compile). The possible options are:
 
 * `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
 * `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
@@ -1672,7 +1672,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
 
 ### `<svelte:fragment>`
 
-The `<svelte:fragment>` element allows you to place content in a [named slot](docs#template-syntax-slot-slot-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+The `<svelte:fragment>` element allows you to place content in a [named slot](/docs#template-syntax-slot-slot-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
 
 ```sv
 <!-- Widget.svelte -->
diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index 457ecd3f0..8c5e15fc9 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -5,7 +5,7 @@ title: Run time
 
 ### `svelte`
 
-The `svelte` package exposes [lifecycle functions](tutorial/onmount) and the [context API](tutorial/context-api).
+The `svelte` package exposes [lifecycle functions](/tutorial/onmount) and the [context API](/tutorial/context-api).
 
 #### `onMount`
 
@@ -20,7 +20,7 @@ onMount(callback: () => () => void)
 
 The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live *inside* the component; it can be called from an external module).
 
-`onMount` does not run inside a [server-side component](docs#run-time-server-side-component-api).
+`onMount` does not run inside a [server-side component](/docs#run-time-server-side-component-api).
 
 ```sv
 <script>
@@ -226,7 +226,7 @@ dispatch: ((name: string, detail?: any) => void) = createEventDispatcher();
 
 ---
 
-Creates an event dispatcher that can be used to dispatch [component events](docs#template-syntax-component-directives-on-component-event). Event dispatchers are functions that can take two arguments: `name` and `detail`.
+Creates an event dispatcher that can be used to dispatch [component events](/docs#template-syntax-component-directives-on-component-event). Event dispatchers are functions that can take two arguments: `name` and `detail`.
 
 Component events created with `createEventDispatcher` create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) and are not cancellable with `event.preventDefault()`. The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data.
 
@@ -256,11 +256,11 @@ Events dispatched from child components can be listened to in their parent. Any
 
 ### `svelte/store`
 
-The `svelte/store` module exports functions for creating [readable](docs#run-time-svelte-store-readable), [writable](docs#run-time-svelte-store-writable) and [derived](docs#run-time-svelte-store-derived) stores.
+The `svelte/store` module exports functions for creating [readable](/docs#run-time-svelte-store-readable), [writable](/docs#run-time-svelte-store-writable) and [derived](/docs#run-time-svelte-store-derived) stores.
 
-Keep in mind that you don't *have* to use these functions to enjoy the [reactive `$store` syntax](docs#component-format-script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](docs#run-time-svelte-store-derived).
+Keep in mind that you don't *have* to use these functions to enjoy the [reactive `$store` syntax](/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs#run-time-svelte-store-derived).
 
-This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract) to see what a correct implementation looks like.
+This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract) to see what a correct implementation looks like.
 
 #### `writable`
 
@@ -446,7 +446,7 @@ Tweened stores update their values over a fixed duration. The following options
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the tween lasts
-* `easing` (`function`, default `t => t`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `t => t`) — an [easing function](/docs#run-time-svelte-easing)
 * `interpolate` (`function`) — see below
 
 `store.set` and `store.update` can accept a second `options` argument that will override the options passed in upon instantiation.
@@ -537,11 +537,11 @@ A `spring` store gradually changes to its target value based on its `stiffness`
 
 ---
 
-As with [`tweened`](docs#run-time-svelte-motion-tweened) stores, `set` and `update` return a Promise that resolves if the spring settles. The `store.stiffness` and `store.damping` properties can be changed while the spring is in motion, and will take immediate effect.
+As with [`tweened`](/docs#run-time-svelte-motion-tweened) stores, `set` and `update` return a Promise that resolves if the spring settles. The `store.stiffness` and `store.damping` properties can be changed while the spring is in motion, and will take immediate effect.
 
 Both `set` and `update` can take a second argument — an object with `hard` or `soft` properties. `{ hard: true }` sets the target value immediately; `{ soft: n }` preserves existing momentum for `n` seconds before settling. `{ soft: true }` is equivalent to `{ soft: 0.5 }`.
 
-[See a full example on the spring tutorial.](tutorial/spring)
+[See a full example on the spring tutorial.](/tutorial/spring)
 
 ```sv
 <script>
@@ -565,7 +565,7 @@ $: $size = big ? 100 : 10;
 
 ### `svelte/transition`
 
-The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](docs#template-syntax-element-directives-transition-fn).
+The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](/docs#template-syntax-element-directives-transition-fn).
 
 #### `fade`
 
@@ -587,9 +587,9 @@ Animates the opacity of an element from 0 to the current opacity for `in` transi
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `linear`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `linear`) — an [easing function](/docs#run-time-svelte-easing)
 
-You can see the `fade` transition in action in the [transition tutorial](tutorial/transition).
+You can see the `fade` transition in action in the [transition tutorial](/tutorial/transition).
 
 ```sv
 <script>
@@ -623,7 +623,7 @@ Animates a `blur` filter alongside an element's opacity.
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicInOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicInOut`) — an [easing function](/docs#run-time-svelte-easing)
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 * `amount` (`number`, default 5) - the size of the blur in pixels
 
@@ -659,12 +659,12 @@ Animates the x and y positions and the opacity of an element. `in` transitions a
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
 * `x` (`number`, default 0) - the x offset to animate out to and in from
 * `y` (`number`, default 0) - the y offset to animate out to and in from
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 
-You can see the `fly` transition in action in the [transition tutorial](tutorial/adding-parameters-to-transitions).
+You can see the `fly` transition in action in the [transition tutorial](/tutorial/adding-parameters-to-transitions).
 
 ```sv
 <script>
@@ -699,7 +699,7 @@ Slides an element in and out.
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
 
 ```sv
 <script>
@@ -734,7 +734,7 @@ Animates the opacity and scale of an element. `in` transitions animate from an e
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
 * `start` (`number`, default 0) - the scale value to animate out to and in from
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 
@@ -772,7 +772,7 @@ Animates the stroke of an SVG element, like a snake in a tube. `in` transitions
 * `delay` (`number`, default 0) — milliseconds before starting
 * `speed` (`number`, default undefined) - the speed of the animation, see below.
 * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicInOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicInOut`) — an [easing function](/docs#run-time-svelte-easing)
 
 The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
 
@@ -799,7 +799,7 @@ The `speed` parameter is a means of setting the duration of the transition relat
 
 #### `crossfade`
 
-The `crossfade` function creates a pair of [transitions](docs#template-syntax-element-directives-transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+The `crossfade` function creates a pair of [transitions](/docs#template-syntax-element-directives-transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
 
 ---
 
@@ -807,8 +807,8 @@ The `crossfade` function creates a pair of [transitions](docs#template-syntax-el
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
-* `fallback` (`function`) — A fallback [transition](docs#template-syntax-element-directives-transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent. 
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
+* `fallback` (`function`) — A fallback [transition](/docs#template-syntax-element-directives-transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent. 
 
 ```sv
 <script>
@@ -831,7 +831,7 @@ The `crossfade` function creates a pair of [transitions](docs#template-syntax-el
 
 ### `svelte/animate`
 
-The `svelte/animate` module exports one function for use with Svelte [animations](docs#template-syntax-element-directives-animate-fn).
+The `svelte/animate` module exports one function for use with Svelte [animations](/docs#template-syntax-element-directives-animate-fn).
 
 #### `flip`
 
@@ -845,7 +845,7 @@ The `flip` function calculates the start and end position of an element and anim
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
 
 
 `duration` can be provided as either:
@@ -855,7 +855,7 @@ The `flip` function calculates the start and end position of an element and anim
 
 ---
 
-You can see a full example on the [animations tutorial](tutorial/animate)
+You can see a full example on the [animations tutorial](/tutorial/animate)
 
 
 ```sv
@@ -879,7 +879,7 @@ You can see a full example on the [animations tutorial](tutorial/animate)
 
 Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
 
-You can explore the various eases using the [ease visualiser](examples#easing) in the [examples section](examples).
+You can explore the various eases using the [ease visualiser](/examples#easing) in the [examples section](/examples).
 
 
 | ease | in | out | inOut |
@@ -961,7 +961,7 @@ Existing children of `target` are left where they are.
 
 ---
 
-The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](docs#compile-time-svelte-compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
+The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs#compile-time-svelte-compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
 
 Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.
 
@@ -1045,7 +1045,7 @@ app.count += 1;
 
 ---
 
-Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](docs#template-syntax-svelte-options).
+Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](/docs#template-syntax-svelte-options).
 
 ```sv
 <svelte:options tag="my-element" />
@@ -1082,7 +1082,7 @@ document.body.innerHTML = `
 
 ---
 
-By default, custom elements are compiled with `accessors: true`, which means that any [props](docs#template-syntax-attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
+By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs#template-syntax-attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
 
 To prevent this, add `accessors={false}` to `<svelte:options>`.
 
@@ -1119,7 +1119,7 @@ Unlike client-side components, server-side components don't have a lifespan afte
 
 A server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.
 
-You can import a Svelte component directly into Node using [`svelte/register`](docs#run-time-svelte-register).
+You can import a Svelte component directly into Node using [`svelte/register`](/docs#run-time-svelte-register).
 
 ```js
 require('svelte/register');
diff --git a/site/content/examples/03-logic/05-await-blocks/App.svelte b/site/content/examples/03-logic/05-await-blocks/App.svelte
index 8c8036c0f..a6d034673 100644
--- a/site/content/examples/03-logic/05-await-blocks/App.svelte
+++ b/site/content/examples/03-logic/05-await-blocks/App.svelte
@@ -2,7 +2,7 @@
 	let promise = getRandomNumber();
 
 	async function getRandomNumber() {
-		const res = await fetch(`tutorial/random-number`);
+		const res = await fetch(`/tutorial/random-number`);
 		const text = await res.text();
 
 		if (res.ok) {
@@ -27,4 +27,4 @@
 	<p>The number is {number}</p>
 {:catch error}
 	<p style="color: red">{error.message}</p>
-{/await}
\ No newline at end of file
+{/await}
diff --git a/site/content/examples/15-composition/02-named-slots/ContactCard.svelte b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
index 87bd392af..106864189 100644
--- a/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
+++ b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
@@ -41,7 +41,7 @@
 		line-height: 1.2;
 	}
 
-	.address { background-image: url(tutorial/icons/map-marker.svg) }
-	.email   { background-image: url(tutorial/icons/email.svg) }
+	.address { background-image: url(/tutorial/icons/map-marker.svg) }
+	.email   { background-image: url(/tutorial/icons/email.svg) }
 	.missing { color: #999 }
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/examples/17-special-elements/00-svelte-self/File.svelte b/site/content/examples/17-special-elements/00-svelte-self/File.svelte
index 8a0048dd6..e769ab484 100644
--- a/site/content/examples/17-special-elements/00-svelte-self/File.svelte
+++ b/site/content/examples/17-special-elements/00-svelte-self/File.svelte
@@ -3,7 +3,7 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
 
 <style>
 	span {
@@ -11,4 +11,4 @@
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
index c65e17798..7e9f667dd 100644
--- a/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
+++ b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
@@ -30,14 +30,14 @@
 <style>
 	span {
 		padding: 0 0 0 1.5em;
-		background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
 	}
 
 	.expanded {
-		background-image: url(tutorial/icons/folder-open.svg);
+		background-image: url(/tutorial/icons/folder-open.svg);
 	}
 
 	ul {
diff --git a/site/content/examples/17-special-elements/04-svelte-body/App.svelte b/site/content/examples/17-special-elements/04-svelte-body/App.svelte
index d3245ab44..fddc8f8d0 100644
--- a/site/content/examples/17-special-elements/04-svelte-body/App.svelte
+++ b/site/content/examples/17-special-elements/04-svelte-body/App.svelte
@@ -14,7 +14,7 @@
 <img
 	class:curious={hereKitty}
 	alt="Kitten wants to know what's going on"
-	src="tutorial/kitten.png"
+	src="/tutorial/kitten.png"
 >
 
 <style>
@@ -34,4 +34,4 @@
 	:global(body) {
 		overflow: hidden;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/examples/17-special-elements/05-svelte-head/App.svelte b/site/content/examples/17-special-elements/05-svelte-head/App.svelte
index 38089c9fd..8323b56ad 100644
--- a/site/content/examples/17-special-elements/05-svelte-head/App.svelte
+++ b/site/content/examples/17-special-elements/05-svelte-head/App.svelte
@@ -1,5 +1,5 @@
 <svelte:head>
-	<link rel="stylesheet" href="tutorial/dark-theme.css">
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
 </svelte:head>
 
-<h1>Hello world!</h1>
\ No newline at end of file
+<h1>Hello world!</h1>
diff --git a/site/content/faq/100-im-new-to-svelte.md b/site/content/faq/100-im-new-to-svelte.md
index 0f1df9cff..cfe5eb8ec 100644
--- a/site/content/faq/100-im-new-to-svelte.md
+++ b/site/content/faq/100-im-new-to-svelte.md
@@ -2,6 +2,6 @@
 question: I'm new to Svelte. Where should I start?
 ---
 
-We think the best way to get started is playing through the interactive [Tutorial](tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
+We think the best way to get started is playing through the interactive [Tutorial](/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
 
-Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
\ No newline at end of file
+Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
diff --git a/site/content/tutorial/01-introduction/01-basics/text.md b/site/content/tutorial/01-introduction/01-basics/text.md
index c0fa2f48a..08ba922b4 100644
--- a/site/content/tutorial/01-introduction/01-basics/text.md
+++ b/site/content/tutorial/01-introduction/01-basics/text.md
@@ -4,7 +4,7 @@ title: Basics
 
 Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily.
 
-You can also consult the [API docs](docs) and the [examples](examples), or — if you're impatient to start hacking on your machine locally — the [60-second quickstart](blog/the-easiest-way-to-get-started).
+You can also consult the [API docs](/docs) and the [examples](/examples), or — if you're impatient to start hacking on your machine locally — the [60-second quickstart](/blog/the-easiest-way-to-get-started).
 
 
 ## What is Svelte?
diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md
index ea387120e..3e1589cd8 100644
--- a/site/content/tutorial/01-introduction/07-making-an-app/text.md
+++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md
@@ -12,9 +12,9 @@ First, you'll need to integrate Svelte with a build tool. There are officially m
 
 ...and a variety of [community-maintained ones](https://sveltesociety.dev/tools).
 
-Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](blog/svelte-for-new-developers), which walks you through the process.
+Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process.
 
-You'll also want to configure your text editor. There are [plugins](https://sveltesociety.dev/tools#editor-support) for many popular editors as well as an official [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If your editor does not have a Svelte plugin then you can follow [this guide](blog/setting-up-your-editor) to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting.
+You'll also want to configure your text editor. There are [plugins](https://sveltesociety.dev/tools#editor-support) for many popular editors as well as an official [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If your editor does not have a Svelte plugin then you can follow [this guide](/blog/setting-up-your-editor) to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting.
 
 Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with `new`:
 
@@ -30,4 +30,4 @@ const app = new App({
 });
 ```
 
-You can then interact with `app` using the [component API](docs#run-time-client-side-component-api) if you need to.
+You can then interact with `app` using the [component API](/docs#run-time-client-side-component-api) if you need to.
diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
index ae2acecf8..c473065f6 100644
--- a/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
+++ b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	async function getRandomNumber() {
-		const res = await fetch(`tutorial/random-number`);
+		const res = await fetch(`/tutorial/random-number`);
 		const text = await res.text();
 
 		if (res.ok) {
diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
index ccb12ba4f..a05bd884d 100644
--- a/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
+++ b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	async function getRandomNumber() {
-		const res = await fetch(`tutorial/random-number`);
+		const res = await fetch(`/tutorial/random-number`);
 		const text = await res.text();
 
 		if (res.ok) {
diff --git a/site/content/tutorial/05-events/05-event-forwarding/text.md b/site/content/tutorial/05-events/05-event-forwarding/text.md
index b65a028f2..514b812ab 100644
--- a/site/content/tutorial/05-events/05-event-forwarding/text.md
+++ b/site/content/tutorial/05-events/05-event-forwarding/text.md
@@ -4,7 +4,7 @@ title: Event forwarding
 
 Unlike DOM events, component events don't *bubble*. If you want to listen to an event on some deeply nested component, the intermediate components must *forward* the event.
 
-In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
+In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
 
 One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
 
diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md b/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md
index 42263e5ec..e607100c5 100644
--- a/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md
+++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md
@@ -4,7 +4,7 @@ title: Select multiple
 
 A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
 
-Returning to our [earlier ice cream example](tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
+Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
 
 ```html
 <h2>Flavours</h2>
diff --git a/site/content/tutorial/06-bindings/12-bind-this/text.md b/site/content/tutorial/06-bindings/12-bind-this/text.md
index 4784b6b13..6602e4de7 100644
--- a/site/content/tutorial/06-bindings/12-bind-this/text.md
+++ b/site/content/tutorial/06-bindings/12-bind-this/text.md
@@ -12,4 +12,4 @@ The readonly `this` binding applies to every element (and component) and allows
 ></canvas>
 ```
 
-Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorial/onmount).
+Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/text.md b/site/content/tutorial/07-lifecycle/01-onmount/text.md
index 54b385e88..f24fce5fc 100644
--- a/site/content/tutorial/07-lifecycle/01-onmount/text.md
+++ b/site/content/tutorial/07-lifecycle/01-onmount/text.md
@@ -4,7 +4,7 @@ title: onMount
 
 Every component has a *lifecycle* that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
 
-The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
+The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](/tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
 
 We'll add an `onMount` handler that loads some data over the network:
 
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/text.md b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
index 27d3251c6..fc7967f65 100644
--- a/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
@@ -13,7 +13,7 @@ const unsubscribe = count.subscribe(value => {
 ```
 > Calling a `subscribe` method returns an `unsubscribe` function.
 
-You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](tutorial/ondestroy):
+You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](/tutorial/ondestroy):
 
 ```html
 <script>
diff --git a/site/content/tutorial/08-stores/04-derived-stores/text.md b/site/content/tutorial/08-stores/04-derived-stores/text.md
index 43af56a08..8c2c3e283 100644
--- a/site/content/tutorial/08-stores/04-derived-stores/text.md
+++ b/site/content/tutorial/08-stores/04-derived-stores/text.md
@@ -11,4 +11,4 @@ export const elapsed = derived(
 );
 ```
 
-> It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](docs#run-time-svelte-store-derived) for more information.
+> It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](/docs#run-time-svelte-store-derived) for more information.
diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
index b9b062302..138d3de3b 100644
--- a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
+++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
@@ -23,7 +23,7 @@ The function takes two arguments — the node to which the transition is applied
 
 * `delay` — milliseconds before the transition begins
 * `duration` — length of the transition in milliseconds
-* `easing` — a `p => t` easing function (see the chapter on [tweening](tutorial/tweened))
+* `easing` — a `p => t` easing function (see the chapter on [tweening](/tutorial/tweened))
 * `css` — a `(t, u) => css` function, where `u === 1 - t`
 * `tick` — a `(t, u) => {...}` function that has some effect on the node
 
diff --git a/site/content/tutorial/11-animations/01-animate/text.md b/site/content/tutorial/11-animations/01-animate/text.md
index 9a1808e25..fc09f39ca 100644
--- a/site/content/tutorial/11-animations/01-animate/text.md
+++ b/site/content/tutorial/11-animations/01-animate/text.md
@@ -2,7 +2,7 @@
 title: The animate directive
 ---
 
-In the [previous chapter](tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
+In the [previous chapter](/tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
 
 To complete the illusion, we also need to apply motion to the elements that *aren't* transitioning. For this, we use the `animate` directive.
 
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
index 4d8ba30e7..af21dbf37 100644
--- a/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
+++ b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
@@ -42,12 +42,12 @@
 	}
 
 	.address {
-		background-image: url(tutorial/icons/map-marker.svg);
+		background-image: url(/tutorial/icons/map-marker.svg);
 	}
 	.email {
-		background-image: url(tutorial/icons/email.svg);
+		background-image: url(/tutorial/icons/email.svg);
 	}
 	.missing {
 		color: #999;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
index 0348b70c5..6f07d2aec 100644
--- a/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
+++ b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
@@ -42,12 +42,12 @@
 	}
 
 	.address {
-		background-image: url(tutorial/icons/map-marker.svg);
+		background-image: url(/tutorial/icons/map-marker.svg);
 	}
 	.email {
-		background-image: url(tutorial/icons/email.svg);
+		background-image: url(/tutorial/icons/email.svg);
 	}
 	.missing {
 		color: #999;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md
index dc5f2d7e8..53695b7d6 100644
--- a/site/content/tutorial/15-context/01-context-api/text.md
+++ b/site/content/tutorial/15-context/01-context-api/text.md
@@ -19,7 +19,7 @@ setContext(key, {
 });
 ```
 
-The context object can be anything you like. Like [lifecycle functions](tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
+The context object can be anything you like. Like [lifecycle functions](/tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
 
 On the other side of the equation, in `MapMarker.svelte`, we can now get a reference to the Mapbox instance:
 
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
index 8a0048dd6..e769ab484 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
@@ -3,7 +3,7 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
 
 <style>
 	span {
@@ -11,4 +11,4 @@
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
index 1108b3575..e93ffdc54 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
@@ -29,14 +29,14 @@
 <style>
 	span {
 		padding: 0 0 0 1.5em;
-		background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
 	}
 
 	.expanded {
-		background-image: url(tutorial/icons/folder-open.svg);
+		background-image: url(/tutorial/icons/folder-open.svg);
 	}
 
 	ul {
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
index 8a0048dd6..e769ab484 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
@@ -3,7 +3,7 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
 
 <style>
 	span {
@@ -11,4 +11,4 @@
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
index 11049c2e5..d3fc3a431 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
@@ -29,14 +29,14 @@
 <style>
 	span {
 		padding: 0 0 0 1.5em;
-		background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
 	}
 
 	.expanded {
-		background-image: url(tutorial/icons/folder-open.svg);
+		background-image: url(/tutorial/icons/folder-open.svg);
 	}
 
 	ul {
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/text.md b/site/content/tutorial/16-special-elements/03-svelte-window/text.md
index 3c6c71a73..ea01dd3bd 100644
--- a/site/content/tutorial/16-special-elements/03-svelte-window/text.md
+++ b/site/content/tutorial/16-special-elements/03-svelte-window/text.md
@@ -10,4 +10,4 @@ On line 11, add the `keydown` listener:
 <svelte:window on:keydown={handleKeydown}/>
 ```
 
-> As with DOM elements, you can add [event modifiers](tutorial/event-modifiers) like `preventDefault`.
+> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`.
diff --git a/site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte b/site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte
index d9505bb0c..e74bcc6a4 100644
--- a/site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte
@@ -11,7 +11,7 @@
 <img
 	class:curious={hereKitty}
 	alt="Kitten wants to know what's going on"
-	src="tutorial/kitten.png"
+	src="/tutorial/kitten.png"
 >
 
 <style>
diff --git a/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte b/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte
index 238da2ab1..fddc8f8d0 100644
--- a/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte
@@ -14,7 +14,7 @@
 <img
 	class:curious={hereKitty}
 	alt="Kitten wants to know what's going on"
-	src="tutorial/kitten.png"
+	src="/tutorial/kitten.png"
 >
 
 <style>
diff --git a/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte b/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte
index 38089c9fd..8323b56ad 100644
--- a/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte
@@ -1,5 +1,5 @@
 <svelte:head>
-	<link rel="stylesheet" href="tutorial/dark-theme.css">
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
 </svelte:head>
 
-<h1>Hello world!</h1>
\ No newline at end of file
+<h1>Hello world!</h1>
diff --git a/site/content/tutorial/16-special-elements/06-svelte-head/text.md b/site/content/tutorial/16-special-elements/06-svelte-head/text.md
index 22dcc7fda..a7876b9cb 100644
--- a/site/content/tutorial/16-special-elements/06-svelte-head/text.md
+++ b/site/content/tutorial/16-special-elements/06-svelte-head/text.md
@@ -6,7 +6,7 @@ The `<svelte:head>` element allows you to insert elements inside the `<head>` of
 
 ```html
 <svelte:head>
-	<link rel="stylesheet" href="tutorial/dark-theme.css">
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
 </svelte:head>
 ```
 
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/text.md b/site/content/tutorial/16-special-elements/07-svelte-options/text.md
index c3f9f50ce..1a0105a09 100644
--- a/site/content/tutorial/16-special-elements/07-svelte-options/text.md
+++ b/site/content/tutorial/16-special-elements/07-svelte-options/text.md
@@ -27,4 +27,4 @@ The options that can be set here are:
 * `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
 * `tag="..."` — the name to use when compiling this component as a custom element
 
-Consult the [API reference](docs) for more information on these options.
+Consult the [API reference](/docs) for more information on these options.
diff --git a/site/content/tutorial/19-next-steps/01-congratulations/text.md b/site/content/tutorial/19-next-steps/01-congratulations/text.md
index 558cf6bda..6905d80c2 100644
--- a/site/content/tutorial/19-next-steps/01-congratulations/text.md
+++ b/site/content/tutorial/19-next-steps/01-congratulations/text.md
@@ -2,10 +2,10 @@
 title: Congratulations!
 ---
 
-You've now finished the Svelte tutorial and are ready to start building apps. You can refer back to individual chapters at any time (click the title above to reveal a dropdown) or continue your learning via the [API reference](docs), [Examples](examples) and [Blog](blog). If you're a Twitter user, you can get updates via [@sveltejs](https://twitter.com/sveltejs).
+You've now finished the Svelte tutorial and are ready to start building apps. You can refer back to individual chapters at any time (click the title above to reveal a dropdown) or continue your learning via the [API reference](/docs), [Examples](/examples) and [Blog](/blog). If you're a Twitter user, you can get updates via [@sveltejs](https://twitter.com/sveltejs).
 
-To get set up in your local development environment, check out [the quickstart guide](blog/the-easiest-way-to-get-started).
+To get set up in your local development environment, check out [the quickstart guide](/blog/the-easiest-way-to-get-started).
 
 If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at [SvelteKit](https://kit.svelte.dev).
 
-Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
+Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](/chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.