Static sites in the cloud storage

Most modern websites are dynamic. Their pages are formed on the server side and then displayed in the user's browser. Many such sites operate on the basis of simple and convenient CMS (content management systems) which, as a rule, 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 provided by a “bundle” of a web server, an application for generating pages and a database. The interaction of all these components is often associated with serious expenditure of system resources. To reduce the load and reduce the time of page generation, caching is used, but it can be used not always and not everywhere. Typically, content that has a large amount is cached — for example, graphics. Also caching is necessary to minimize the number of queries to the database.

')

Some difficulties are also associated with setting up a web server and software. In addition, dynamic sites are vulnerable to DDoS attacks.



In connection with all the inconveniences and difficulties described recently, interest in static sites has increased significantly. A static site is a set of files (HTML, JS, graphics, fonts) hosted on the server. Its maintenance does not require large expenditures of system resources; with backups, too, there are no difficulties. 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). Hyde , written in Python, as well as Jekyll and MiddleMan , written in Ruby, are the most widespread and popular.



A review of all existing static site generators goes far beyond the scope of this article; All interested readers refer to the detailed comparative table .



There are a number of categories of sites that are much more convenient to do static: business cards, blogs, product catalogs, online documentation for software products and technical devices. For such sites, you may need a dynamic part - comments, search, user's personal account, creating pages, but it can be fully implemented using third-party tools that do an excellent job with the tasks assigned to them.



We offer our own platform for static sites, quite simple and easy to use. It's about our cloud storage . Below we describe the advantages of using our storage for hosting static sites. For readers who want to try to place their own website in the store, we will provide detailed step-by-step instructions.

Benefits

As a platform for static sites, our storage has the following advantages:

• specify 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 where users can upload their files to the site;
• organization of viewing images in the form of a photo gallery;
• attaching second-level domains;
• 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. Enter the control panel under your account, select the “Cloud storage” item in the main menu and create a public container:

Step 2: set up special pages

Now you need to set up special pages - an index file and an error file. To do this, click on the icon located to the right of the container name, and in the opened menu, select the corresponding item:







A window for setting up special pages will open:







In the “Index File” field, specify the path to the “index.html” file, which will be loaded when the user accesses directly to a directory. The path to the index file can be absolute and relative (without the / at the beginning). An absolute path points to a well-defined file location, regardless of the current working folder or other circumstances. It always starts from 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, 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:

 <html>
   <body>
     <h1> Hello, world! </ h1>
   </ body> 
 </ html>

Then save it as “index.html”. Load it into the container, and then select it as the index one. If we enter the address of the type “http://xxxxx.selcdn.ru/site/” into the browser line, we will see an index page with the text “Hello, world!”, Which we saved in the corresponding file. For an index page, you can create a CSS style file (the path to it is indicated in the “Listing style file” field).



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



In the field “Error file” 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 error 404 the user will be redirected to it).

Step 3: Attach the Domain

Now you need to attach a domain to the container. In the same menu, select the item "Link domain":







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. If, for example, to link the domain “images.example.com” to the container “my_images”, then all files from this container will be available at “http://images.example.com”. Before you attach a domain, you must make the necessary records in the DNS (for details, see the control panel )

Attaching Second Level Domains

We finally did something that many clients had asked 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 the 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, put the files for the future site in the container. That's it - the site is ready to go!

HTTP headers management

Cloud storage provides the ability to manage http headers for caching. Select the "HTTP headers" item in the container menu. We need to pay particular attention to the Expires and Cache-control headers. Using the Expires header, you can set a time period during which 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 caching is controlled using the cache-control header, which can take the following values:

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

Cost of

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



We invite everyone to try to create your own site-based storage right now.

Each user receives a registration account of 10 rubles. 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 invited to our blog .