03.05.2017   2646
Как выложить сайт в Интернет: загрузка на хостинг

Как выложить сайт в Интернет: простая инструкция

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

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

Начнём с того, что нам для начала нужно понять, как вообще работают сайты. Что происходит с того момента, как Вы вводите в адресную строку yandex.ru, и до момента, когда Вы видите главную страницу Яндекса.

Происходит следующее – когда вы пишите в адресной строке доменное имя – yandex.ru и нажимаете Enter, Ваш компьютер обращается к специальным DNS-серверам в Интернете, с запросом найти для этого доменного имени IP-адрес. Эти DNS-сервера содержат записи, по которым можно найти связь между доменным именем и IP-адресом, на который оно указывает. Этот IP-адрес в большинстве случаев принадлежит хостингу.

Определение IP-адреса для домена с помощью DNS

Так вот после того, как этот IP-адрес для домена определён, на него отправляется запрос по протоколу HTTP. И если на хостинге для этого доменного имени имеются настройки, то хостинг отдаёт результат в виде HTML-кода, который приходит в браузер.

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

Данный процесс можно исследовать с помощью инструментов разработчика в Google Chrome (смотрите видео).

Итак, разобрались с тем, что такое доменное имя и хостинг. Давайте теперь поговорим о том, где всё это взять, и о том, как всё настроить.

И домены и хостинг приобретаются у специальных провайдеров. Один из таких – Макхост. Проект webshake.ru размещён именно у этого провайдера, и я очень доволен качеством обслуживания. Сегодняшний урок будем проводить именно на примере заказа домена и хостинга у данного провайдера. Тем более, что ребята из этого сервиса специально для Вас, пользователей webshake.ru согласились предоставить 3 месяца хостинга и доменное имя в зоне .ru или .рф совершенно бесплатно. Так что можете попробовать бесплатно – совершенно ничего не теряете. Подробнее о том, как получить халяву, читайте здесь - https://webshake.ru/post/729

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

Покупка хостинга и домена

Итак, заходим на страницу услуг хостинга https://mchost.ru/services/virtual-hosting/, выбираем понравившийся тариф и жмём "Заказать".

Лично мне за глаза хватает тарифа Мак-10, на котором я размещаю 3 сайта, включая вебшейк.

И в следующем окне вводим свой email, а ещё можно тут же ввести промокод WEBSHAKERU и получить 3 месяца хостинга и домен в подарок. Подробности тут.

Жмём далее. Убеждаемся в том, что выбран нужный тариф, и указываем срок, на который хотим заказать услугу. Здесь же указываем доменное имя, которое хотим зарегистрировать. Я выбрал в качестве примера домен bestbooksforprogrammers.ru. Поиск хорошего доменного имени - отдельная тема, так как очень многие красивые домены заняты. Если интересно - погуглите на тему "подбор доменного имени".

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

Собственно, чего ждём? Входим в панель управления с полученными данными.
Входим, и видим, что для активации аккаунта нужно пополнить баланс.

Жмякаем на оплату, и видим, что доступны несколько способов оплаты. При этом на некоторые из них распространяется бонус в виде нескольких процентов от суммы на баланс. Мелочь, а приятно.

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

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

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

После заполнения жмём "Сохранить персону". В почте читаем о том, что домен будет зарегистрирован в течение двух рабочих дней.

Если сейчас зайти в меню "сайты", то увидим, что домен регистрируется.

Ждём, в моём случае прошло где-то 6 часов. Сайт сменил статус на "активен".

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

Загрузка сайта на хостинг

Теперь нам нужно закачать наш сайт на хостинг. Делается это по специальному протоколу для передачи файлов - FTP (File Transfer Protocol). Для этого используются специальные программы, которые называются FTP-клиенты. Одна из таких бесплатных программ - FileZilla. Скачать - тут. После того как программа установится, можно подключаться к хостингу и работать с файлами. Для этого нужно взять данные для FTP из письма, присланного Вам на почту:

И забить их в настройки программы и нажать кнопочку "Быстрое соединение":

После этого в правой вкладке откроется структура папок хостинга. Вас здесь интересует папка httpdocs

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

Это нормально, ведь сейчас просто нечего показывать.
Давайте теперь просто перетащим туда файлы нашего сайтика, которые мы подготовили в предыдущем уроке.

На сайте, если не указан путь до конкретной странички, будет открываться файл index.html.
Давайте теперь обновим вкладку с нашим сайтом и увидим, что открылись написанные нами странички:

Успех, наш сайт в Интернете! С чем я Вас и поздравляю.

Друзья, надеюсь этот урок был полезен для Вас, как и весь курс. Эти уроки всегда будут бесплатными и доступными всем желающим. Пожалуйста, если Вас не затруднит, поделитесь этим курсом в социальных сетях, или же просто расскажите своим друзьям, если они интересуются темой IT. Буду Вам очень благодарен. Сейчас буду делать курс по PHP, после него - ещё что-нибудь полезное буду делать. В общем, следите за обновлениями, подписывайтесь на канал на YouTube, следите за новостями в соц. сетях (ссылочки в шапке сайта).

Всем всего хорошего!

КОММЕНТАРИИ

 iost 2017-05-26 14:25:42
0

Последний штрих для моего личного блога. Думал, что уйдет много денег, оказалось, что не потратил не копейки! Три месяца бесплатного хостинга, причем очень хорошего хостинга! Огромное благодарю автору))

Ответить
 sergasia2 2017-05-26 15:04:19
0

Спасибо вам за ваш труд. Столько нужной информации. Мне очень понравилось что все изложено четко и кратко. Давно искала такую информацию.

Ответить
 maxixuva 2017-05-26 17:36:39
0

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

Ответить
  •  ivashkevich 2017-05-26 21:07:15
    0

    Здравствуйте! Да, Вы можете просто загрузить файлы на хостинг, а позже прикрутить домен. Посмотрите видео к этому уроку, я тут на примере хостинга "Макхост" объясняю, для наших пользователей есть акция - 3 месяца хостинга и домен бесплатно. Подробности акции - https://webshake.ru/post/729

    Ответить
 milan95 2017-08-21 12:36:16
+2

Спасибо, очень полезный и интересный курс)

Ответить
 ol 2017-09-02 20:31:14
+1

Благодарю за курс!

Ответить
 Nikita1994 2017-09-08 17:33:55
+2

Большое спасибо за курс! Всего 3 дня по 4 часа - и важный навык в кармане. Попробую пойти дальше и начну изучение PHP.

Ответить
  •  ivashkevich 2017-09-10 14:40:03
    0

    Поздравляю с прохождением! Удачи в дальнейшем изучении! =)

    Ответить
 ol 2017-09-21 06:46:38
0

Не так давно прошёл данный Курс, решил выложить сайт на обозрение) http://aroma.onhh.ru. Добавлены страницы "О нас" и "Контакты", добавлен фавикон, изменен фон. Сейчас прохожу Курс по PHP.

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности