all,

How To Host Your Codepen

Phil Phil Mar 15, 2020 · 2 mins read
How To Host Your Codepen
Share this

Codepen is a super useful tool. It’s perfect for quickly dabbling with code online without the faff of an IDE. But, did you know that you can easily deploy and host your code in a couple of steps?

**Here’s how: **

Prerequisite: You’re logged into any type of Codepen account (free or pro).

Step 1: Export your code from Codepen

Once you’ve found a Codepen you’d like to host, navigate to the bottom right hand corner your screen and click Export. You’ll end up with a neat zip of all your files.

Export feature on Codepen

Note: This feature only appears on desktop


Step 2: Upload it to tiiny.host

Head over to https://tiiny.host, enter a subdomain, upload the neat zip you just downloaded from Codepen and click Launch.

Uploading to tiiny.host

And you’re done! Your Codepen is now properly hosted and ready to show off to the world.

Need some more detailed instructions?

Don’t worry, we’ve got you covered. Here’s how to upload your Code:

  1. Head over to Tiiny.Host and you’ll see this screen:

Screenshot of Tiiny Host homepage

  1. Now drag and drop your zip file you exported from Codepen into the area titled “drag and drop zip or single file here”.

Screenshot of Tiiny Host drag and drop upload screen

  1. Type in whatever name you want to appear as your URL for your code and a valid email address.

Close up screenshot of the Tiiny Host upload screen after you've dragged and dropped your file across

  1. Click “Upload” and you’ll see this screen:

Screenshot of the Tiiny Host success message after you've successfully uploaded your file

  1. Verify your email address and your code is now live!

Easily host your Codepen

Codepen’s an awesome tool but nothing beats the feeling of seeing your project out there in the wild. Tiiny Host is the easiest way to host your Codepen and experience the thrill of watching your code run.

Phil
Written by Phil Follow
Hey, I'm Phil. I write about all things web related.