Skip to main content

Deploy Static Sites

Static sites are websites that doesn't require server processing (e.g. connecting with database), so it only consist of HTML, CSS, JS files that sent as-is to the browser.

While static sites are works out of the box, modern static sites needed to build from many kinds of frontend tooling such as Create React App, Vite, Hugo and Jekyll and many more.

Pulling the code​

You can upload existing files from your local machine or pull it from a Git repository:

# Clone from Git repository and write it to ~/public_html
source: https://github.com/octocat/octocat.github.io

Serving the static files​

How the server processes files are depends on NGINX configurations. The simplest configuration for website that only serves static files is this:

https://github.com/domcloud/recipes/blob/master/html.yml
nginx:
  index: index.html
  error_pages:
    - 404 /404.html

The config above set directory root to be index.html and using /404.html only if the desired page is not found in the file.

Single-Page Application (SPA)​

For some websites with advanced interaction, it's desirable to put all traffic into one file. The correct configuration is defined below:

https://github.com/domcloud/recipes/blob/master/html-spa.yml
nginx:
  locations:
    - match: /
      try_files: $uri /index.html

The config above sets all traffic to /index.html unless there's an existing file for requested URL (that's for asset files such as images). Beware that the config above could impact SEO because all pages not desired is also resolved as 200 OK, so it's not suitable for SEO-Focused websites (.e.g. landing pages).

Pages that requires building​

If your site need to be built with a frontend tooling, you need to build it after pulling the code and adjust the NGINX configuration to serve the built files correctly.

Here are some popular frontend tooling and it's correct configurations:

https://github.com/domcloud/recipes/blob/master/html-cra.yml
features:
  - node lts
nginx:
  root: public_html/build
  locations:
    - match: /
      try_files: $uri $uri/ /index.html
commands:
  - yarn install
  - yarn build