Как загрузить сайт на хостинг? Что такое FTP?

Скачать материалы:

Скачать 7-ой видеоурок по размещению сайта Размер: 44.52 MB, скачали: 380 раз.

В этом уроке мы разберём последний этап размещения сайта в интернете. Это уже, непосредственно загрузка сайта, его файлов, на хостинг, который Вы уже купили. В прошлом уроке мы разбирали регистрацию бонусного домена от Sprinthost.ru. В панели управления хостингом мы можем его проверить, нажав на статус операции с доменами. Видим, что в таблице находится наш домен monetko.com. Он зарегистрирован на персону, которую мы указали, его статус – «Заявка обработана». Достаточно оперативно, всего за 15 минут. Домен monetko.com был автоматически присоединен к хостингу Sprinthost.ru. Мы можем удалить его из сайтов, и присоединить к другому хостингу.
Теперь давайте разберёмся с оплатой хостинга.
Для того, чтобы оплатить хостинг Sprinthost.ru, нужно выбрать вкладку «Оплата». После этого, мы попадаем на страницу «Оплата услуг», где нужно указать, на какую сумму мы хотим пополнить счёт. Мой текущий баланс составляет задолженность в 50 рублей.
Мы можем оплатить услуги на 1, 3, 6 месяцев или год. Тогда сумма рассчитается автоматически. Или же оплатить услуги на период, тогда сумма вводится вручную. Например, я хочу погасить задолженность 50,65 руб. Далее я выбираю нужную платёжную систему. Выбор достаточно широк. Лично я предпочитаю пользоваться Webmoney. На сайте есть уроки по использованию Webmoney. Жму кнопочку «Оплатить через Webmoney», и мы попадаем на страницу оплаты. Теперь необходимо выбрать нужный способ оплаты, через какой именно кипер мы будем оплачивать. У меня стоит Keeper Classic. Внизу жмём «Далее», затем «Продолжить». Вводим код с картинки, жмём «Да». Далее нам нужно выбрать кошелек. Я выбрал первый попавшийся, и жму «Платеж подтверждаю». Итак, оплата в пользу продавца выполнена. Мы можем распечатать квитанцию или вернуться к продавцу. Я жму «Вернуться к продавцу». На сайте продавца, также пишут, что платеж успешно проведен. Давайте вернемся в панель управления. Теперь в балансе круглый нолик, т.е. никакой задолженности нет.
Что такое поддомен?
Поддомен – это домен являющийся частью домена более высокого уровня. Например, у нас имеется сайт info-line.net, поддомен этого домена будет csspage.info-line.net. То есть это домен третьего уровня. Вот это и называется поддоменом. Поддоменом домена третьего уровня будет являться домен четвертого уровня.
Как создать поддомен?
Чтобы с этим разобраться, нужно непосредственно перейти в боевые условия. Снова переходим в панель управления хостингом. Чтобы создать поддомен, выбираем нужный нам сайт. Например, info-line.net. Попадаем на страницу управления этим сайтом. В первой вкладке управления сайтом, видим пункт «Поддомены сайта». В него и заходим. У нас пока что не имеется ни одного домена для этого сайта. Давайте создадим первый, как в примере – csspage.info-line.net. Жмем «Добавить». Происходит обработка запроса, и поддомен добавляется за несколько секунд. Хочу заметить, что поддоменов можно создать сколько угодно, т.к. на тарифе этого неограниченно. Поэтому такие сайты, как Narod.ru, uCoz.ru, предлагают Вам бесплатное размещение на домене 3-го уровня. Иными словами,  это поддомен их домена, которых они могут создать великое множество.
Итак, поддомен у нас создан. Мы можем на него нажать и посмотреть, что сейчас находится на этом поддомене.
При переходе на созданный поддомен, видим табличку, которая информирует нас о том, что «Сайта с таким именем нет на сервере». Это потому что мы не разместили на нём никакой информации. Теперь давайте подумаем, как мы можем избавиться от этих печальных табличек? Естественно, загрузив файлы на наш сайт. Хотя бы один простой файл. Например, index.html, что бы он появлялся вместо этих табличек, сообщающих о том, что на сайте ничего нет.
Как мы можем загрузить эти файлы?
Файлы можно загрузить двумя способами:
1. Первый способ, загрузить их через «Файлы». То есть, непосредственно через веб-соединение, через веб-браузер. Но это не очень удобный вариант. Для одного-двух файлов, данный способ пригоден. А вот если Вам необходимо загрузить большое количество файлов, этот способ не очень удобно использовать.
2. Второй способ. Способ с использованием FTP.
Что такое FTP?
FTP – это протокол, предназначенный для передачи файлов. С помощью специальной программы Вы можете передать свои файлы. Удобно, качественно и быстро. Не боясь, что где-то что-то собьётся на каком-то файле. А потом Вы будете просматривать тысячу файлов, и искать на каком остановились. Здесь всё просто, загруженные файлы Вам покажут, не загруженные тоже покажут, и в 99% случаев FTP Вам поможет.
Что для этого нужно?
1) Во-первых, нужно установить программу FileZilla. Она абсолютно бесплатна, и является одним из самых лучших FTP-клиентов. Ссылку на скачивание программы Вы найдёте чуть ниже данного урока.
2) Готовим данные и создаём FTP-аккаунт.
Обычно, при покупке хостинга, даже не при самой покупке, а просто при регистрации хостинга (даже если Вы заказываете тестовый период), Вам на почту приходят данные о FTP: FTP-сервер, порт FTP, логин FTP и, возможно, придёт пароль. Или придёт ссылка на установление этого пароля самостоятельно. Если всего этого не приходит, Вы в любой момент сами можете создать FTP-аккаунт в панели управления хостингом.
Давайте перейдём в эту панель управления, и выберем сайт, для которого мы хотим создать FTP-аккаунт. Например, monetko.com. Далее во вкладке «Управление сайтом», выбираем ссылку «Управление FTP». То есть, переходим к управлению аккаунтами FTP. Жмём ссылку «Создать аккаунт FTP». Нам предлагают ввести имя пользователя FTP, ввести пароль, повторить пароль. Далее следует выбрать, где будет находиться корневая директория, при входе через этот аккаунт FTP. То есть, откуда будет начинаться доступ. Первый вариант, это корневая директория пользователя, и есть корневая директория домена. Например, если на Вашем хостинге располагаются Ваши сайты и один сайт какого-нибудь там человека, и Вы хотите создать ему FTP-аккаунт. Но хотите, чтобы он имел доступ не ко всем Вашим сайтам, а именно, к своему сайту. Тогда Вы выбираете именно этот вариант. Корневая директория пользователя FTP, является корневой директорией его домена. Он будет иметь доступ к FTP от сайта monetko.com. Затем, у нас «FTP», корневая директория пользователя FTP – это директория public_ftp. Потом идёт корневая директория пользователя в public_html, и ещё в директории с названием имени пользователя. То есть, это ещё глубже, чем первый вариант. Или же, Вы можете указать директорию самостоятельно. Таким образом, Вы дадите ему доступ к той директории, которую укажете сами. После этого, жмёте «Создать», и у Вас будет создан FTP-аккаунт.
Данные от ftp-сервера Вам обязательно дадут. Возможно, порт Вам и не скажут. Обычно это порт 21. И его, иногда, можно не вводить, у Вас и так всё подсоединится.
После того, как мы узнали эти данные, мы переходим в программу FileZilla. Выбираем Файл -> Менеджер сайтов. Далее, создаем новый сайт, его я назвал «info-line и Ко». Вводим хост. Порт вводить не обязательно, но если Вам его дали, то лучше ввести. Выбираем тип входа — «Нормальный». Вводим имя пользователя и пароль. После ввода всех данных жмём «Ok». Затем, выбираем нужный сайт, к которому нужно подсоединиться. И у нас происходит подключение. Справа отображаются файлы и папки на сервере.
Прежде чем бездумно загружать, куда попало, наши сайты, следует разобраться, где какой сайт находится. И где вообще наши сайты находятся, в какой папке. Обычно, эту информацию присылают при регистрации хостинга, Вам на e-mail. Где рассказывают, в какой папке размещать Ваши сайты. Чаще всего это папка «public_html», либо «domians». В нашем случае это «domians». Но вся информация у нас всё равно будет располагаться в папке «public_html», Вы это сейчас поймёте. Мы зашли в папку «domians» и у нас отображаются все созданные нами сайты, это просто папки. Мы входим в папку info-line.net, т.к. сейчас будем работать с поддоменом ccspage.info-line.net. У нас есть тут пять папок, по названию они понятны. Logs – это логи, awstats – это статистика (если она установлена на Вашем сайте). Нам нужно попасть в public_html, как я уже говорил. Открываем эту папку. Именно в этой папке нам нужно будет размещать все файлы нашего сайта. Если у нас имеется поддомен, тогда мы ищем папку с названием этого поддомена. Заходим в папку поддомена, здесь располагается файл index.html, непосредственно сам индексный файл, и папка cgi-bin, эта папка пуста. Поэтому возвращаемся в предыдущую директорию, это мы делаем, нажимая на папку с названием «...». Именно так происходит переход к родительской директории. Мы об этом ещё поговорим.
Пока мы нашли директорию, в которую нужно загружать наши файлы. Давайте подумаем, какие файлы нужно загрузить на наш поддомен csspage.info-line.net. Слева мы открыли директорию «Сайт». Чуть ниже отображаются папки и файлы, находящиеся в этой директории. Давайте откроем папку «Сайт» через проводник, и разберемся, какие файлы нам не нужны. Не нужна нам папка «Расширения и виджеты для Opera», удаляем её. Страница index.html нам тоже не нужна, а вот page.html мы переименуем в index.html. Удалим текстовый файл ссылки.
Давайте по-открываем папки, посмотрим, что в них. Переходим в FileZilla, при помощи иконки «Обновить список каталогов», обновляю список каталогов и файлов. Мы видим, что все эти файлы нам нужно загрузить. Можем изначально удалить файл index.html на сервере, т.к. он нам не нужен. А теперь при помощи левой клавиши мыши и клавиши Shift, выделяем все файлы, или с помощью выделения мышью. Перемещаем их в папку csspage. Внизу у нас отображается сколько файлов мы перемещаем, т.е. файлы в задании. Также у нас отображаются неудавшиеся передачи, и успешные передачи. Пока что, успешных передач у нас 6 штук.
Итак, все файлы у нас были загружены на сервер, спустя одну или две минуты. Неудавшихся передач нет. А если бы они у Вас возникли, то Вам нужно перейти на вкладку неудавшиеся передачи, нажать правой клавишей мыши, и выбрать кнопочку «Reset and requeue all». То есть сбросить все эти файлы, и снова поставить на закачку. Или выделить какие-то файлы, и выбрать «Reset and requeue selected files», т.е. сбросить все выделенные файлы и поставить их на закачку. Давайте теперь, в качестве примера, попробуем загрузить ещё файлы на одну страницу. Только это уже будет не поддомен, а сам домен monetko.com. Соответственно, переходим в папку monetko.com, в которой открываем папку public_html. И первым делом удаляем файл index.php, он нам не нужен. В папке поддмена был файл index.html. Теперь на локальном сайте выбираем папку нужного сайта, это папка monetko.
Прежде чем продолжить, я бы хотел рассказать Вам про то, как прописывать путь к родительской директории. Давайте откроем папку этого сайта, здесь нет ничего сверхъестественного. Здесь два изображения, один индексный файл, который состоит из двух фоновых изображений и текста. В качестве примера, я создал папку example. В которой создал файл example.html. Я открою его с помощью FireFox. Мы видим, что один фон отображается, а второй фон нет. Почему так происходит? Давайте проверим исходный код этого файла. Нажимаем F12, у нас выскакивает FireBug. Жмём head, т.к. я разместил стили в тэге head, чтобы не создавать лишний файл. Видим, что для тэга body у нас создан фон background и указан путь many.jpg (background: url (many.jpeg);). То есть, изображение должно находиться в одной папке с файлом. Но в папке с файлом нужного изображения нет, поэтому оно и не отображается. Второе изображение тоже отсутствует в папке, но у нас прописан к нему путь «.../bg_wrapper.jpg». Путь к родительской директории «...», потом идёт «/», а затем название файла. Таким образом, мы прописали, сначала, возврат к родительской директории (к предыдущей), а потом прописали название файла и его расширение. Именно поэтому, у нас отображается фон для идентификатора wrapper, и не отображается фон для тэга body. Закрываю эти две странички, и удаляю пример.
Перехожу снова в FileZilla, жму «Обновить список файлов». После того, как список файлов обновится, загружаем три файла из папки monetko на сервер. В задании три файла, загрузка происходит мгновенно.
Третий шаг выполнен. Мы загрузили файлы для сайтов csspage.info-line.net и monetko.com на хостинг. Сейчас мы их проверим, а затем, решим проблему с кодировкой, которая может возникнуть у каждого.
Переходим в браузер, вводим название сайта csspage.info-line.net. У нас открывается сайт, который мы с Вами создавали на протяжении всего курса CSS. В принципе, с этим сайтом всё в порядке, конечно можно ещё кнопочку подправить. Как мы видим, никаких проблем с кодировкой не возникло. Теперь давайте проверим второй сайт – monetko.com. Проблем с кодировкой также не выявлено. Давайте их искусственно создадим, чтобы Вы знали, из-за чего они могут появиться. Переходим в папку monetko на локальном хостинге, и редактируем файл index.html. Точнее, не редактируем, а просто изменяем кодировку в программе Notepad, и сохраняем его. Преобразуем этот файл в кодировку ANSI, жмём «Сохранить». Теперь, просто перезагружаем файл index.html на сервер. Жмём «Перезаписать», файл перезаписывается. Обновляем страницу monetko.com, и видим, что у нас возникла проблема с кодировкой. Как Вы поняли, это происходит из-за того, что кодировка, указанная в Notead, не соответствует кодировке на странице. Если мы нажмём F12, откроем раздел head, то увидим, что указана кодировка utf-8. А в программе при кодировании была – ANSI. Поэтому, если возникла такая ошибка, то сразу бегите в программу Notepad, открывайте этот файл и преобразуйте в кодировку utf-8 без BOM. Также следите за тем, чтобы в атрибуте charset тэга meta, также была указана кодировка utf-8. Сохраняйте файл и снова перезагружайте файл на сервер. Эта проблема решается легко, но она может загнать Вас в ступор. Теперь Вы знаете, как её решить.
Проверим снова сайт monetko.com. Всё отлично. При помощи html и css мы создавали эти страницы, теперь мы их разместили в интернете. Я Вас с этим искренне поздравляю. Но на этом курс ещё не заканчивается. Следующий урок будет внеплановым, и будет достаточно интересным.
В следующем уроке:

• Как сделать резервный архив всех данных на старом хостинге
• Как перенести сайт на новый хостинг
• Как прикрепить домен к другому хостинг-провайдеру
• Как перенести домен к другому хостинг-провайдеру

Также Вы поймете отличия прикрепления и переноса, и некоторую другую полезную не анонсированную информацию.
С Вами был Олег Зубцов, сайт info-line.net.
До встречи в следующем уроке!