Мигриране на статичен HTML сайт в ICN.Bg хостинг

Във време на тотална хегемония на WordPress и социалните мрежи, все по-рядко се споменават предимствата на статичните HTML сайтове - непостижима за CMS системите бързина и сигурност (поради липса на административен панел и база данни), както и изключително лесна поддръжка.

Този тип сайтове са особено подходящи за изграждане на целеви страници (landing pages) и малки персонални сайтове, чието съдържание не се актуализира редовно (както блоговете).

Една от най-популярните системи (framework) за създаване на статични HTML5-CSS3-JavaScript сайтове e Bootstrap, започната през далечната 2012 като Bootstrap 2 от двама програмисти на Twitter - Mark Otto и Jacob Thornton. Понастоящем Bootstrap 4 е седмият по популярност проект в GitHub и в момента разработването на версия 5 е на ниво alpha.

Явно слуховете за смъртта на статичните сайтове са силно преувеличени.

В статията ще ви покажем как може да мигрирате свой статичен сайт в ICN.Bg хостинг. Тъй като cPanel е доказан във времето стандарт за управление на хостинг услуги, ще покажем как се архивира статичен Bootstrap 4 сайт в cPanel хостинг и как се премества в нов хостинг, също управляван от cPanel.

Архивиране на статичен HTML сайт

Така изглежда в браузър статичният Bootstrap 4 сайт (за ваши проекти може да ползвате безплатни Bootstrap темплейти от https://startbootstrap.com/):

Влезте във файловия мениджър на хостинга и навигирайте до root директорията на сайта. Маркирайте всички директории и файлове, кликнете с десен бутон в полето и от менюто изберете Compress. Също може да маркирате директориите и файловете и да кликнете бутона Compress в хоризонталната лента с инструменти:

Изберете типа архив като маркирате съответния радио бутон, уверете се, че в списъка Files to compress са описани всички файлове и директории, въведете име на архива (по подразбиране cPanel присвоява името на първата директория) и кликнете бутона Compress File(s):

Затворете панела Compression Results през бутона Close:

Архивният файл webart.tar се добавя в директорията на сайта:

Маркирайте файла и изберете от хоризонталната лента Download или кликнете с десен бутон файла и от менюто изберете Download:

Архивът на сайта се записва в директорията по подразбиране на вашия компютър:

С това приключихте всички действия в стария хостинг.

Конфигуриране на допълнителен домейн в новия хостинг

Сега влезте в cPanel на новия хостинг и първата задача е да конфигурирате домейна. За примера ще сменим домейна на сайта, затова конфигурираме допълнителен домейн webart.studio (сайтовете в примера ги достъпваме със запис в hosts файла към IP адреса на съответния сървър):

Новият домейн е конфигуриран успешно и се добавя в таблицата с домейни:

Кликнете линка с пътя до root директорията, за да влезнете в нея. В директорията може да има само служебни директории cgi-bin (за хостване на изпълними файлове) и .well-known (за инсталиране на SSL сертификати). Кликнете бутона Upload в лентата с инструменти, за да достъпите интерфейса за качване на файлове:

Кликнете бутона Select File и изберете архивния файл (в примера webart.tar). Кликнете линка Go Back..., за да се върнете в директорията.

Ако не виждате файла в директорията, кликнете бутона Reload в лентата с инструменти:

Маркирайте файла, кликнете с десен бутон и изберете Extract от менюто или кликнете в лентата с инструменти Extract:

Потвърдете пътя за разархивиране на файла като кликнете Extract File(s):

Затворете панела Compression Results през бутона Close:

Директориите и файловете на сайта са успешно разархивирани:

Заредете сайта с новия домейн от новия хостинг сървър:

Примерният сайт е от типа one-page-site и се състои само от един index.html файл, но секциите в този сайт може лесно да бъдат превърнати в отделни HTML страници, които да се достъпват през навигационното меню.

Ръчна промяна на домейн името в изходния HTML код

Накрая трябва да отворите всеки HTML файл като го маркирате и кликнете бутона Edit и да замените ръчно всяко място, където е въведено старото домейн име. Натиснете Ctrl+f от клавиатурата, за да се отвори полето за търсене и въведете стария домейн - cPanel ще ви покаже всички записи, които може да достъпите като кликате стрелките.

Въведете внимателно новия домейн, вместо стария, на всички места във всички HTML файлове като запазвате направените промени през бутона Save Changes:

В примерния сайт имаше само един запис в footer секцията, който след редактирането посочва коректно новия домейн на сайта:

Вярваме се убедихте, че мигрирането на статичен сайт е лесна задача. Всичко се свежда до генериране на архив в cPanel, преместване на архива и разархивиране в новия хостинг.

Мигриране на статичен сайт HTML през FTP

В примера използвахме функции на файловия мениджър в cPanel, но сега накратко ще ви покажем и как може да трансферирате статичен сайт с помощта на FTP клиент FileZilla без да се налага да създавате архив на сайта.

Отворете FileZilla, въведете данните за логване в cPanel или данни за логване в FTP акаунт, ако сте създали такъв и навигирайте до директорията на сайта без да влизате в нея (webart.design):

Кликнете с десен бутона на мишката върху името на директорията и в менюто изберете Download, за да я изтеглите на вашия компютър:

Отворете нов таб в FileZilla (Ctrl+t), влезте в новия хостинг и навигирайте до директорията на сайта (_webart) в десния панел на FileZilla. В левия панел Local site отворете директорията, която изтеглихте от стария хостинг (webart.design):

Маркирайте всички директории и файлове, кликнете с десния бутон на мишката върху селекцията и в менюто изберете Upload:

За няколко секунди файловете се качват в директорията на сайта в новия хостинг:

Остава само да заредите сайта и да се уверите, че всички функции работят коректно.