Static sites in cloud storage

  • Tutorial
pr-424-2-1

Most modern websites are dynamic. Their pages are formed on the server side, and then displayed in the user's browser. Many of these sites operate on the basis of simple and convenient CMS (content management systems), which usually include a WYSIWYG editor, which is simple and intuitive. With all the obvious simplicity when working with dynamic sites, a number of inconveniences arise.


The functioning of a dynamic site is ensured by a “bundle” of a web server, page generation application and database. The interaction of all these components is often associated with serious overhead of system resources. To reduce the load and reduce page generation time, caching is used, but it can be used not always and not everywhere. Content that is large in volume, such as graphics, is usually cached. Also, caching is necessary to minimize the number of queries to the database.

Some difficulties are also associated with the configuration of the web server and software. In addition, dynamic sites are vulnerable to DDoS attacks.

In connection with all the described inconveniences and difficulties, interest in static sites has recently increased significantly. A static site is a collection of files (HTML, JS, graphics, fonts) hosted on a server. Its maintenance does not require large expenditures of system resources; There are no difficulties with backup either. Pages for such sites can be created and edited in any text editor.

To combine content with templates, you can use the so-called static site generators. There are a lot of generators (there are several dozen of them published on GitHub alone ). The most common and popular are Hyde , written in Python, as well as Jekyll andMiddleMan written in Ruby.

An overview of all existing static site generators goes far beyond the scope of this article; We refer all interested readers to a detailed comparative table .

There are a number of categories of sites that are much more convenient to be static: business card sites, blogs, product catalogs, online documentation for software products and technical devices. Such sites may require a dynamic part - comments, search, a user's personal account, creating pages, but it can very well be implemented using third-party tools that perfectly cope with the tasks assigned to them.

We offer our own platform for static sites, quite simple and easy to use. It's about ourcloud storage . Below we will talk about the benefits of using our storage for hosting static sites. For readers who want to try placing their own site in the repository, we will provide detailed step-by-step instructions.

Benefits



As a platform for static sites, our repository has the following advantages:
  • Indication of the index file;
  • indication of the error page;
  • directory listing (plain and JSON) with the ability to set your own CSS;
  • viewing statistics on requests;
  • header management for caching;
  • creating pages on which users can upload their files to the site;
  • organization of viewing images in the form of a photo gallery;
  • second level domain attachment;
  • low cost of use - from 1 ruble per month.


Site placement: step by step instructions



Step 1: create a public container



Creating a site based on cloud storage is quite simple. We will enter the control panel under your account, select the “Cloud storage” item in the main menu and create a public container:



Step 2: customize custom pages



Now you need to configure special pages - the index file and the error file. To do this, click on the icon Creating a website based on cloud storage is quite simplelocated to the right of the container name and select the corresponding item in the menu that

Creating a website based on cloud storage is quite simple

opens : The window for setting up special pages opens:

Creating a website based on cloud storage is quite simple

In the “Index file” field, specify the path to the “index.html” file, which will be loaded when the user accesses a directory directly. The path to the index file can be absolute and relative (without the / character at the beginning). An absolute path indicates a strictly defined file location, regardless of the current working folder or other circumstances. It always starts with the root container. When specifying a relative path, the search is performed not from the root directory, but from the end. First, the system will search for the file “index.html” in the folder closest to the end of the path; if there is no such file in it, then the corresponding file from the root directory will be given to the user. Create a file in a text editor and write in it, for example, the following text:

Hello world!



Then save it under the name "index.html". We load it into the container, and then select it as the index one. If we enter an address like “http://xxxxx.selcdn.ru/site/” into the browser line, we will see an index page with the text “Hello, world!” Saved by us in the corresponding file. You can create a CSS styles file for the index page (the path to it is indicated in the "Listing styles file" field).

In the “Error file” field, specify the path to the file to which the user will be given if he requests a non-existent page (error 404). Create a file with the text “Page not found” in a text editor and save it under the name “error.html”. Then we indicate it as an error file. If we indicate the path in the address bar of the browser, the path to the obviously non-existent page (for example, “http: // xxxxx. Selcdn.ru/site/1”), then we will be redirected to the error page indicated by us, and the text “ Page not found. " 404 error page can also be given the original design. Here is what, for example, users are trying to get to a nonexistent page on the cloud storage site - http://storage.selectel.ru/404.html

In the “Error file” field, you can also specify a link to any external resource (if, for example, a link to the site “http://example.com” is indicated, then with an error 404 the user will be redirected to it).

Step 3: attach the domain



Now you need to attach the domain to the container. In the same menu, select the item “Bind domain”:

Now you need to attach the domain to the container.

Up to five domains can be attached to one container. All files stored in the container will be accessible by the name of the attached domain. For example, if you associate the domain “images.example.com” to the container “my_images”, then all files from this container will be available at the address “http://images.example.com”. Before attaching a domain, you must make the necessary entries in DNS (for more details, see the control panel )

Attachment of second level domains



We finally did something that many customers have been asking us for a long time: now we can attach second level domains to containers. To do this, you need to make an A record in DNS (for IPv6 addresses, an AAAA record) that refers to the addresses specified in the control panel.

Step 4: upload files



Having set all the basic settings, we will place the files for the future site in the container. That's all - the site is ready to go!

Manage HTTP Headers



Cloud storage provides the ability to manage http headers for caching. Select the item “HTTP headers” in the container menu. We need to pay particular attention to the Expires and Cache-control headers. Using the Expires header, you can set how long the browser will cache data. In the Expires field, enter the date of the expected expiration of the data in the format “day of the week, day month year hours: minutes: seconds GMT, for example:“ Tue, 31 Jan 2012 15:02:53 GMT. ”After this date, caching will not be performed, and Updated data will be downloaded from the server

Web page caching is controlled using the cache-control header, which can take the following values:

  • no cache - full cache prohibition (used in frequently updated pages);
  • public - permission to cache both the local client and the proxy server;
  • private - enable caching only by the local client;
  • max-age - use a cached document for a specified time in seconds;
  • no-store - prohibition on caching a page containing private data.


Cost



In addition to simplicity, the undoubted advantage of using cloud storage for hosting static sites is the low cost of information storage. We illustrate this with a concrete example: the storage site itself “weighs” three megabytes in total; it costs us with traffic only 3 (!) rubles per month.

We invite everyone to try to create their own website based on the repository right now.
Each user receives 10 rubles into the account upon registration. This amount is enough to store 1 GB of data (and download 1 GB of data) for 1 month.

Readers who for one reason or another cannot comment on posts on Habré are welcome to our blog .

Also popular now: