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

Question

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?

score 3 · Accepted Answer · answered Nov 11 '22 at 05:41

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`} />

1 Answers1