Baseurl
Base element
Standard 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.Implementation
In your sitewideplenti.json
configuration file, you can specify a baseurl
like this:"baseurl": "/my-subfolder/"
}
The local webserver (
plenti serve
) will serve the root of your site from that subfolder: http://localhost:3000/my-subfolder/.The baseurl information gets added to a magic variable called env that you can add to the
<head>
element like this:export let env;
</script>
<head>
<base href="{env.baseurl}">
</head>
(Note: make sure to first pass
env
from the parent component, likely layouts/global/html.svelte
)Usage
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 (https://mysite.com/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.