Hosting single-page sites

Due to the lack of karma for the hub “I am PR”, a note about hosting single-page sites turned into an article on how to make such a service.

Sites from one page is now in fashion. The visitor sees all the important information on one screen. Marketers love to make promotional sites and beautiful landings . On the one hand, this is a sport to increase conversion, on the other - a competition of design ideas . As for the technical part, there is nothing curious here - one page of static content. For the sake of such a site, there is no point in setting up a CMS , but not everyone can edit HTML and upload files to the hosting.

If one-page sites are so popular, then let's save the world once again and make life easier for people - we will develop a service for creating and managing such sites. Technically, two main tasks need to be solved: returning html statics and editing it by the site administrator.
')

Back-end

Return statics = Nginx. The main and only pages of sites can be stored in the database and then cache the issue. But we will not complicate - the file system will fit. How is this on virtual hosting arranged? Each site by daddy ...

server { listen 80 default_server; server_name ~^(?<subdomain>.+)\.svsite\.com$; root /home/sites/$subdomain; index index.html; #      /index.html #   - 404 location = / { } location = /index.html { } location / { return 404; } } 

Editing our index.html will also handle a shell script, but let's not be such ascetics. Of course, there is a great temptation to implement both the front- and back-end in the same language ... No. Node.js is for dudes who are not going out of beta, who badly need socket.io. To summarize our hard choices, paraphrasing Sir Paul McCartney:

Let it be, let it be, let it be.
Whisper words of wisdom, Pee H Pee

In order to change the contents of a file, in PHP there is a function with the simple name file_put_contents. What to do when you need to edit only a certain piece of html, leaving the rest of the document intact? Let's not let the user fuck up a neat layout around the text he edited!
And let them say that parsing HTML with regular expressions is a moveton. The following street magic will allow us to replace the contents of any tag with a known id:

 function updateElement($html, $id, $innerHtml) { $re = '/(<(\w+)[^>]+\b(?:id)=["\']?' . $id . '["\']?[^>]*>)(?:(<\\2[^>]*>(?:(?1)|.)*?<\/\\2>)|.)*?(<\/\\2>)/is'; if (preg_match($re, $html, $m)) { $html = str_replace($m[0], $m[1].$innerHtml.$m[4], $html); } return $html; } 

Where to settle our bundle Nginx + php-fpm? Let's - in the cloud, like all fashionable startups. Amazon is expensive, we do not have investors, so we will create a virtual machine for hard-earned rubles - for example, Selectel.

Front-end

Simple hosting and CMS - a million. We will try to reach the new heights of the UX in old proven ways.

First, you need to make it easier to edit the source code of our single index.html. This will help us tag <textarea> and a great editor with the highlighted code CodeMirror . There is also Ace , but he is older and heavier.

In order to edit the content of the page, not only hypertext experts, but also all Word users, could need to be screwed with a WYSIWYG editor. In order to see always correspond to get , during editing we will show a live site with all its styles, scripts, etc. The magic html-attribute contenteditable comes to the rescue, for which, like for XmlHttpRequest, you need to thank the poor Internet Explorer. Relatively recently, the visual editor CKEditor has learned to work with contenteditable - we will use the innovation. Redactor copes better with this task, but we still cannot afford its price tag.

The attentive reader has already noticed that in technical implementation we bypass such an important component of a one-page website as graphics. Where will the editor upload pictures?
The cyclist’s motto says that the process is more important than the result. We will use the ready uploadcare.com service, which will provide us not only with a beautiful widget for uploading / cropping images, but also a vigorous CDN for all graphic content.

Gestalt

So, the story comes to an end. It remains for us to write a few dozen lines of code that will tie all the described components together. Yes, by the way, we are so lazy that we will outsource even authorization. Let Mozilla Persona do this - an authentication system based on the BrowserID protocol, which is proposed to integrate into all browsers. Do you trust Mozilla? They are all so open and non-commercial.

I do not know about you, but I got what I did. Link - in the profile of surething .