DEV Community

Cover image for The fastest way to Host your static website
Dev-suite
Dev-suite

Posted on

The fastest way to Host your static website

In this article, I will show you how you can create and deploy your static website very fast. When I want to create a static website and want to deploy it, I usually use these steps.

In this article, We will create a product launch timer website which will have some time and will be decrementing the time every second.

  1. Create an HTML page with a timer

  2. Deploy static website

  3. Connect our custom domain

Let's create an HTML page that will have a timer

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Atkinson Hyperlegible' rel='stylesheet'>
<link rel="icon" href="wall.png" />
<title>The Awesome Company Inc.</title>
</head>
<body>

<style type="text/css">
  html{
    height: 100%;
  }
  body{
    font-family: 'Atkinson Hyperlegible';font-size: 22px;
    height: 100%;
  }
  p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
</style>
<body onload="loadInitialCount()">
  <div class="container">
    <div>
      <center>
        <h1>Product Launch In</h1>
        <p id="demo"></p>
        <h6>The Awesome Company Inc.</h6>
      </center>
    </div>
  </div>
</body>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Mar 29, 2022 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now we will deploy it on the cloud quickest way possible. When I want to host any static sites I directly go to Netlify (https://www.netlify.com/). It's an awesome platform where you can deploy your sites easily and free of cost.
Simply create your account and log in to Netlify.

Click on Add new site

Image description

Click on Deploy Manually , Here you will need to just drag the folder where you have your index.html file, and that's it.

it will give you an address where your site is live.

Image description

You can go to this URL and check.

Image description

Now let's connect our own domain name to our page. You can buy your domain from GoDaddy, Namecheap, or any other domain registrar.

For this article, I already have a domain that I will be using.

Go to Domain Settings

Image description

Click on Add Custom Domain

Image description

Enter your domain name and click Verify then click Add domain.

Image description

Now on your Domain Settings , Click on Options and go to DNS settings.

Image description

Here you will get the Netlify name servers that you will need to add to your domain. Go to your domain console where you registered your domain name and add these 4 nameservers.

It will take some time to reflect the changes After changes are done. Your site will be live.

Congratulations, You just made your static website live within a couple of clicks.

Isn’t this the fastest way to do this?

Hope you like this article.

Cheers!!

Top comments (0)