Static websites
  • Updated on 06 Aug 2020
  • 1 minute to read
  • Contributors
  • Print
  • Share
  • Dark
    Light

Static websites

  • Print
  • Share
  • Dark
    Light

A static website is a set of HTML/CSS/JS and media files that doesn't contain any server-side logic. It can communicate with the API or serverless functions using AJAX requests to receive and show data, but there are no server-side calculations involved in the page generation.

More and more static websites are generated using front-end frameworks. For instance, Nuxt is a framework based on Vue that allows you to generate a static website. This generation process is necessary for SEO because it's the only way to make sure that search engines will interpret the website correctly.

Deployment

Click "Create a service" in the top-left corner of your Dashboard to open this window, and choose "Front-end app or static website":

Screen Shot 2020-06-16 at 10.07.47 AM.png

Next, connect your git repository and choose "Static website" in the next window. Now you can enter the directory containing the index.htm or index.html file. Usually this is not the root directory of the repository because it's not secure. Also, if you use a front-end framework it probably will be public or dist.

Screen Shot 2020-06-16 at 10.16.05 AM.png

Build command for generated websites

If you use a framework such as Nuxt, you want to fill in the Build command field to generate the website content before it is launched. Look for your framework in the Frameworks combo-box.

Troubleshooting

"404 not found" error

This error usually means that Nginx can't find index.html nor index.htm file in a directory. Check that you specified the correct directory in deploy settings containing one of these files.

Two most common values for a directory are:

  1. Empty directory. It means that the index file is located in a root directory of the repository.
  2. dist directory that is usually created after the build using a command like npm run build. If you use Vue, Angular, or React as a front-end framework, you want to use this directory.

npm ERR! enoent ENOENT: no such file or directory, open '/opt/build/package.json'

This error means that you don't have a package.json file in a build directory. There are two solutions for this issue depending on your case:

  1. If your package.json file is located in another directory you need to update your build command to cd directoryname && npm i && npm run build.
  2. If you don't have a package.json or your project doesn't require modules, you can simply remove the build command.
Was this article helpful?