Deployment

Any 2.0 Editor Pen can become a live website on the internet! CodePen makes it extremely fast and easy: just the click of a button.

How Deployment Works

Deploying

To deploy a Pen, open the Deploy Panel and click the Deploy button. Your Pen will be deployed instantly to a random subdomain.

Redeployment

As you work on a Pen, new saves are not automatically deployed to the live website unless you specifically enable the Deploy on Save option. If you leave it off, you can work on things as you please over time without worrying that every change goes live immediately.

To push changes to the live website, open the Deploy Panel and click the Save & Deploy button.

If you want all changes to go to the live website immediately after saving, open the menu and enable the Delploy on Save option.

Undeploying

You can pull down your site at any time by opening the Deploy Panel and clicking Undeploy. Anyone visiting that URL will see a 404 page.

Changing the Subdomain

The given subdomain will remain constant as long as the Pen is deployed. If you undeploy and re-deploy you will be given a new subdomain automatically. You cannot get an older subdomain back that you used before. Any links to the old subdomain will no longer work, so be aware!

Differences Between the Pen Preview and the Deployed Pen

The Pen Preview includes some CodePen-injected code to power the console and Live View. Your deployed Pen will not.
The Pen Preview isn’t available to anonymous users. Deployed Pens are.
A deployed Pen can have a custom domain.

Custom Domains

Deployed Pens can be served by any other domain name that you own. CodePen doesn’t sell domains or help you buy domains. You can buy domains from lots of domain provider companies, like GoDaddy or Porkbun.

After you own the domain, you’ll have access to change the DNS settings, which you’ll need to update to make CodePen hosting work. These are usually editable under ‘DNS’ or ‘DNS Settings’ in your provider’s domain settings. The following are specific instructions for the more common domain providers.

If your provider isn’t on the list above, or you’re still unsure how to update your DNS records, contact your domain provider for assistance.

Subdomains

Subdomains (like subscribe.shoptalkshow.com) are an easy way to host a website on a domain you already own. In fact, just www.website.com is considered a subdomain. To use a subdomain, you update your DNS settings with a CNAME record that points to the URL of your deployed site

Record Type	Host	Value
CNAME	subdomain	{codepen-provided-subdomain}.codepen.app

Here you can see an example Cloudflare DNS dashboard and the CodePen-deployed site being set up to work.

Apex Domains

Apex domains (e.g., “root” or “top-level” domains) are like codepen.io with no subdomain in use. CodePen supports these through DNS providers that allow for top-level CNAME records, ALIAS, or ANAME records.

You only need one of these:

Record Type	Host	Value
ALIAS	@	{codepen-provided-subdomain}.codepen.app
ANAME	@	{codepen-provided-subdomain}.codepen.app
CNAME	@	{codepen-provided-subdomain}.codepen.app

Not all DNS providers support these type of records, but some do. For example, Cloudflare supports CNAME flattening, which means you can add a CNAME to an apex domain and it should “just work”.

For Cloudflare specifically, you may see a warning in the CodePen interface that the DNS isn’t fully set up if you leave the Proxy toggle on. You can safely turn it off to make the warning go away, but it doesn’t matter either way. If the domain works, you can ignore the warning.

Using Cloudflare for DNS can be useful because you can use it regardless of your domain registrar. For instance, some domain registrars, like GoDaddy, do not support DNS settings for apex domains without A records pointing to an IP address, which CodePen does not support. But you could point a domain on GoDaddy to Cloudflare nameservers (even with a free Cloudflare account) to manage DNS there, and set a root level CNAME record there to make it work.

Need A Record Support? CodePen doesn’t offer it right now, but contact support with your use case.

Limitations

Pen Deployment is only a PRO feature
Deployed Pens are limited to 1TB of bandwidth per month each. CodePen does not charge for overages, but sites beyond that limit may be undeployed.

Downgrading

If you downgrade to a free plan on CodePen or delete your account, all your sites will be undeployed. If you upgrade again, you can deploy them again.