Skip to main content

Use your domain on Mastodon with Astro

Maarten Balliauw shared a cool strategy for using your own custom domain as a reference to your Mastodon account. He explains it better than I can summarize, so take a look at his article first.

I wanted to try it out, but I’d prefer if the process was automated in my site’s build process. Thankfully, Astro has an API for generating arbitrary files on build with endpoints.

In your Astro site, create a new file called src/pages/.well-known/webfinger.ts and paste the following code block

const INSTANCE = "fosstodon.org";
const USERNAME = "seanmcp";

/**
 * This endpoint adds a webfinger JSON file to your site so that you can use
 * your domain as a reference to your Mastodon account.
 */
export async function get() {
  const response = await fetch(
    `https://${INSTANCE}/.well-known/webfinger?resource=acct:${USERNAME}@${INSTANCE}`
  );
  const data = await response.json();
  return { body: JSON.stringify(data, null, 2) };
}

Make sure to swap out the values for your Mastodon instance and username!

When you trigger a build, Astro will run the get() function which grabs the webfinger information from your Mastodon instance and outputs it in the correct /.well-known/webfinger location.

With that in place, you can now use your domain as a reference to your Mastodon account.

Enjoy!



About the author

Sean McPherson is a software engineer for Khan Academy who specializes in web and mobile app development. He lives with his wife, sons, and dog in Pittsburgh, PA.