DEV Community

Cover image for Deploy a Static Site in 3 Steps πŸ‘†πŸΌβœŒπŸΌπŸ€ŸπŸΌ
Sarthak Sharma for XenoX

Posted on

Deploy a Static Site in 3 Steps πŸ‘†πŸΌβœŒπŸΌπŸ€ŸπŸΌ

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 πŸ€“.

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. What you have to do now is simple, just create a droplet like shown in the screenshot below

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 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
Enter fullscreen mode Exit fullscreen mode

Once that's done, let's install nginx on to the server, which is again easy-peasy.

    apt-get update
    apt-get install nginx
Enter fullscreen mode Exit fullscreen mode

If you see this when you open your IP in a browser, you are good to go.

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/
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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

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

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 for every registrar.

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
Enter fullscreen mode Exit fullscreen mode

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.

Btw, we have recently launched a free product called Dragula. 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!

Top comments (27)

Collapse
 
cjbrooks12 profile image
Casey Brooks • Edited

To be frank, if you're setting up a VPS for a purely static site, you've kinda missed the point of it. Static sites offer so much more potential than just a website that doesnt run server-side code.

If you're going through the trouble to set up and manage your own webserver, you might as well drop some PHP or something into it to get the most out of it.

And publishing a static site locally and deploying via SCP simply will not scale. A big reason why you'd choose a static site is so that you can build and deploy a long, expensive build process on a CI server rather than making the expensive calculations/HTTP calls at runtime. Having CI, you get to simply push to a git repo and know it will be deployed soon, and never have headaches over how long the build or upload is going to take.

You should also take advantage of the fact that a static site can live on a CDN, which will make delivery faster than serving it form a Droplet, and also will never get overwhelmed with huge spikes in traffic.

As others have mentioned, there is a completely different set of hosting providers for static sites: Netlify, Zeit Now, all the major Git hosts provide static hosting, AWS S3+Cloudfront.

Collapse
 
gypsydave5 profile image
David Wickes

Experts: If you have a better method, feel free to jump in the comment section below.

I'm jumping! I'm jumping! πŸ˜‰

Collapse
 
sarthology profile image
Sarthak Sharma

Great blog.

Collapse
 
syntaxseed profile image
SyntaxSeed (Sherri W) • Edited

Articles like this are dangerous. No mention of firewall settings, securing the server, automatic security updates, nothing.

Setting up servers is not something you should do carelessly, even if it's not for production.

You may not care if your server is hacked, but it then becomes a vector for outgoing attacks.

If you don't know how to do this properly, hire someone or use a service.

Collapse
 
sarthology profile image
Sarthak Sharma

Purpose of this article is to get beginners started. I have talked to many new developers who got scared after all these setups and because of that they don’t even start. So I just want to take the fear away and help them enjoy the joy of deploying for the first time. Also in follow up articles, I’m going to explain how to secure the server.

Collapse
 
syntaxseed profile image
SyntaxSeed (Sherri W)

Then you should specify this, with emphasis, at the beginning of this article. Too many people do a quick Google search & think they are sysadmins.

Even after 15 years as a dev & a couple years learning these basics, I would not attempt to set up a publicly accessible server myself yet.

People need to be responsible.

Thread Thread
 
sarthology profile image
Sarthak Sharma • Edited

I have emphasized on this, if you read the article, and mention that it’s just for beginners. I respect your concern here and encourage you, being an expert, to write an article about how to secure such a server. It will be great learning for beginners coming to this article and guess what, I will also link your article in my post. 😊
Remember, the goal here is to inspire beginners.

Thread Thread
 
syntaxseed profile image
SyntaxSeed (Sherri W)

It's cool to write articles for beginners, of course.

But instead of promoting your DigitalOcean referral link, you should have them use a virtual machine on their local computer. Where they can learn & experiment in safety.

Thread Thread
 
sarthology profile image
Sarthak Sharma

