In this tutorial we'll create a static website from a template. A static website consists of the following resources:
- A bucket that hosts the site files.
- A CDN that efficiently distributes the files across the world, handles cache and more.
- A domain name that you can associate with a DNS address.
The template we'll use contains all the parts required and come pre-configured with a demo website.
We'll use Visual Studio Code in this tutorial, but you can also create the project using the Altostra CLI.
Create a new project
- Open, in Visual Studio Code, the directory in which you wish to create the project.
- Switch to the Altostra view:
- In the Templates list, click Static Website:
The template is applied to the current project. You now have a project Blueprint 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
And then, we deploy the project from that image to the development environment:
$ alto deploy:v0.1 --new Development
Read more about how deployments work in the Deploy an Altostra Project guide.
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 prod --all
This will upload the files to the bucket in our project. If we had more than one bucket in the project, the
switch would cause all of their content files to upload.
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
$ alto invalidate --all --path "/*"
This will clear the cache for the CDN in our project. If we had more than one CDN in our project, the
would cause them all to invalidate their cache.
--path switch specifies the that we want to invalidate all cache. Alternatively, you could specify a more
specific path if you wish—this is a good practice to avoid clearing the cache of files that haven't changed.
Getting the CDN Domain Name
To start browsing you website, you can list the available domain names for your project using the
$ alto domains prod site-cdn: 3jah2fj39zexqh.cloudfront.net
Since we have deployed to AWS, we get the AWS CloudFront CDN address.
Open a browser to the address you get to verify your deployment of the website.