Create a Static Website
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
- An Altostra Account (Don't have one yet? Just login here)
- A connected AWS cloud account ( Web Console settings or see docs)
- An Environment connected to your AWS Account (Environment Settings or see docs) - We'll call it
Devfor brevity, but you can pick any of your environments
- Altostra CLI installed (
npm i -g @altostra/clior see docs)
- Altostra extension for Visual Studio Code (VSCode Marketplace or see docs)
Create a new project
- In your browser, brows to the Altostra Web Console
- Click on
Create a new project
- Name the new project and select
static-websiteas the template
- Click on
Deploy the Project
To deploy a project we need a version of it to deploy.
Luckily for us, when we create a project from template, Altostra creates the first version of that project for us.
To deploy the project:
- Click on
Deploy New Stack
- Name your new stack
- Select the target environment
- Click deploy
Deploying a CloudFront CDN distribution may take some time (up to half an hour).
While it is being deployed by AWS CloudFormation, we can click on
Open in AWS to open the associated
CloudFormation stack in the CloudFormation console.
There you can view the status of the stack and its resources, check the latest stack events and view various metadata.
Once the stack is deployed, in the Altostra Web Console, we can click on the
Visit button to open a
new tab with our new website.
Updating the project
In order to edit and update the project, you will need to clone it so we can edit it locally.
From the Project page you click on
Clone to copy the git repository URL of the project. You can also
View Git Repository to open the project's repository in your Git provider website.
After cloning the project, you can open it in vscode.
You can edit the design using Altostra's vscode extension and you can add and edit files them as you would normally do with vscode.
When you deploy Altostra projects, you only create the infrastructure for that project - the content files are not automatically uploaded when you update them locally. This is intentional and is meant to separate the process of deploying the infrastructure from the process of updating any content.
The static-website template contains a project design with a Bucket and a CDN.
In the designer you can click on the bucket resource to edit it - and you will that that bucket
Files Location property points to the
public directory in the root directory of the project.
public directory you can find an example static website - that is the website you browsed to
when clicked on the
Visit button in the previous section.
To upload and update the website content from you local directory, we will use the
alto sync static-website --all --public
This will upload all the files from the
public directory 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.
Invalidating the CDN
Since the infrastructure and the content files are deployed separately, you can
easily upload new versions of the content files by running the
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
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.