Quick and dirty static sites

There’s often a need to rapidly build-out or make changes to static websites (simple HTML or JavaScript sites that don’t require a back-end or database), and quickly get them up on a staging server for client review. These are the tools and techniques you can use to develop locally and deploy to a temporary cloud server efficiently.

Visual Studio Code

https://code.visualstudio.com/

This is the de facto code editor for almost anything. But it’s especially useful for static development because of its built-in terminal. Load your entire working directory into the editor and code away.

local-web-server

https://www.npmjs.com/package/local-web-server

Use local-web-server to spin up a local web site instantly. This allows you to use absolute path URLs and load JavaScript dynamically, without having to set up any virtual hosts or containers. local-web-server requires Node.js and npm, so make sure those are installed on your machine first.

In your Visual Studio Code terminal, run the following command to install local-web-server:

$ npm install -g local-web-server

Now, anytime you want to spin up a local server for your static site, just run from your Visual Studio Code terminal:

$ ws

You can now access your static site anytime at http://localhost:8000. Use ^C to stop the local web server.

Since publishing this article, an even simpler deployment solution came to light: Netlify. Read the follow-up in Even quicker dirty static sites.

Amazon S3

https://aws.amazon.com/s3/

Using Amazon S3 gives you a unique domain for your project, effectively eliminating any issues with absolute paths. You only pay for what you use, so it’s perfect for a temporary review site for your clients. S3 is simply cloud storage, but Amazon lets you use that storage space to host a static website.

To get started, sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/

Choose Create bucket. In Bucket name, choose a subdomain for your site. In Bucket settings for Block Public Access, uncheck Block all public access. These files need to be public so your client can view the site. Choose Create bucket.

Now that you have a bucket, upload all your static website files to it. Just click Upload and drag everything in your root directory into the window. Choose Upload to start the upload.

Now we can tell AWS to use this bucket as a static website. In your bucket, select the Properties tab, and click Static website hosting. Choose Use this bucket to host a website, enter the index document file name (likely index.html), and click Save.

Your static hosted site is still invisible until we set a bucket policy. Select the Permissions tab, and then Bucket Policy. Enter the following policy into the text area:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucketname/*"
        }
    ]
}

Make sure to replace bucketname with your S3 bucket subdomain.

Click Save, and your static website is live. You can find your site’s URL under the Properties tab in Static website hosting. Share this endpoint with your client and you’re good to go.

When the review period is over, just delete the bucket and forget it. While the bucket is up, you’ll only pay for what you use.

Simple.

This process works great as long as you don’t require SSL on your static site. Adding SSL locally and in the cloud is for another article. If you’re interested in learning more, or have any questions or comments, make sure to let me know.

Thanks for reading, and keep making! 🚀