Add Static Site

With Static Site Hosting, you can easily build and host your static site at Kinsta. Static Site Hosting is available for everyone in MyKinsta. You can add up to 100 sites per company. For more information, see the list of Static Site Features.

Adding a Static Site

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:

• Bitbucket
• GitHub
• GitLab

Once you’ve connected your Git provider account, you’ll be returned to MyKinsta to continue with the rest of the Add static site steps.

The following fields are available in the multipart form with the described effects.

Details

Select Branch

You have the option here to select from any of the supported Git service providers.

• Repository: Select the Git repository to use.
• Default branch: Set the branch that will be deployed on commit or manually.
• Automatic deployment on commit: Check this box to automatically deploy your site each time a commit is made to the branch selected above.

Basic Details

• Display name: This name will be displayed in MyKinsta for easy reference. The name must be unique; it cannot be the same as another static site, application, or WordPress site.

Build Settings

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.

Build Settings

• Build command: Optional. If your static site requires a build command, enter it here.
• Node version: Optional. If you enter a build command, you can specify which version of Node.js to use during the build process to ensure compatibility and avoid errors.
• Publish directory: Optional. If this is left blank, it defaults to the root folder of your repository.
  • If you want to publish your site to a specific subdirectory, enter it here, relative to the repository root.
  • If you have an HTML site that doesn’t need to be built that you want to run from a specific subdirectory, place your site files in that directory and enter it here, relative to the repository root.
• Index file: If you use a single-page application (SPA), enter the site’s default page. SPAs typically use a single HTML file, commonly named 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.
• Error file: If you use a single-page application (SPA), you can specify which file to redirect traffic to if an error occurs in the navigation.

Automatically Detected Frameworks

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

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.

Visit 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 MyKinsta.