Building a Static Website

With just a single command, even complex Node applications or Docker containers can be deployed with now.
But in some cases, there isn't the need for running code on the server. Sometimes you just want to share files or make a static website accessible for other people.
Thankfully, our tools make deploying such a project just as easy as it is with a full-blown application.

Setup

Because basic static websites don't require any special tools in order to work, there's not much you need to do in order to prepare your own one. For the beginning, just create a directory and switch to it by running these commands in your terminal:
mkdir static-sitecd static-site
Inside that directory, use your favorite editor to create a index.html file with this content:
<img src="https://cdn.zeit.co/logos/black-bg-logo.svg">

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #000;
    margin: 0;
  }

  img {
    max-height: 100vh;
    max-width: 300px;
  }
</style>
The code basically loads ZEIT's logo from our content delivery network and shows it to the user. In addition, I sprinkled some cute CSS styles on top to position the image in the exact center of the page.
This is how it will look in the browser when opening the file:

Testing across Devices

When developing a static project, you should always make sure that it works on various devices, not just on your own one. This can be solved by simply skipping to Deploying, sending the link to somewhere else and then testing it from there.
This is a very good idea when working with people across the whole globe and having them try out your project for you. But if you only want to open it on a different device in your own home network, there's a specialized solution: serve.
Want to see what it does exactly? Easy! Simply start with installing it:
npm install -g serve
Afterwards, move into the directory containing your static site:
cd static-site
And then, finally, run it using this command:
serve
Now you'll see a message containing two addresses:
  • "Local": The URL which you can open in the browser on the device where serve is running.
  • "On Your Network": That's the address that you can open on different devices on the same network to see your project.
That easy! Now you can test the site on other platforms (like your phone) as well.
You can stop serve by hitting CTRL + C.

Deploying the Site

Once the static website works on all devices, we can deploy it by running this command:
now
Once now has finished uploading the files, you'll see a URL that points to your freshly created website. This means that you can already share the URL with other people across the globe and have them enjoy your site.
But in the case of a real website (not used for testing purposes), you would now have to assign an alias to it.