Быстрый старт. Как установить шаблон на хостинг. Урок 1

Самый частый вопрос, который мне задают после скачивания шаблона, а что делать дальше? Можно бесконечно рассуждать о натяжке шаблона на CMS, разработке функционала, back-end разработке, но многим это неинтересно, а результат получить хочется здесь и сейчас. Всегда можно попробовать собрать свой первый лендинг на Tilda или даже с помощью VK, сейчас и такое возможно, но мы пойдем другим путем, чтобы подготовить почву для более глубоких знаний, а может и будущей профессии.

Поехали!

Отмечу, что такой способ я считаю приемлемым только для посадочных страниц, собрать на нем интернет-магазин, полноценный информационный или коммерческий сайт не то что невозможно, но очень не здраво. Т.к. мы не будем создавать базу данных и работать с ней, не будет делать функционал для нормального администрирования и поддержки, а просто зальем наши файлы на хостинг и внесем ряд изменений, нужных нам для дальнейшего существования ресурса

Шаг 1. Скачиваем шаблон, покупаем хостинг

Думаю, со скачиванием шаблона даже с данного ресурса, все прекрасно разберутся. Мы получим архив с набором файлов .html и папок (css, images, js, fonts и т.д.). Сильно ковыряться и разбираться в архиве нам пока не нужно. Но кратко можно рассказать о назначении каждой составляющей.

• Файлы .html содержат в себе разметку типовых страниц ресурса (Главная, страница услуги, блога, контакты)

• Папка images хранит в себе изображения для нашего будущего сайта

• Папка fonts хранит файлы шрифтов, используемых в шаблоне

• Папка css содержит файлы формата .css, которые описывают внешний вид нашего документа с помощью специального языка. Там задаются цвета, формы, стили и размеры шрифтов, организация структуры и даже адаптация под мобильные устройства

• Папка js содержит файлы с расширением .js, где с помощью специального языка программирования заданы последовательности действий, которые будут приводить к определенным результатам на сайте. Постаралась максимально просто объяснить назначение файлов

Данные файлы и папки присутствуют в каждом архиве с шаблонами. Т.к. наш сайт посвящен исключительно html-шаблонам, они имеют определенную внутреннюю организацию.

Не путать с шаблонами для Wordpress, там совсем другие системные файлы и папки, необходимые для конкретной системы управления.

Наши шаблоны, проще говоря, являются готовой версткой. Скачивая такой шаблон, вы не платите деньги дизайнеру и верстальщику, а уже получаете готовый проект, который можно использовать для будущего ресурса. 

Шаблон мы скачали, далее покупаем хостинг. Я 7 лет занимаюсь web-разработкой, переработала с кучей провайдеров, но для меня фаворитом был и остается Timeweb. 

Регистрируемся здесь

1. Выбираем нужный тариф хостинга (Хостинг -> Виртуальный хостинг)

2. На этом этапе можно остановиться на тарифе для одного сайта Year+, либо выбрать более расширенные тарифы для 10 и более сайтов. Например, мы выбрали тариф для 1 сайта, Нажимаем начать бесплатно и регистрируемся

3. После регистрации мы попадаем в панель управления хостингом, пароль от ЛК придет на указанную при регистрации почту.

Шаг 2. Загрузка файлов шаблона, доступ по FTP Timeweb

У хостинга Timeweb есть бесплатный 10-дневный период, за время которого вы сможете воспользоваться всеми возможностями. Только в тестовый период не работает отправка писем с сайта, имейте это в виду. Для дальнейшего использования нужно будет оплатить услуги, при оплате на год вперед домен в зоне .ru, .рф и некоторых других будет предоставлен в подарок, что очень приятно

Перейдем к загрузке файлов шаблона. Выберете пункт в левой части панели Файловый менеджер, там вы увидете корневую папку нашего единственного сайта public_html, Вы можете воспользоваться стандартной загрузкой, но я вам такой способ не рекомендую.

Как только вы посмотрели, как выглядит наша папка, скачайте FTP-клиент, например FileZilla или воспользуйтесь Total Commander. С помощью этих программ гораздо легче работать с файловой структурой сайтов. После скачивания откройте клиент и в строке с подключением внесите нужный данные вашего хостинга.

Данные можно посмотреть на главной странице личного кабинета Timeweb https://hosting.timeweb.ru/ в блоке Доступ по FTP. Берем оттуда хост и логин, пароль пришел вам на почту, он такой же, как и пароль от вашего ЛК

В поле порт FTP-клиента пишем либо 21, либо оставляем его пустым. После успешного подключения видим папку public_html, открываем ее и первым делом удаляем системный файл (index.htm) хостинга, который заменяет главную

В результате после загрузки файлов мы видим примерно следующее.

Шаг 3. Просмотр полученного сайта, покупка домена

Теперь посмотрим, что у нас получилось. Я для примера и демонстрации скачала шаблон Aspiration . Это не совсем лендинг, но мы превратим его в лендинг чуть позже. Переходим в раздел сайты и выбираем тестовый домен рядом с директорией Основной сайт

1. По полученной ссылке мы увидим загруженный шаблон

2. Теперь купим домен и привяжем его к сайту, лучше, конечно, хостинг тоже оплатить. Переходим в раздел Купить домен, подбираем нужный, нажимаем Зарегистрировать

3. После регистрации отвяжем тестовый домен и привяжем новый. Сайт будет доступен по новому доменному имени. Иногда на это требуется небольшое время, потому что в процессе регистрации доменов меняются или присваиваются специальные системные DNS-записи. Обычно этт процесс занимает от 5 минут, но иногда затягивается и на несколько часов.

4. Далее мы выпустим SSl-сертификат для нашего сайта, он гарантирует безопасное соединение и подлинность нашего ресурса. Сайты без протокола https:// выводятся со специальным предупреждением об отсутствии сертификата и плохо воспринимаются поисковыми система Для выпуска сертификата перейдем в раздел SSL-сертификаты->Магазин сертификатов->Выбираем бесплатный на 3 месяца, нажимаем Заказать. Далее в списке доменов выбираем наш домен.

5. Ждем установки сертификата, она тоже занимает некоторое время, иногда 30-60 минут, и включаем перенаправление с протокола http на протокол https, чтобы наш сайт не был доступен по версии без сертификата. Переходим в сайты и нажимаем шестеренку рядом с нужным ресурсом

6. В открывшимся окне выбираем нужные перенаправления. Дополнительно я выбираю перенаправление с www на без www.

На этом наш первый урок закончен. Мы научились регистрировать хостинг и домен, размещать файлы сайта на хостинге, узнали о подключение с помощью FTP-клиента, узнали о выпуске сертификатов и перенаправлениях. В следующих статьях я расскажу о модификации шаблона под себя, основных тегах лендинга и многом другом.