---
title: "Deploy from CodePen to Netlify in less than 30 seconds"
description: "Want to get your CodePen work deployed onto Netlify? Here"
source: "https://www.netlify.com/blog/2020/12/12/deploy-from-codepen-to-netlify-in-less-than-30-seconds/"
last_updated: "2026-07-09T21:08:56.000Z"
---
Welcome to Blogvent, day 12!

[CodePen](https://codepen.io/) is one of our favorite places to experiment, prototype, and build fun web projects. Deploying a Pen to Netlify is super speedy, and a great way to get your projects live on your own domains for all to see!

It took longer to write this blog post than it took to take a Pen and deploy it to Netlify. It was so fast, in fact, that we recorded it:

First, export your Pen to a ZIP file. Then, go to [netlify.com/drop](https://app.netlify.com/drop?utm_source=blog&utm_medium=codependrop-cs&utm_campaign=devex), then drag the `dist` folder from your exported Pen onto the page, and click the resulting new website. Done!

That’s right, in less than 30 seconds, a Pen on Netlify. Woo!

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=Deploy from CodePen to Netlify in less than 30 seconds&url=https://www.netlify.com/blog/2020/12/12/deploy-from-codepen-to-netlify-in-less-than-30-seconds//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F12%2Fdeploy-from-codepen-to-netlify-in-less-than-30-seconds%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/12/deploy-from-codepen-to-netlify-in-less-than-30-seconds//)
-   [Bluesky](https://bsky.app/intent/compose?text=Deploy from CodePen to Netlify in less than 30 seconds+https://www.netlify.com/blog/2020/12/12/deploy-from-codepen-to-netlify-in-less-than-30-seconds//)

* * *

### Tags

-   [blogvent](/blog/tags/blogvent/)

## Keep reading

![](/images/blog-fallback-thumbnail.svg)

News & Announcements August 14, 2018

[

### Announcing Netlify Drop - The simplicity of BitBalloon, with the added power of Netlify

](/blog/2018/08/14/announcing-netlify-drop-the-simplicity-of-bitballoon-with-the-added-power-of-netlify/)

-   ![Profile picture of Phil Hawksworth](/_astro/9cfe2bbe94bcb555ce3ac7683ac7905ad3fd32b1-400x400_Z18H6R1.webp)
    
    Phil Hawksworth
    

![](/_astro/3f45eb6eda4ea8814be310e3df4a7883a5bd9ba0-1200x675_ZcBDUS.webp)

Guides & Tutorials May 15, 2026

[

### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)

](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)

-   ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp)
    
    Nahrin Jalal
    

## Recent posts

News & Announcements June 25, 2026

[

### Netlify Functions, designed for Agent Experience

](/blog/netlify-functions-designed-for-agent-experience)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

News & Announcements June 24, 2026

[

### How we measure Netlify’s Agent Experience

](/blog/how-we-measure-netlify-agent-experience)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

Guides & Tutorials May 15, 2026

[

### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)

](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)

-   ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp)
    
    Nahrin Jalal
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)