Learn how to add a new static site to your account.
With Static Site Hosting, you can easily build and host your static site at Sevalla. Static Site Hosting is available for everyone in Sevalla. You can add up to 100 sites per company. For more information, see the list of Static Site Features.
To help get you started and provide examples of minimal applications, you can use one of the Sevalla one-click templates from your Dashboard. To access these templates you must not have an existing application or static site and you must have a positive balance or credit card on your account.
Sevalla one-click templates.
Click on one of the template options and this automatically starts the static site deployment.
To add a new static site, click Add site on the Static Sites page.
The first time you add a static site, youโll need to select a Git service provider and repository from your account. You can choose from any (or all) of the following:
Once youโve connected your Git provider account, youโll be returned to Sevalla to continue with the rest of the Add static site steps.
The following fields are available in the multipart form with the described effects.
You have the option here to select from any of the supported Git service providers.
Pull request previews allow you to preview your site so you can review the changes before you deploy them to your site. To enable pull request previews, select Enable pull request previews.
If you enable pull request previews, this creates a new deployment for each pull request, which will increase your build minutes and bandwidth usage.
When pull request previews are enabled, and you merge a pull request in your Git provider, Sevalla creates a Preview environment in your Deployments. When you select the deployment, you can click View previews to view a preview of the branch or the commit.
View a preview of the branch or commit.
If you enable pull request previews, you can select whether to use the environment variables in the production environment, preview environment, or both.
The build settings dictate how we build your static site. If your site uses one of the frameworks we automatically detect, the Build command and Publish directory are automatically populated, and a notification that the framework was detected is shown. Double-check the fields to confirm they are correct.
latest
to use the most up-to-date version and lts
for the currently active long-term support version.index.html
. When a user enters a URL for your site, all navigation traffic is directed through the index file to ensure seamless navigation within the site.Specifying a Build command and Publish directory are crucial steps if your site depends on a build step. The Build command tells our system how to assemble your site, and the Publish directory is the subdirectory where the finished site files live, relative to the root of your repository. Filling these out correctly will ensure your site is built and served as you intend. If the Build command is left blank, the system may indicate the deployment is complete, but it will only upload the unbuilt contents of your repository.
To automatically detect the framework, we check which dependencies are used in the package.json file to determine the framework. If one of the following frameworks is detected, then we automatically populate the Build command and Publish directory fields. We also check for a yarn.lock file in the repository, and if one is found, we populate the Build command with the equivalent yarn commands instead of npm commands.
Framework | Build Command | Publish Directory |
---|---|---|
Astro | yarn build npm run build | dist |
ElderJS | yarn build npm run build | public |
Gatsby | yarn build npm run build | public |
Next.js | yarn build npm run build | out |
Nuxt | yarn generate npm run generate | .output/public |
React (using Create React App) | yarn build npm run build | build |
React (using Vite) | yarn build npm run build | dist |
If you use a different framework that youโd like to be added to the list of automatically detected frameworks, open a new chat with our Support team and let us know.
Environment variables securely provide the build process information like API keys or other details you do not want to include as clear text in your siteโs code. Add the key-value pairs here for your environment variables. Environment variables can also be added, updated, or removed on the Settings page after your site is created.
Click Create site to begin deploying your site.
Once your site is successfully deployed, you can open the site using Visit Site at the top of each page within the static site in Sevalla.
Use Visit Site to open your static site once it is successfully deployed.