Guides
Static website

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.

If you want to deploy a static site made from frameworks like React, Vue, or Svelte, you can follow our React Static Site tutorial.

Deploying a static site

Install Wasmer

Click here for instructions on how to install Wasmer if you haven't done it already!

Log in into Wasmer

Create a new account in Wasmer (opens in a new tab). Then, log in into the Wasmer CLI and follow the provided steps to provide the CLI access to your Wasmer account.

wasmer login

Deploy!

We begin creating a new empty directory.

mkdir my-new-site
cd my-new-site

Then, running a single command, we can setup a static website.

wasmer deploy --template=static-website             

Expect to see output similar to this:

It seems you are trying to create a new app!
 Who should own this app? · wasmer-user
 What should be the name of the app? · my-new-site
 Unpacked template
 Do you want to deploy the app now? · yes
Loading local package (manifest path: ~/wasmer-user/Projects/my-new-site/.)
 Correctly built package locally
 Package correctly uploaded
 Succesfully pushed release to namespace wasmer-user on the registry
Deploying app my-new-site (wasmer-user) to Wasmer Edge...
 
App my-new-site (wasmer-user) was successfully deployed 🚀
https://my-new-site-wasmer-user.wasmer.app
 
 Unique URL: https://2dyh6i3cvx1y.id.wasmer.app
 Dashboard:  https://wasmer.io/apps/wasmer-user/my-new-site
 
Waiting for new deployment to become available...
(You can safely stop waiting now with CTRL-C)

The above command will do the following:

  1. Download the template from the registry
  2. Store the template locally in your current directory (try running ls -la)
  3. Deploy it to Wasmer Edge
⚠️

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.

Try clicking the URL which is under the deployment message https://my-new-site-wasmer-user.wasmer.app, and expect to see something like:

The deployment URL follows the format https://<app-name>-<app-owner>.wasmer.app

WASIX Explained

Update the app

To illustrate the lifecycle of an app, let's edit the index.html file in the public folder:

Your directory structure should look like this:

    • LICENSE
    • README.md
    • app.yaml
      • index.html
      • config.toml
    • wasmer.toml
  • Lets modify index.html:

    sed -i -e 's/Hi from the Edge/This is our new title!/g' public/index.html 

    Now, let's redeploy it:

    wasmer deploy

    When refreshing the browser, expect the page to have been updated:

    WASIX Explained

    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:8080. 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.

    Resources

    wasmer-examples/static-website