Здравствуйте, уважаемый посетитель!

Сегодня файлы сайта, находящиеся на локальном компьютере, мы перенесем на хостинг, и таким образом разместим сайт в сети Интернет.

Причем сделаем это с использованием специального программного средства "FileZilla". Которое является достаточно удобным инструментом, позволяющим оперировать с файлами так же просто, как это обычно делается на компьютере.

В связи с чем мы здесь также затронем и вопрос установки данного FTP клиента.

• Способы переноса файлов на хостинг
• Устанавливаем FTP клиент 'FileZilla'
• Подключаемся к удаленному серверу
• Переносим файлы сайта на хостинг
• Проверяем работу сайта
• Исходные файлы сайта

Для того, чтобы загружать файлы на хостинг существуют два основных способа. Один с помощью инструментов панели управления сайтом (в данном случае у Хостия это называется "Менеджер файлов"). И второй способ - использование специальных программных средств, так называемых FTP клиентов, работающих по протоколу FTP.

Оба этих способа позволяют выполнять все необходимы действия с файлами. Однако, у них имеются и свои особенности.

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

Однако, очень часто при работе с сайтом нужно оперировать с небольшим количеством файлов, например при обновлениях, которые производятся периодически. И вот в этих случаях удобней пользоваться FTP клиентом.

В качестве FTP клиента здесь будем говорить о программе "FileZilla". Это бесплатный, наиболее популярный инструмент, который позволяет оперировать с файлами так же просто, как это обычно делается на компьютере. Поэтому, в повседневной жизни для работы с сайтом обычно используется такой инструмент.

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

Из всего этого можно сказать, что оба способа хороши по-своему. Один для одних действий, другой для других.

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

Установка FileZilla очень простая.

После скачивания файла, соответствующего конфигурации компьютера запускаем его (при скачивании архивированного файла предварительно его разархивируем). А далее, на всех этапах соглашаемся с настройками по умолчанию, и таким образом производим установку. Поэтому тратить время на подробное рассмотрение инсталляции здесь не будем, а лучше сосредоточимся на вопросах работы с этой программой.

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

Нажмем "ОК" и немного рассмотрим, что из себя представляет интерфейс программы.

Рабочее окно FileZilla, как показано на рис.3 разделено на несколько частей. В верхней части выводятся команды протокола обмена между локальным компьютером и удаленным сервером, размещенным на хостинге.

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

А средняя часть предназначена для отображения структуры каталогов, размещенных как на локальном компьютере, так и на удаленном сервере. Для этого она разделена на две области, левую и правую. В левой показывается содержимое локального компьютера, а правая часть это то, что находится на сервере. И такое представление позволяет наглядно видеть все элементы, с которыми требуется выполнять какие-либо действия.

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

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

Для этого сначала через меню файл следует открыть панель менеджер сайтов. Далее, в открывшемся окне, на вкладке "Общие" нужно добавить новый профиль, ввести имя FTP-сервера (Хост), а также указать параметры входа, как это показано на скриншоте.

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

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

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

Кроме того, для удобства в работе, чтобы при каждом соединении с сервером окна FTP-клинта открывались сразу в корневых каталогах, можно на панели "Менеджер сайтов" на вкладке "Дополнительно", в качестве настроек по умолчанию, указать пути к локальному и удаленному каталогу.

Для локального компьютера это будет папка "www" локального веб-сервера, а для удаленного сервера - это папка для загрузки файлов, указанная в полученном письме (рис.5).

Данные настройки каталогов по умолчанию показаны на скриншоте.

И теперь, после добавления профиля, мы может выполнить соединение с сервером. Для этого нужно на панели "Менеджер сайтов" нажать кнопку "Соединиться" (рис.4,5). После этого откроется содержимое корневых папок на локальном компьютере и на удаленном сервере.

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

Для того, чтобы перенести файлы на удаленный сервер сначала очистим в нем корневой каталог, которым является папка "public_html".

Это делается аналогично обычным действиям на компьютере, т.е. выделяем и удаляем.

На хостинг будем закачивать файлы последней версии, которые были получены в статье Добавляем новые страницы динамического сайта. Они сейчас у нас должны находиться на локальном сервере "newsite.local".

Теперь, на стороне локального компьютера выделим все файлы корневой папки "www", откроем правой кнопкой мышки всплывающее меню и в нем щелкнем левой кнопкой мышки по "Закачать на сервер", как показано на скриншоте.

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

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

В нижней области можно посмотреть информацию о переданных файлах, включающую результат передачи (успешно или не успешно), направление передачи, время и объем файлов.

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

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

Сначала попробуем это сделать для основного домена. Проверим, не заработал ли он, пока мы грузили файлы на хостинг. Введем в адресную строку "avtobezugona.ru".

Как видим основной домен пока не доступен. Введем теперь в адресную строку имя технического домена "http://avtobezugona.ru.s25.hhos.ru/" и обновим браузер.

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

Но для того, чтобы более объективно проверить его работу, выполним две проверки, в одной проверим код статуса HTTP, а во второй определим время загрузки.

Для этого воспользуемся одним из сервисов по анализу сайтов "Mainspy.ru". В начале проверим ответ сервера.

Как видно из скриншота, получен код статуса HTTP "200 OK", что является нормой для работающего сайта.

Теперь посмотрим на время загрузки.

Время загрузки составляет всего 0,07с (70мс), что является довольно хорошим показателем.

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

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

Поэтому, в данном случае, за это время заменим в шапке сайта его название, так как на этапе выбора домена он приобрел название "Авто без угона". А затем через некоторое время снова проверим его работу с основным доменом.

Теперь снова проведем проверки, которые до этого делались с техническим доменом, и убедимся, что все нас устраивает.

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

В итоге, мы добились своей цели, разместили сайт во всемирной паутине, и теперь он всем стал доступен.

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

Можно для этого использовать файл "robots.txt", но мы сейчас сделаем это более простым и надежным способом, а именно: дополним заголовки head страниц следующим метатегом.

В дальнейшем, по мере наполнения страниц, будем их открывать. Также пропишем правила для поисковых систем в файле "robots.txt". А сейчас этого будет вполне достаточно.

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

В следующих статьях мы станем наполнять сайт нужным для его работы функционалом. И первым делом дополним его ротатором (слайдером), чтобы немного оживить и, конечно, создадим фавикон, который будет помогать отличать его от других.

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

При желании можно подписаться на получение уведомлений об обновлении блога.

И в завершении.

Хотя в этой статье в исходных файлах сайта почти ничего не менялось (в HTML-код страниц был добавлен лишь один указанный выше метатег), все равно внизу страницы снова привожу ссылку на скачивание дополнительных материалов.

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

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