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)
- Altostra CLI installed (
npm i -g @altostra/clior see docs)
- Altostra Tools extension for Visual Studio Code (VSCode Marketplace or see docs)
- 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 berevity, but you can pick any of your environments
Create a new project
- In Visual Studio Code, open the directory in which you wish to create the project.
- Switch to the Altostra view
- Click "Initialize Project"
- 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.
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 image:
$ alto push v0.1
An Image is basically your infrastructure and code before they've been adapted to a specific environment. An Image can be deployed to any environment. You can read more about Altostra images here.
Then, we deploy the project from that image to the development environment:
$ alto deploy sampleDeployment:v0.1 --env Dev
A Deployment is a live release of your image 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
$ 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
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.
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:
alto console. It will take you directly to your project page in the Altostra's web console.
Click on the deployment 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.