Baseurl
Base elementStandard HTML has a base element that is prepended to all relative URLs and can be used to serve your site from a subfolder (e.g. mysite.com/my-subfolder/
), which is common on platforms like GitLab Pages.
In your sitewide plenti.json
configuration file, you can specify a baseurl
like this:
"baseurl": "/my-subfolder/"
}
This information gets added to a magic variable called env, along with a boolean called local
which lets you serve the site like normal when you're developing it and still use a baseurl on the deployed version. In order to do that, in your <head>
element, do something like this:
export let env;
</script>
<head>
<base href="{ env.local ? '/' : env.baseurl }">
</head>
(Note: make sure to first pass env
from the parent component, likely layouts/global/html.svelte
)
Now that your site is configured to use baseurls, you need to make sure you're actually using relative links (about
), not root relative links (/about
) or absolute links (mysite/about
). You'll also want to update all links back to your homepage to use a dot .
instead of a forward slash /
in order to work with the base element correctly when deployed.