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
- 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
Dev
for brevity, but you can pick any of your environments - Altostra CLI installed (
npm i -g @altostra/cli
or 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
Projects
->Create a new project
- Name the new project and select
static-website
as the template - Click on
Create
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
Let's Test!
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
click 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
has its Files Location
property points to the public
directory in the root directory of the project.
In the 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
sync
command:
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 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.