Search code examples
configastrojs

How can I access the the Astro config values in a page?

I have an Astro project with an astro.config.mjs configured with a site value.

export default defineConfig({
  site: 'https://example.com',
  // ...etc
})

In my layout, I have <meta> tags that have the same URL hard coded in them.

<meta property="og:url" content="https://example.com" />
<meta property="og:image" content="https://example.com/social.png" />

I would like to be able to access the site config value to replace all the hard coded URLs.

<meta property="og:url" content={config.site} />
<meta property="og:image" content={`${config.site}/social.png`} />

How can I access the config values from within a page?

Solution

  • The site can be accessed on the Astro.site global. This is documented here. The Astro.site value is a URL object.

    To use it in your frontmatter.

    const origin = Astro.site.origin

    To get a string of the full URL.

    const site = Astro.site.href
// or
const site = Astro.site.toString()

    To use it directly in your HTML.

    <meta property="og:url" content={Astro.site} />
<meta property="og:image" content={`${Astro.site}social.png`} />