The easiest way to make your Project available via HTTPS on its custom domain is with Cloudflare, which has a free tier that provides HTTPS. Cloudflare provides all sorts of performance and protection benefits, so it’s a good idea anyway, and you get the HTTPS for free.
Clouldflare will walk you through adding a site to the service, part of which is DNS related.
Cloudflare requires you to change your nameservers to point to them. Meaning that the DNS records are then handled on the Cloudflare side. When you’re setting up the site in Cloudflare, you’ll need to make sure those A records point to the CodePen IP Addresses 220.127.116.11 and 18.104.22.168. In other words:
- Point your domains DNS at Cloudflare
- Point Cloudflare at CodePen
You can keep the SSL/TLS encryption mode at Full for full security.
You may also want to force HTTPS, since that’s the most secure and that’s how you have to develop on CodePen anyway.
Once you’ve got the site all set up in Cloudflare and the DNS changes have propagated (this may take up to one day), you’ll be able to view your site in HTTPS.
It’s up to you to only use secure resources to keep that “Secure” icon all locked up!
- If you’re using Amazon’s Route53, you’ll need to change your NS records in the hosted zone and at the domain level.