Sue Smith for Glitch

Posted on Dec 3

Verify your Bluesky or Mastodon account on your own domain, with a free website!

#webdev #dns #socialmedia #beginners

Setting up your own domain for a website and social media is easier than you might think! I love domains, I have a few pointing at Glitch sites and in my social profiles. In this post I'm going to run through setting up another website and domain, and add it to Bluesky as a handle for a new account, and Mastodon as a verified link.

Grab a Glitch remix

We're going to make a website in a few minutes:

Remix ~my-social-website!

Sign up for a Glitch account if you don't already have one or the project will only last a few days.

The project will open in the Glitch editor.

Click Preview at the bottom and Open preview pane.
That's your new website! It's already on the web at your-project-name.glitch.me – you'll find the link above the preview.

You can make changes now or later, but personalizing the site literally takes minutes.

Open index.html to change the content of the page.

Edit the heading in the h1 element.
Add text to display in the page like the <p> content.
Add other content like images and links – check out the tips in the HTML..!
Change the site style in style.css.

If you like you can change your Glitch project name in Settings > Edit project details which will change your site address on Glitch.

You can keep going in your Glitch project or come back to it later – it's a lot of fun!

Get a domain

Here's the thing, you could just use your .glitch.me website address as your handle and verified link on both Bluesky and Mastodon, but it's much better to have your own domain and is easier than most people think.

Use Domainr to find a domain by searching for keywords like your name or a project you're working on.
When you find a domain that you like, click it to see the available registrars. Check a few to find out the prices they're offering – you can get domains for a few dollars a year.
You can go ahead and buy the domain from here, or if you already have a preferred registrar, just search the domain on their site and buy it there (I find myself using Porkbun a lot because I like the experience even though I am a vegetarian lolol).

Once you have your domain, your registrar will provide access to the DNS records for managing it. You'll need these to point the domain at your Glitch website.

Point your domain at your site

Now you have a domain you can use to send people to your content on the web and to verify your identity on social platforms. To point it at your Glitch site you'll also need TLS to keep it secure. We're going to use Fastly to get this for free – we go over these steps in a lot more detail in this other tutorial, below is the TL;DR version.

Set up a Fastly service

Sign up for a free Fastly developer account (that's right, you're a developer now whether you knew it or not 🚀).
In your new account, click Create service and choose CDN.
Enter any Name you like.
Enter your new domain, with www. at the start, like www.sue.wtf.
For your Origin > Host enter your Glitch website address – grab it from the Glitch editor by clicking the three dots above your preview and copying it. It should look something like this (no https or slashes): suewtf.glitch.me
Click Activate!

Get a free TLS certificate

Now let's grab a TLS certificate for the domain:

In Security choose TLS Management then click Manage certificates and Get started to secure your domain.
Enter the www version of your domain and click Add.
Leave Certainly selected.
Submit your new certificate.

Fastly will provide the details to verify that you own the domain – click Verification options.

Copy the ACME DNS challenge CNAME – it will be _acme-challenge followed by your domain name.
In the account where you bought your domain, navigate to your DNS settings. Add a new record, with CNAME as the type, and the value you copied from Fastly as the Host (usually the first text entry).
Back in Fastly, grab the verification address by clicking the little clipboard – it'll be some letters followed by fastly-validations.com.
In your DNS, add the value you copied as the second text entry in your new record (usually called address, data, or content).
Save your new record.

It'll look a little different depending on your registrar, but here's an example in Squarespace:

Back in Fastly, your domain should soon pass verification, then your certificate will be issued within a few minutes.

Point your DNS at your service

OK now it's time to point the domain at your site through Fastly.

In Fastly, browse to Security > Domains and find your certificate. Under TLS configuration and DNS details click View / Edit.
Copy the CNAME record address which will end .sni.global.fastly.net.
Back in your DNS account, add another new record, CNAME again, this time with the www version of your domain, and the sni text you just copied as the value.
Save your new record.

It may take a while to update but with any luck (usually within an hour) you'll be able to visit your domain and land on your new Glitch website.

💡 I usually set my DNS to redirect the apex version of my domain (the one without a subdomain) to the www version – steps vary by registrar but it's usually pretty straightforward.

Use your domain for your social profiles

I'm going to use my new domain as a handle on a Bluesky account and a verified link on my Mastodon account. Luckily the Glitch remix already has some of this set up for me.

Bluesky

Let's do Bluesky first (you'll need to set up an account with a default handle before you can switch to using your own domain):

In your Bluesky account, choose Settings > Account > Handle.
Click I have my own domain.
Enter your domain, like www.sue.wtf.
You can set it up by adding another DNS record with the values in the popup, or you can set it up inside your Glitch project as follows:
- Choose No DNS panel.
- Copy the did value.
- In your Glitch project, create a new file by clicking the + icon on the left above the filetree and entering .well-known/atproto-did.
- Paste the value from Bluesky into this new file.

Bluesky will verify your domain and update it as your new handle.

More detailed guide to using your own domain in the Bluesky docs

💡 Remember to update the link to your Bluesky profile in your Glitch project HTML!

Mastodon

Now for Mastodon, we'll use the domain to add a verified link to our profile:

In your Glitch project, update the link to Mastodon near the end of index.html to your own Mastodon profile.
The link already has rel="me" in it – you need this to verify it on Mastodon.

In your Mastodon account, edit your profile, adding a link to your new domain that you have pointed at your Glitch site. It should verify fairly quickly!