How to Deploy a Static Site to the Web
A popular feature that we've been asked for is to show you how you can deploy and share your front end applications with others.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Now, if you go through the full boot camp course, then we'll show you how to have a entire deployment strategy and how to set up servers and different things like that. But in this video, what I want to show you how to do is to quickly deploy a static website.

So a static website is a website that doesn't connect to a back end, it's what we built out. It has HTML, CSS, can have some level of Javascript and it's something that users can go see, so you can send this link to your friends, family or anyone like that. We are going to use a service called Netlify, and so we're going to walk through the signup process and I'm going to show you how easy it is to get your website live on their servers and it's also completely free.

Now, if you were to want to use this for a production kind of application, then they have some really good ways of doing that. But for what we're going to use it for, this is just so that you can see that you can get your website live.

So click, sign up, up here and then you can sign up with any of these options.

large

I'm just going to go with email and I have an account with them, but I'm going to use a different email. So say digitalliteracy@devcamp.com and you just type in obviously any email address that you have, make sure that it is a valid one though because if it's not then you won't be able to upload your site because you need to confirm your email. So type in your email and a password, click sign up and then that is going to send you an email and you can verify those.

I'm not going to save these because I'm going to get rid of this account whenever we've finished this video. So click on your email and I will switch over to this screen here and I'm going to click on that email just to verify it and then I'm going to log in back on this screen.

So that was digital literacy and now when you log in, you'll have a few instructions, you can save the password if you're going to use this more, you can walk through this full tutorial, but really it's pretty basic for what we're going to be doing.

So there are a few options. One, if you're familiar with how to use tools like GitHub or anything like that, then you can connect your GitHub account in your projects there directly to this account. But if you're not familiar with GitHub, you can simply drag your project folder right here.

large

And so that is what we're going to do. I'm going to switch to my finder and then go find the project. So I'm going to go into my code directory. Yours is going to be in whatever directory you have your whole project located in. And also you may notice I'm doing this on a Mac instead of using a virtual machine or windows.

And the reason for that is because I want to show you that you can do this process with any operating system. So if you click on code there, I'm going to click on code. I have a project called digital literacy and I have the HTML CSS project right there.

large

Now the way to do this is you can see here it says, do you want to deploy a new site without connecting to Git, drag and drop your site folder here. Now that is very key, so you do not want to open up the directory and try to drag all of these files in. You want to take the entire project, click and drag it.

Now one other thing before you do it, make sure that you have your homepage named as index.html. The Netlify system is going to be looking for a index.html file, and if you don't have one in there, it is not going to work. So if you simply click and drag that, it is now going to upload and that is literally it.

large

Our site is now live with Netlify, and you can test it out because you can see that we have this little URL here.

large

If you click on that, you can see we have our full website and it is looking really nice and now it's on a live site so I could come here, copy this link in the URL, send it to friends, family, clients, put it on a portfolio, or anything like that and now it is live on the web.

So great job if you went through that, you now know how to deploy a HTML CSS website to the web.