Any Pen can become a live website on the internet. CodePen makes that as easy and fast as possible.
⚠️ This feature is in development and not yet live. The public launch will likely have feature parity with Projects Deployment.
How Deployment Works
Deploying
To deploy a Pen, open the Deploy Panel and click the Deploy button. Your Pen will be instantly deployed at a random subdomain. This subdomain is not changable.
Redeployment
As you work on a Pen making saves, those new saves are not automatically deployed to the live website unless you specifically enable the Deploy on Save option. If you leave it off, it allows you to work on things as you please over time without worrying that every change is immediately live. In order to push changes to the live website, you open the Deploy Panel and click the Redeploy button.
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.
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.
Differences Between the Pen Preview and the Deployed Pen
- The Pen Preview has a bit of CodePen-injected code in it to do things like power the console and Live View. Your deployed Pen will not.
- The Pen Preview isn’t available to anonymous users like a deployed Pen is.
- 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 DNS information, which is what CodePen needs you to do to host the site.
All custom domains pointing to a deployed Pen will need to use the following A records.
| Record Type | Host | Value |
|---|---|---|
| A | (your domain name) | 52.40.196.217 |
| A | (your domain name) | 52.10.184.195 |
You’ll need to update these records via your domain provider. If there is any existing A records, you should also remove those. 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 in the list above or you’re still not sure how to update your A records, contact your domain provider to get assistance.
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 are subject to being undeployed.