Create a Static Website

Overview

In this tutorial we'll create a static website from a template. A static website consists of the following resources:

• A S3 bucket that hosts the site files.
• A CDN that efficiently distributes the files across the world, handles cache and more.

The template we'll use contains all the parts required and comes pre-configured with a demo website.

Things you'll need for this tutorial

1. An Altostra Account (Don't have one yet? Just login here)
2. Altostra CLI installed (npm i -g @altostra/cli or see docs)
3. Altostra extension for Visual Studio Code (VSCode Marketplace or see docs)
4. A connected AWS cloud account ( Web Console settings or see docs)
5. An Environment connected to your AWS Account (Environment Settings or see docs) - We'll call it Dev for berevity, but you can pick any of your environments

Create a new project

1. In Visual Studio Code, open the directory in which you wish to create the project.
2. Switch to the Altostra view
3. Click "Initialize Project"
4. In the Templates list, click Static Website

The template is applied to the current project. You now have a project design with a Bucket and a CDN. The bucket sources point to the public directory in the root directory of the project — it was created from the template.

In the public directory you can find an example static website, we'll use it for our tutorial.

Deploy the Project

Now that we have the project, first we push a new version:

$ alto push v0.1

A Version is basically your infrastructure and code before they've been adapted to a specific environment. A Version can be deployed to any environment. You can read more about Altostra versions here.

Then, we deploy the project from that version to the development environment:

$ alto deploy sampleDeployment:v0.1 --env Dev

A Deployment is a live release of your version in a specific environment - in this case, the Dev environment.

For more information about deploying projects, read the Deploy a Project guide.

That's it - the project is deployed.

Upload the website files

When you deploy projects that contain buckets, you only create the infrastructure for that project - the content files are not automatically uploaded. This is intentional and is meant to separate the process of deploying the infrastructure from the process of updating the content.

To upload the website content, we'll use the sync command:

$ alto sync sampleDeployment --all --public

This will upload the files to the bucket in our project. If we had more than one bucket in the project, the --all option would cause all of their content files to upload.

Note the use of the --public option: it makes the files uploaded to the bucket be set with public access permissions; without this, the files are not accessible without authentication and explicit permissions. The default for the command is to not set the files as public, for security reasons.

Updating the content files

Since the infrastructure and the content files are deployed separately, you can easily upload new versions of the content files by running the sync command again.

But, at that point in time, the CDN might have already cached the existing versions of your files. To clear the CDN cache and allow it to fetch the new files, we use the invalidate command:

$ alto invalidate sampleDeployment --all

This will clear the cache for the CDN in our project. If we had more than one CDN in our project, the --all option would cause them all to invalidate their cache.

Let's Test!

So we have static website with a CDN, but we want to see it! Since we have deployed to AWS, we get an AWS CloudFront CDN domain name, and we can use it to see our website.

Let's get our CDN domain name:

Run alto console. It will take you directly to your project page in the Altostra's web console.

Click on the stack name sampleDeploymet - and you'll get to the current deployed stack.

Click on the arrow at the right end of the first line - this will send you directly to your AWS stack.

In your stack, click "Resources", and copy you CDN id.

Go to AWS Cloudfront, and find the cdn with the Id you just copied. Next to it you'll find the CDN domain Name.

Open a browser to the address you get to verify your deployment of the website.