Background

We often see the need for static websites to serve various requirements, such as a web application, an admin interface for a service, a landing page and countless other cases where all that’s required is pre-built HTML pages with CSS and JavaScript.

In this post, we’ll take a look at one of Altostra’s templates that can help you deploy static websites quickly.

What we are building

We are building a simple static website that consists of three resources:

• S3 Bucket
• CloudFront CDN
• Domain Name

These resources come included and configured in a template, so most of the work will be setting up the website content.

Setup

We begin by creating a new project from the static-website template. Using the alto templates command, we can see which templates are available to us, then using the alto init --template static-website we initialize a new project from that template:

$ mkdir static-website
$ cd static-website

$ alto templates
✔ Getting project templates
Available templates:
 * static-website
 * ...
$ alto init --template static-website
✔ Getting template 'static-website'
✔ Initializing project
$ npm init -y; echo node_modules > .gitignore
$ git init
$ git add -A .
$ git commit -m "Initial"

Architecture

There’s nothing special we need to do with the project’s architecture, it comes pre-defined in the template with the Domain Name, CDN and Bucket resources.

Open the project in VSCode to see the architecture design:

$ code . 

#s3 #aws #static-site #cloudfront #serverless #amazon web services