Static Site Generators

Static sites do not contain dynamic content and are composed of static files, such as HTML, CSS, and JavaScript, that do not require server-side processing or a database.

Because the files are pre-built, no further processing is required when a user visits the site and fewer resources are needed to run the site. With no scripts or a database to exploit, the site’s security is also increased.

Benefits of static site generators

If you’re familiar with HTML, CSS, and JavaScript, you can build a static site using a text or code editor. However, you need the technical knowledge to write the content, it can be unwieldy and time-consuming, and as your site grows, it can become harder to manage and maintain.

Static site generators (SSGs) offer a more efficient option to build your static site. They often include various tools that make it easier to create, style, publish, and edit your content as need. Some of the key benefits of using a static site generator are:

• Templating: A templating system lets you define the structure and layout of your website using reusable templates and components that can be used across multiple pages. This means you don’t need to duplicate or update common elements across multiple pages manually. This also separates your content from the design and presentation layer, so you can focus on writing and updating the content.
• Automation: If your site includes content from various sources, such as Markdown files or data files, a static site generator can automate the process of converting your content into HTML files. Tasks like minification, optimization, and asset bundling can also be automated. All of this saves you time and reduces the chances of errors, by allowing you to create and optimize your site without manually performing each task.
• Version control: Static site generators integrate with version control systems like Git, so you can track changes, collaborate with others, and easily revert to previous versions if needed.
• Incremental Builds: With incremental builds, when you make changes and generate a new output, only the files that have changed since the last build are regenerated. Many static site generators support incremental builds, improving the build time for larger sites and small updates.

Using a static site generator

Each static site generator (SSG) has its own features, configurations, and templating systems, but the set up to generate a site that will be hosted with Kinsta’s Static Site Hosting usually involves the following:

1. Choose your SSG: There are many SSGs available. Selecting the one that best suits your needs is the first step. To build and host the site with Kinsta’s Static Site Hosting, choose one that uses Node.js for the build process. Below, we have a list of SSG’s ready to use at Kinsta.
2. Set up a local development environment: Install the necessary dependencies, including the SSG itself, any required programming languages, and a code editor.
3. Create your new site: In your SSG, create the new site. This generates the basic directory structure and configuration files required for the project.
4. Configuration: Set up your site’s configuration to customize the site structure and how the generator processes your source files. This file may contain settings like the input and output directories, template paths, metadata, plugin configurations, etc.
5. Templating: Create templates and layouts that define common elements and structure for your pages, such as headers, footers, navigation menus, etc.
6. Add content and assets: Create or gather existing content using Markdown or other supported formats. Each page generally corresponds to a file within the content directory. Assets will likely be stored in a separate directory from the content files.
7. Styling: Modify the CSS or preprocessor files (e.g. SASS or LESS) to apply custom styles to your site. Some SSGs also have themes available that can be installed and customized for styling.
8. Build and preview locally: Run the build command provided by the SSG to compile your website. The SSG processes your templates, converts your content files to HTML, and generates the static files (HTML, CSS, and JavaScript). If applicable, it will also perform tasks such as minification, optimization, and asset bundling. Use this setp to ensure that everything looks and functions as intended.
9. Create your Git repository: Use Git to create your repository, then commit and push your new site to your new Git repository.
   1. If you will be deploying the site to Kinsta without running the build at Kinsta, the files you commit to your repository need to be the output from the build (the HTML, CSS, and JavaScript files).
   2. If the site is to be built at Kinsta, the files you commit to your repository need to be the content, assets like images or other media, and the SSG files (or configurations files that will pull in the dependencies for the build).

10. Deploy your new static site: In MyKinsta, add a new static site and connect it to your Git repository to deploy your site to Kinsta’s 260+ CDN locations.
11. Maintain and update: As you continue to work on your site, make sure to follow best practices for version control, regularly commit changes, and stay updated with the latest versions of the SSG and its dependencies. This ensures a smooth development process and allows you to take advantage of new features and bug fixes.

Static site generator compatibility

Kinsta’s Static Site Hosting is for pre-built static sites or sites built with modern JavaScript frameworks that use Node.js to build the site at Kinsta. Landing pages, brochure sites, and even some small blogs that aren’t updated too often and do not require dynamic content (like comments) are usually a good fit.

If your site meets any of the following conditions, it will be better suited for our Application Hosting:

• It uses a language other than Node.js to build the site (e.g. PHP).
• It requires server-rendering to serve some or all of the site.
• It requires a database connection.
• It serves dynamic content.
• It requires sessions or authentication managed on the server-side.

If you’re not entirely sure which hosting would be best for your site, we recommend deploying your site on both to try out each option and determine which best suits your needs.

There are many static site generators available and the build command and publish directory can vary from site to site. Kinsta automatically detects several frameworks and populates the Build command and Publish directory fields when you’re adding your static site.

The table below shows the build command and publish directory to use for various popular static site generators that are compatible with Static Site Hosting.

* Gridsome or VuePress 1.x

This requires Node 16, or you can add the following in the package.json for the Build command:

SET NODE_OPTIONS=--openssl-legacy-provider && vuepress build src

** Hugo

Add the following to your project:

npm install hugo-bin serve --save-dev

Add or replace the following, depending on your project:

{
  "scripts": {
    "build": "hugo"
  }
}

It’s common for Hugo themes to recommend installation via a Git submodule. Currently, submodules are not compatible with Static or Application Hosting, so the theme files must be available in the site’s repository.