Damn, I don't know miss, how I offended you but I'm just trying to make you understand that we are on the same side. Anger makes you blind. Btw

you should have them use a virtual machine on their local computer. Where they can learn & experiment in safety.

I have

Thread Thread
 
syntaxseed profile image
SyntaxSeed (Sherri W)

Lol I'm not angry.

Just disagreeing with you.

Collapse
 
thejoezack profile image
Joe Zack

Netlify is a great option for static sites. You get hosting, https, and a build pipeline for free...very easily even with a custom domain.

Best of all, it's a cdn so your site is available from multiple nodes around the world so you've got great performance a d resilience out of the box...for free

Collapse
 
sarthology profile image
Sarthak Sharma

So nice gotta try this too.

Collapse
 
mithuns profile image
Mithun

Static pages using all this setup ? And on top of that pay 100$ , why ?
There are easier options without having to install any server like github-pages.
Heck, gitlab lets you host static websites from private repos for free plus it gives gitlab-ci which can do auto deploy each time you push a commit.
To be frank this seems a lot click-baity title to me and way too complicated for something as easy as hosting static sites.

Collapse
 
dionakra profile image
David de los Santos Boix

I don't know if better, but for free there are a couple of solutions to deploy static sites like Firebase, GitHub Pages, Now, Netlify or Heroku (and I might be forgetting a couple of them).

Collapse
 
sarthology profile image
Sarthak Sharma

Yeah, of course that’s an option too.

Collapse
 
markhopson profile image
Mark Hopson

Good tutorial but I prefer S3 for static websites (simple and cheap)
docs.aws.amazon.com/AmazonS3/lates...

This is good if your website requires some server-side code tho

Collapse
 
ryansmith profile image
Ryan Smith • Edited

I appreciate the content as always, but I feel that you should disclose that the DigitalOcean coupon is actually a referral link. Otherwise, it seems like you are trying to draw people in with the promise of an easy way to set up a static site (a hot trend right now) when the real intention is setting up a DigitalOcean account (via your referral). The bulk of the post does not pertain to static sites, so you could see how others could reach the wrong conclusion.

Collapse
 
c0derr0r profile image
Irkan Hadi

Or just use free github pages??

Collapse
 
louissasha profile image
louissasha

Thank you for that I always wanted to know how to handle that part of the Development

Collapse
 
sarthology profile image
Sarthak Sharma

Glad I could help.

Collapse
 
czekaj profile image
Lucas Czekaj • Edited

I prefer Jekyll with GitLab/GitHub Pages for free. Zero setup.

BTW, the difference between the two is that GitLab Pages are free for private repositories and GitHub Pages are not.

Collapse
 
mkrl profile image
Mikhail Korolev

GitHub now also has free unlimited private repos (personal only though). They also do work with GH pages nicely.

Collapse
 
czekaj profile image
Lucas Czekaj

As I said, GitHub Pages are limited to public repositories in the free plan. If you go to Settings of your free private repository you'll see the following message in the GitHub Pages section: "Upgrade to GitHub Pro or make this repository public to enable Pages."

That's why GitLab does it better in this case.

Thread Thread
 
mkrl profile image
Mikhail Korolev

Whoops, my bad. I saw the "free private repos" blog announcement and immediately tried it. Seemed to be working fine and private, but I forgot that I have acquired GH Pro recently. Yeah, GitLab is certainly still the way to go for private hosting.

Collapse
 
steveblue profile image
Stephen Belovarich • Edited

In the examples you use scp. There is also rsync which has a lot of other options.

stackoverflow.com/questions/202445...

Collapse
 
sarthology profile image
Sarthak Sharma

That’s neat. Thanks man.

Collapse
 
bikalbasnet profile image
Bikal Basnet

I feel easiest and scalable would be hosting it on aws s3 than doing this way on digital ocean.

With aws s3

  • you can scale up without doing anything,
  • 99.99 % availability
  • cheap