How to work with links in my pages when my site is deployed with different base urls?
#Working with links with different base url sites
fathom hamlet
pastel elkBOT
Hi @fathom hamlet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro provides a base configuration option that you can use to set the base path for your site. This is particularly useful when your site is deployed at a subpath rather than the root of a domain. For example, if your site is deployed at <https://example.com/my-site,> you can set the base option to /my-site.
Here's how you can set it in your astro.config.mjs:
import { defineConfig } from 'astro/config'
export default defineConfig({ base: '/my-site',})
When you set the base option, all of your internal page links must be prefixed with your base value. For example:
<a href="/my-site/about">About</a>
You can also access the base URL in your scripts using import.meta.env.BASE_URL.
console.log(import.meta.env.BASE_URL); // Outputs: "/my-site"
Remember, the base option is meant for publishing to subpaths, i.e., example.com/blog. If your page is served from the root folder, you don't need to set a base parameter.
Please note that the value of import.meta.env.BASE_URL and config.base will be determined by your trailingSlash config, no matter what value you have set for base.