How to publish a Framer website to your own domain name (without xxx.framer.app)
Aug 23, 2023
Here's how you can publish a website using Framer's hosting services and also set up a custom domain for your website.
Step 1: Finalise Your Design
Before proceeding, make sure your website's design, interactions, and content are finalized within Framer. Test your website to ensure everything works as intended, especially across different screen sizes. But, even if it’s not, it’s super easy to make and push updates anyway.
Step 2: Publish Your Website
When you’re ready for the world, within the Framer interface, look for "Publish" on the top right hand corner.
Click on the "Publish" button in Framer.
Framer will compile your website and host it on their servers.
You'll likely receive a default URL for your published site (e.g., "something-funny-4895845.framer.app").
Step 3: Choose a Better Name for Your Subdomain
If you click on Custom Domain, you’ll be able to choose a better subdomain than the random one Framer assigns to you. This is still free!
Step 4: Obtain a Custom Domain
If you wish to use a custom domain (e.g., "www.yourdomain.com") for your Framer-hosted website, you'll need to purchase a domain from a domain registrar like GoDaddy, Namecheap, or Google Domains AS WELL AS upgrade to a paid plan on Framer.
I’ve been using Namecheap for the past few years and can definitely recommend them. Sign up for namecheap and use their search to find a domain that you like. Then, simply buy that domain. Voila, it’s yours! Your slice of the internet. There are many domain suffixes such as .com, .co, .so, .org. Some of the suffixes belong to different countries and you may need special conditions to buy them, but for the most part, most domains can be bought.
Step 5: Configure Domain Settings
Don’t get scared yet! We’re almost there!
Once you have your custom domain, follow these general steps to set it up with your Framer-hosted website.
Log in to your domain registrar's account and find the domain settings or management section. On namecheap, navigate to domain list, and then on the right hand side you will a “Manage” button.
Look for options related to DNS (Domain Name System) or DNS Management or in the case of Namecheap, Advanced DNS.
Now, here, follow the instructions from Framer on how to change your nameservers. You will need to add two A records and one CNAME Record. Under Host Records, simply click Add New, scroll to A record. Under host, type @ and under Value, use the value that Framer provided for you when you clicked Use Custom Domain! You can re-navigate here by going to the Framer icon on the top left > Site settings > Domains.
From Framer
to your domain registrar.
Save your changes.
Step 6: Verify Domain Configuration
It might take some time for the DNS changes to propagate across the internet. After a few hours or up to 48 hours, visit your custom domain (e.g., "www.yourdomain.com") in a web browser. Your Framer-hosted website should now be accessible through your custom domain. Yahoo!
Step 7: Maintain and Update
As you make updates to your Framer project, these changes should automatically reflect on your custom domain as long as the hosting settings remain the same. Always test and verify updates on your custom domain.
Please note that specific domain registrars may have slightly different interfaces for DNS management. If you encounter any challenges during the domain setup process, consult your domain registrar's support documentation or reach out to their customer support for assistance. Also, remember that Framer's hosting capabilities and settings can change over time, so it's recommended to refer to their official documentation or resources for the most up-to-date information on hosting and domain customization. Happy publishing <3
