{"id":2018,"date":"2024-05-17T07:57:33","date_gmt":"2024-05-17T13:57:33","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2018"},"modified":"2025-06-01T10:13:25","modified_gmt":"2025-06-01T15:13:25","slug":"exactly-how-to-deploy-local-files-to-make-a-live-website","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/exactly-how-to-deploy-local-files-to-make-a-live-website\/","title":{"rendered":"Exactly How to Deploy Local Files to Make a Live Website"},"content":{"rendered":"\n

This post addresses a common question we get from the community: <\/p>\n\n\n\n

\n

What’s the simplest way to deploy a website so I can share it with other people?<\/p>\n<\/blockquote>\n\n\n\n

Cutting to the chase:<\/p>\n\n\n\n

    \n
  1. Sign up for Netlify<\/li>\n\n\n\n
  2. Go to Drop<\/li>\n\n\n\n
  3. Drop the folder of files there<\/li>\n\n\n\n
  4. Done<\/li>\n<\/ol>\n\n\n\n

    I’ll walk you through all this below, I just wanted to be clear about what we’re doing. We’re trying to go from playing around with code on your local computer to deploying a real website! The requirements are that the process is straightforward (dare I say: “easy”) and the service has a free tier. The goal with this article is to give you direct steps, not confuse the issue with too many considerations and options.<\/p>\n\n\n\n

    Now let’s get into more detail.<\/p>\n\n\n

    \n
    \n

    Article Series<\/h3>\n <\/header>\n
    \n
      \n
    1. \n Exactly How to Deploy Local Files to Make a Live Website<\/a>\n <\/li>\n
    2. \n The Simplest Way to Deploy Your Own Updatable Portfolio Site<\/a>\n <\/li>\n
    3. \n Deploy a Site with a Build Process & a Custom Domain Name<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

      You’ve got some files that make a website.<\/p>\n\n\n\n

      \n
      \n

      Maybe those files are:<\/p>\n\n\n\n

      index.html
      style.css
      script.js<\/pre>\n<\/div>\n\n\n\n
      \n
      Or maybe they are like this:<\/p>\n\n\n\n
      images\/
        logo.png
        hero.png
        background.jpg
      index.html
      about.html
      contact.html
      style.css<\/pre>\n<\/div>\n<\/div>\n\n\n\n
      We’ll call them (and you might hear them being referred to as) “static files”. These files exist on your computer<\/em>. Maybe you created them yourself or you exported a Pen from CodePen. You can look at them in a web browser and it looks<\/em> like a website.<\/p>\n\n\n
      \n
      \"\"
      The example website we’ll use here is the wonderful Personal Portfolio Page from Tiffany Du<\/a>. The file:\/\/<\/code> URL above will work on my computer, but not yours!<\/figcaption><\/figure>\n<\/div>\n\n\n
      Now you want it to be a real<\/em> website on the real <\/em>internet. <\/p>\n\n\n\n
      Good on ya. This is a powerful<\/strong> moment. Your creation is about to be viewable by anyone in the world. Rather than complicate things with options, let’s look at one<\/em> option that will get the job done.<\/strong> Then we’ll talk about where to go from there.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      1) Sign up for Netlify<\/h2>\n\n\n\n
      This is not an ad for Netlify. We have no affiliation. Sign up here.<\/a> <\/p>\n\n\n\n
      There are other options, and we’ll cover those later. We’re picking a path forward and going for it. Truth be told, Netlify is a good host particularly for static files like this and has a generous free starter plan. You can grow with Netlify as they ultimately handle any amount of traffic and have lots of advanced features as you need them.<\/p>\n\n\n\n
      2) Find the Folder of Files on your Computer<\/h2>\n\n\n\n
      The folder<\/em> is key here. You want to be able to select the folder that contains that initial index.html<\/code> file that is the home page of your site. <\/p>\n\n\n\n
      Here’s mine, just sitting on my Desktop. <\/p>\n\n\n
      \n
      \"\"<\/figure>\n<\/div>\n\n\n
      It could be anywhere on your computer, depending on where you created it or downloaded it. You just need to be able to find it for the next step. It doesn’t matter if you’re using macOS, Windows, or Linux, you’ll be able to find and select the folder somewhere.<\/p>\n\n\n\n
      If you’ve exported from CodePen…<\/summary>\n
      You’ll get a .zip<\/code> file that you can double-click to “extract” into a folder. Inside that<\/em> folder you’ll see a dist<\/code> folder, src<\/code> folder, and some other files. It’s the dist<\/code> folder that you’ll use for the next step here. <\/strong><\/p>\n<\/details>\n\n\n\n
      3) Go to Netlify Drop<\/h2>\n\n\n\n
      Be logged in to Netlify and go here: https:\/\/app.netlify.com\/drop<\/a><\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      You can use this Drop app while logged out, but the resulting site is password-protected and only stays online for 1 hour. Being logged in will remove those restrictions, and unlock more options you’re very likely to want afterward, like customizing the URL. <\/p>\n\n\n\n
      4) Drop the Folder into the Drop Zone<\/h2>\n\n\n\n
      Just like this:<\/p>\n\n\n\n\t\t
      \n\t\t\t