How to Host Static Sites

Static sites (landing pages, blogs, merchandise catalogs, online software and hardware documentation) are made up of individual pages and files (HTML, JS, graphics, fonts) that are hosted on a server and delivered exactly as they’re stored. It doesn’t take many system resources to maintain them, and they can be easily backed up. Static pages can be created and edited in any text editor. Selectel Cloud Storage is an easy-to-use platform for hosting static sites and offers the following features:

  • index files;
  • error pages;
  • directory listings, plain and JSON or with CSS;
  • request statistics;
  • caching headers;
  • upload links;
  • photogalleries;
  • second level domain binding;
  • low cost — starting at 1 ruble a month.

Cloud Storage is also a convenient platform for hosting single-page applications (SPA). SPAs are hosted the same as static sites.

Hosting Sites

Step 1: Create a Public Container

Log into the control panel and open Cloud Storage. Create a public container by clicking New container.

Step 2: Configure Special Pages

Now we need to configure special pages: an index and error page. Open the Container settings tab and choose Special pages. In the Index file field, specify the path to index.html, which will load when a user accesses the directory. The path to the index file can be absolute or relative (without a / slash at the beginning): An absolute path indicates the strictly defined file location, regardless of the current folder or other circumstances. It always starts from the root container. Relative paths start in the current directory and then move backwards. The system will first look for index.html in the folder nearest the end of the path; if the file isn’t found, then the the system will check the root. To illustrate, we’ll create a file in our text editor and add the following text: `

Hello, world!

` We then save it as index.html. We upload it to the container, and then assign it as the index file. If we type http://xxxxx.selcdn.ru/site/ in our browser, we’ll be returned the index page with the text “Hello, world!”. Under 404 error, enter the path of the file the user will be sent if they requests a non-existent file. In our case, we'll open our text editor, make a file with the text “Page not found”, and save it as error.html. We then assign it as the error file. If we enter a path to a non-existant page in our browser (for example, http://xxxxx.selcdn.ru/site/1), then we’ll be redirected to our error page, and the text “Page not found” will be displayed in our browser. Error pages can be assigned for different codes, including 404, 307, and 200. We can also enter the address of an external resource (if we link to the site http://example.com, then that is where the user will be redirected in the event of a 404 error). By checking the box next to Web listing, we can determine how the contents of our catalog are organized:
  • by name;
  • by size;
  • newest first;
  • oldest first.

You can also apply a CSS file to our listing page. Under Listing style file, enter the path to the CSS file you’d like to apply to your directory listing. For index.html, CSS styles are assigned directly in the HTML file.

Step 3: Map a Domain

To map or bind a domain to the container, open the the Domain management block. All of the files saved in the container will be available via the mapped domain. If, for example, we assign the domain images.example.com to the container my_images, then all of the files from this container will be available at http://images.example.com. Before we can assign a domain, we need to add the necessary records to the DNS. Second level domains can be mapped to containers by adding the A record (or AAAA record for IPv6 addresses) that links the address entered in the control panel to the DNS.

Step 4: Upload Files

All of the basic configurations have been set for our site and we can upload our content to the container.

Managing HTTP Headers

Cloud Storage lets you manage HTTP headers for caching.

Using the cache-control header, you can manage how a page is cached. The following values can be assigned to the header:

  • no cache — completely prohibits caching (used on frequently updated pages);
  • public — allows caching by both a local client and proxy server;
  • private — allows caching only by local clients;
  • max-age — uses a cached document for a specific period (in seconds);
  • no-store — prohibits a page that contains private data from being cached

Accelerating Static Sites

From the user’s point of view, one of the most important criteria for a site is its load time. Below are some tips for optimizing static sites in Cloud Storage.

Tip 1. Use the CDN

CDNs save all static content (images, text files, JS, CSS, etc.) to caching servers located all over the world. When a website or its resources are accessed, the request is processed by the caching server closest to the user. With a CDN, sites load faster on both mobile and desktop devices. The CDN caches data for 24 hours by default. You can clear the CDN at any time. Under Storage settings, open the CDN block. In the field, enter the addresses of the pages you want to clear the cache for and click Purge cache. The cache will be purged approximately 15 minutes after the form is submitted.

Tip 2. Pay Attention to the Cache-Control Header

To set the amount of time a file should be saved in a browser’s cache, the original file in storage should contain a Cache-Control header with a max-age directive. This header can significantly reduce load times. If the file is cached, then the browser will instantly display content from the cache without sending a request to the site. A file’s caching period is shown in seconds: Cache-Control: max-age=7200 In the given example, it’s set to 7200 seconds (2 hours). This is how CSS, JS, and image files are usually cached. These files can be cached indefinitely; if the content changes, just update the links in the HTML. RFC 2616 recommends caching these files for no longer than one year: Cache-Control: max-age=31536000 If a file should never be cached and always be sent fresh, the following value should be set for the Cache-Control header: Cache-Control: no-cache This means the element should never be cached and the client must request it every time they access the cloud (in this case, the file’s load time will increase since the body must be downloaded each time). For HTML pages, the preferred Cache-Control header value is no-cache. If you need to make an urgent change to a page, and the client has cached said page (modern browsers do this by default), the client may not see the changes. In some cases, it’s better to base the cache time of an HTML page on the frequency changes are made. For example, if a page contains news that updates every hour, then the max-age value should be set to 3600 (1 hour). Cache-Control header values (just like other HTTP headers) in our cloud can be set from our web interface.