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 Sevalla’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 Sevalla’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 Sevalla.

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 Sevalla without running the build at Sevalla, 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 Sevalla, 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 Sevalla, add a new static site and connect it to your Git repository to deploy your site to Sevalla’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

Sevalla’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 Sevalla. 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. Sevalla 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.

Static site generator	Build command	Publish directory	Additional notes
Angular	npm run build -- -c production	dist/(name_of_the_project)
Astro	npm run build	dist
Brunch	npm run build	public
Cuttlebelle	npm run build	.site
Docusaurus	npm run build	build
Elder.js	npm run build	public
Eleventy	npx @11ty/eleventy	_site
Ember	npm run build	dist
Gatsby	npm run build	public
Gridsome	npm run build	dist	Requires Node 16 or enabling OpenSSL legacy provider.*
Hugo	npm run build	public	Requires additional configuration for compatibility.**
Hexo	npm run build	public
Next.js	npm run build	out	Create according to [Next Static Exports](https://nextjs.org/docs/app/building-your-application/deploying/static-exports" target="_blank" rel="noopener noreferrer).
Nuxt	npm run generate	.output/public	Create according to [Nuxt client side only rendering](https://nuxt.com/docs/getting-started/deployment#client-side-only-rendering" target="_blank" rel="noopener noreferrer).
Preact	npm run build	dist
Qwik	npm run build && npm run build.server	dist	Requires the [SSG adapter](https://qwik.builder.io/docs/guides/static-site-generation/#static-site-generation-config" target="_blank" rel="noopener noreferrer).
React (using Create React App)	npm run build	build
React (using Vite)	npm run build	dist
Solid	npm run build	dist
Svelte	npm run build	build	Requires the [static site adapter](https://kit.svelte.dev/docs/adapter-static" target="_blank" rel="noopener noreferrer).
Vite 3	npm run build	dist
Vue	npm run build	dist
VuePress 1.x	npm run build	src/.vuepress/dist	Requires Node 16 or enabling OpenSSL legacy provider.*
VuePress 2.x	npm run build	./docs/.vuepress/dist

* 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.