Deploy a Static Site in 3 Steps 👆🏼✌🏼🤟🏼
Tags: beginners, showdev, explainlikeimfive, server
Published: 2019-04-04 12:38:32

---
title: Deploy a Static Site in 3 Steps 👆🏼✌🏼🤟🏼
published: true
description: Fastest way to deploy static website ever.
tags: beginners, showdev, explainlikeimfive, server
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rcb6doq1mme2g88vdnzr.png
---

So you just made your first static website. Awesome! Now you are ready to share that with your friends and the world. But you are stuck reading those long articles about deploying your website on servers, or just installing software like FileZilla etc.

Stop that. There's an easier way to do this. I have a simple tutorial for all my beginner friends (or intermediates exploring a new method). So without wasting any more time, let's get started with swag 😎... oops, I mean swag 🤓.

![](https://media.giphy.com/media/BW7QHkBICEZG0/giphy.gif) 


#### 1. Set up the server

For this, we are using Digital Ocean. If you don't have a DO account, get a 100$ coupon [here](https://m.do.co/c/12642f967cd1). What you have to do now is simple, just create a droplet like shown in the screenshot below

![](https://thepracticaldev.s3.amazonaws.com/i/o9ubuix3mx40b1bqtwna.png)

Create a 5$ droplet with Ubuntu Distribution. I highly recommend adding ssh key to your Digital Ocean account for extra security and ease. If you don't know how to do it, use [this tutorial](https://www.digitalocean.com/docs/droplets/how-to/add-ssh-keys/) or else you can use a password. 

#### 2. Install Nginx

Now open your terminal, and log into your Digital Ocean account using:

```
   ssh root@your-ip
```
Once that's done, let's install nginx on to the server, which is again easy-peasy.

```
    apt-get update
    apt-get install nginx
```
If you see this when you open your IP in a browser, you are good to go.
![](https://thepracticaldev.s3.amazonaws.com/i/in66emnwlren9aqbam7d.png)

#### 3. Final Step: Deployment
Okay, now this is the last step. Let's move into your project folder and run this command to copy everything:

```
scp -r * root@your-ip-address:/var/www/html/
```

or if you wanna copy some specific files then use:

```
scp -r css/ fonts/ images/ index.html js/ root@your-ip-address:/var/www/html/
```

Well, that's it. Your site will be up and running in no time. 

[![](https://thepracticaldev.s3.amazonaws.com/i/jmgpghiq0vcm5yh41629.png)](https://dragula.teamxenox.com)

***Note: This may not be an efficient way to do it but it's fast for sure. DON'T USE THIS FOR PRODUCTION.***

### Extras 🎊

#### Setting up Domain name

To do this, go into your manage section and click on networking

![](https://thepracticaldev.s3.amazonaws.com/i/8hckfekecmxyi2zxaybm.png)

Enter your domain name and click "add domain". You have to change your DNS after this and the complete guide to doing that is [here](https://www.digitalocean.com/community/tutorials/how-to-point-to-digitalocean-nameservers-from-common-domain-registrars) for every registrar.

![](https://thepracticaldev.s3.amazonaws.com/i/3meuor7yl4xw960q6fe0.png)

If that's done, the next step is to add an A record. To do that just add `@` in the hostname and then choose the droplet you want to link and that's it. Consider the job done.

#### Deploying multiple projects

If you want to deploy multiple projects on one droplet to save money, that is also really easy. Just make a new folder in `/var/www/html/` and you can access your other project using `https://domainname/foldername`. It may look like this:

```
    scp -r * root@your-ip-address:/var/www/html/project-2
```

If you want to have a subdomain like `project2.mydomain.com` with a separate droplet, this can be done using A records. Just type your domain name `project2` in hostname, choose the droplet you want to link, and boom! You're done.

-------

## Conclusion

Well, I hope my article helps to simplify the process of deploying a static site in seconds. If you have any doubts or if you get stuck somewhere, feel free to ask me any questions in the comments below.
***Experts: If you have a better method, feel free to jump in the comment section below.***

Also, If you don't wanna miss the next big step in this process, which is setting up a free SSH, don't forget to follow so you can catch up with that next week.
![](https://camo.githubusercontent.com/9daeffb125235402391e39f25747fb7145461e3a/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f64376f38495864737077526d7358523743702f67697068792e676966) 

Btw, we have recently launched a free product called [Dragula](http://dragula.teamxenox.com). Do check it out. You can easily copy links and markdown codes of stock images using Dragula, so it might save you lots of time for your DEV blogs. 😉

Okay guys, that's it for now. See you all later!

![](https://media.giphy.com/media/vGfq40OBLIehW/giphy.gif)