In the last weeks, I have been moving the Front Matter CMS documentation and APIs to different hosting providers. The documentation and APIs were hosted on Vercel, but they stopped their open-source program, which made me look for alternatives. I decided to move the documentation to Netlify and the APIs to Azure.
The documentation site is generated with Next.js and uses the main and dev branches to deploy the production (frontmatter.codes) and beta (beta.frontmatter.codes) versions.
Branch domains
On Vercel, you can add a domain to a specific git branch.
On Netlify, you can do the same with branch subdomains. This feature allows you to have a subdomain for each branch, and Netlify will deploy the branch to that subdomain.
You must enable the branch deploys feature on Netlify for this to work. You can configure this on the site configuration page, under the branches and deploy contexts section.
importantOne thing to note is that you cannot change the subdomain name. It automatically becomes the name of the branch.
As I was using dev as the branch name, the subdomain becomes dev.frontmatter.codes.
noteA solution to be able to use
beta.frontmatter.codesinstead ofdev.frontmatter.codes, was to rename thedevbranch tobeta. Another option I chose was to use my own DNS provider, Cloudflare, to manage the subdomains.
Manage branch subdomains
In the branch subdomains documentation from Netlify, you can find a link to manage the branch subdomains with your own DNS provider, which made me move back to Cloudflare.
When you want to add your subdomain for a specific branch, ensure it is deployed on Netlify.
Netlify deploys your production branch (defined in the branches and deploy contexts setting) to the https://<project-name>.netlify.app domain. You can find this information on the production domains overview.
The branch deploys are available at https://<branch-name>--<project-name>.netlify.app.
For Front Matter CMS, the URLs are:
- Production:
https://frontmattercms.netlify.app - Beta:
https://beta--frontmattercms.netlify.app(since writing this post, I have changed the branch name fromdevtobetafor consistency)
Once you know your branch URL, you can add a CNAME record to your DNS provider. In Cloudflare, you can add a CNAME record with the following settings:
- Type: CNAME
- Name:
beta - Target:
<branch-name>--<project-name>.netlify.app
tipWhen you use your own DNS provider, you can define your subdomain name instead of using the name of the branch. For the example, I added the
devname and linked it to thebeta--frontmatter cms.netlify.app, which allows me to use thedev.frontmatter.codessubdomain for the beta branch.
Once you have added the CNAME record, wait a few minutes for the DNS to propagate, and you will be able to access your branch subdomain.