Quickstart guide for a static website
In this quickstart guide, you'll learn the process of deploying a static site on Wasmer Edge. We will cover installation of the CLI, setting up a new static site, and deploying it.
Deploying a static site
Install Wasmer
Click here for instructions on how to install Wasmer if you haven't done it already!
Initialize the local directory
If you want to deploy a static site made from frameworks like React, Vue, or Svelte, you can follow our React Static Site tutorial.
With the CLI installed, let's create a new static site! We begin creating a new empty directory - after that, we will need to run a single command.
$ mkdir my-new-site
$ cd my-new-site
$ wasmer deploy --template=static-website
It seems you are trying to create a new app!
✔ Who should own this app? · <you>
✔ What should be the name of the app? · <your-app-name>
✔ Unpacked template
✔ Do you want to deploy the app now? · yes
Loading local package (manifest path: <current-working-directory>)
✔ Correctly built package locally
✔ Package correctly uploaded
✔ Succesfully pushed release to namespace <you> on the registry
Deploying app <your-app-name> (<you>) to Wasmer Edge...
App <your-app-name> (<you>) was successfully deployed 🚀
https://<your-app-name>-<you>.wasmer.app
→ Unique URL: https://<app_id>.id.wasmer.app
→ Dashboard: https://wasmer.io/apps/<you>/<your-app-name>
Waiting for new deployment to become available...
(You can safely stop waiting now with CTRL-C)
.
𖥔 Deployment complete
The wasmer deploy --template=static-website
command will prompt you for the following:
- App owner: This is the owner of the app. It can be your username or an organization; if you're logged in, the command will prompt you to choose from your namespaces: by default, it will be your username.
- App name: This is the name of your app. By default, it will be the name of the current directory.
The above command will do the following:
- Download the template from the registry
- Deploy it to Wasmer Edge with the user-provided informations
Don't change the public
directory attribute in the wasmer.toml
file for
this tutorial. If you want to learn how to specify a different directory for
build output, check out our React Static
Site tutorial.
This is what the static website looks like in a browser:
![WASIX Explained](/_next/static/media/static-site.4d43f679.png)
Update the app
Your directory structure should look like this:
- LICENSE
- README.md
- app.yaml
- index.html
- config.toml
- wasmer.toml
To illustrate the lifecycle of an app, let's edit the index.html
file
in the public
folder:
$ pwd
.../my-new-site
$ sed -i -e 's/Hi from the Edge/This is our new title!/g' public/index.html
$ wasmer deploy
Loading local package (manifest path: <current-working-directory>)
✔ Correctly built package locally
✔ Package correctly uploaded
✔ Succesfully pushed release to namespace <you> on the registry
Deploying app <your-app-name> (<you>) to Wasmer Edge...
App <your-app-name> (<you>) was successfully deployed 🚀
https://<your-app-name>-<you>.wasmer.app
→ Unique URL: https://<app_id>.id.wasmer.app
→ Dashboard: https://wasmer.io/apps/<you>/<your-app-name>
Waiting for new deployment to become available...
(You can safely stop waiting now with CTRL-C)
.
𖥔 Deployment complete
![WASIX Explained](/_next/static/media/updated-static-site.33d55485.png)
Add your content
Currently, the public directory only contains a basic index.html
file.
You can now modify this directory and copy your own files (HTML, CSS, JavaScript, images, etc) as needed.
Test your site locally
You can also test your site locally before deploying the app on Wasmer Edge by running the following command:
wasmer run .
This will start a local server using the Static Web Server on
http://localhost:80
. You can also specify a different port by passing the
--port
flag, as in wasmer run . -- --port=<your-port>
.
The arguments after --
(double dash) are passed to the underlying server running in the
Wasmer runtime.
You can see all the available options with wasmer run --help
or click
here to see the full documentation. To see all the avilable
options for the static web server, run wasmer run . -- --help
.
Conclusion
Congratulations! You have successfully deployed a static site on Wasmer Edge 🚀.
Tip: To make changes to your site, simply modify the files in the public directory and run
wasmer deploy
again to deploy the changes.