Загрузить html на хостинг

Как сверстать, если никогда не верстал

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

Предположим, что в конце последнего совета у нас получилась такая страница‑визитка — файл index.html с разметкой и стилями:

Как страница попадает в интернет

Страницу можно открыть на своём компьютере, если перетянуть ‑файл в браузер.

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

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

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

Аренда сервера

Услугу по аренде сервера называют хостингом. Видов хостингов много, они отличаются ценами и специализацией: кто‑то сдаёт простые сервера для несложных сайтов, а кто‑то предлагает мощные серверные кластеры для огромных проектов.

Для размещения нашей страницы подойдёт самый простой хостинг. Стоит выбрать что‑то недорогое, без переплаты за избыточные мощности и с удобным понятным интерфейсом.

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

Популярные и зарекомендовавшие себя в рунете хостинги — Рег.ру, Таймвеб и Бегет.

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

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

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

Сначала регистрируемся, ищем в меню «Виртуальный хостинг», выбираем самый простой тариф:

У крупных хостингов обычно есть бесплатный пробный период

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

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

На одном арендованном хостинге можно разместить несколько своих сайтов, если позволяет тариф

В разделе «Сайты» добавляем сайт. Сайт в терминах хостинга — это, условно, выделенное в памяти место с файлами, данными и уникальным адресом. Адрес сайта называют доменом и на этом шаге он может выглядеть сложно и непонятно, чуть позже мы приведём его в порядок.

В Таймвебе первый сайт создаётся сам при регистрации, ничего добавлять не надо:

Наконец, в разделе «Файловый менеджер» загрузим файл нашей страницы в папку сайта.

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

В зависимости от хостинга, названия папок для загрузки файла могут быть public_html или www. Эти папки могут находиться сразу в файловом менеджере или в папке с названием сайта. Если в нужной папке уже лежит файл с названием index, его нужно удалить.

Адрес сайта

На один сайт может вести сколько угодно доменов

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

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

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

Цена аренды зависит от доменной зоны — текста после точки в адресе. Адрес в распространённой русской зоне .ru обойдётся дешевле, чем в более солидной коммерческой зоне .com и гораздо дешевле, чем в экстравагантной зоне .xxx.

Домены удобно арендовать у той же компании, что и хостинг. В Таймвебе купить домен можно во вкладке «Домены и поддомены», кнопкой «Зарегистрировать домен»:

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

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

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

Когда домен подобран и оплачен, его привязывают к сайту через раздел «Сайты» в панели управления. Вскоре после привязки, сайт начнёт открываться по нужному домену.

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

Мы хотим сделать сайт и опубликовать его в интернете. К этому моменту мы уже:

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

В чём суть этого процесса:

Разберём это по частям.

Настройка хостинга

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

Все настройки хостинга делаются в панели управления. Иногда она оплачивается отдельно, иногда входит в стоимость хостинга. У SpaceWeb она бесплатная, ключи от неё приходят на почту после регистрации хостинга. Выглядит она так:

Нас интересует вкладка «Домены» — именно там делается привязка домена к хостингу. Заходим туда и выбираем «Добавить домен». В поле вводим имя нашего зарегистрированного ранее домена. Эта запись скажет хостингу: «Когда тебе придёт запрос по этому домену, обслужи его»:

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

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

Настройка домена

Мы научили хостинг принимать запросы по адресу mihailmaximov.ru. Но мы не научили DNS-серверы в интернете отправлять эти запросы на наш хостинг.

Чтобы это произошло, мы должны распространить по интернету новость: «Всем DNS-серверам! Если вам придёт запрос на mihailmaximov.ru, отправляйте его на spaceweb!». Эту рассылку за нас сделает наш регистратор доменов reg.ru — нужно лишь дать ему задание.

Заходим в раздел помощи нашего хостинга и узнаём там, что для направления на него доменов нужно указать такие адреса:

Переходим в личный кабинет регистратора, выбираем домен mihailmaximov.ru, заходим в редактирование DNS-серверов и прописываем там эти адреса:

Обновление данных DNS может длиться от нескольких часов до пары суток — за это время интернет облетает информация, что у вашего домена новый хостинг. Пока записи не обновились, сайт mihailmaximov.ru будет выглядеть так:

Отправляем файл на хостинг

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

В панели управления хостинга выбираем раздел «Домены», там находим домен mihailmaximov.ru и нажимаем на значок папки рядом с ним. Папка — это файловый менеджер, мы как бы открываем виртуальный диск с нашим сайтом:

Несмотря на то, что сайт мы только создали, там уже что-то лежит. Разберёмся:

Папка cgi-bin — это папка для выполнения скриптов, написанных на языках Perl, C и shell. У нас таких скриптов на сайте нет, поэтому эту папку мы не трогаем.

Файл .htaccess — это файл для локальной настройки веб-сервера, то есть той программы, которая отдаёт нам сайт. С помощью этого файла можно защитить папки паролем, добавить переадресации, хитрым образом видоизменять запросы — как-нибудь напишем об этом подробно.

index.html — это документ, который веб-сервер считает корневым, как бы «нулевой километр» нашего сайта. Если запросить сайт mihailmaximov.ru, то веб-сервер найдёт в корневой папке index.html и отдаст его содержимое.

Сейчас в файле index.html лежит стандартный приветственный текст от хостинга, и он нам не нужен. Удалим его. Отмечаем этот файл галочкой и нажимаем вверху «Удалить».

Осталось закачать вместо него то, что нам нужно.

Когда DNS-записи обновятся, все увидят, что находится по адресу mihailmaximov.ru, Всё, сайт готов:

Что дальше

Сейчас наш сайт — это одна страничка в сети, и есть множество способов его улучшить:

Всё это мы постепенно сделаем и поделимся с вами. Не переключайтесь.

Как загрузить файлы на веб-сервер

Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools).

Сводка

Если вы создали простую веб-страницу (для примера смотрите Основы HTML), вы, вероятно, захотите отобразить её онлайн, на веб-сервере. В данной статье мы обсудим как сделать это, используя различные доступные настройки, такие как SFTP клиенты, RSync и GitHub.

SFTP (Безопасный Протокол Передачи Файлов)

Существуют различные варианты SFTP клиентов. В нашем примере мы будем использовать FileZilla, тк он бесплатен и подходит для Windows, macOS и Linux. Чтобы установить менеджер перейдите на страницу загрузки FileZilla downloads page, нажмите на кнопку загрузки, затем установите пакет из установочного файла обычным способом.

Примечание: Конечно, есть много других вариантов. Смотрите Publishing tools для других способов.

Откройте приложение FileZilla; вы должны увидеть что-то вроде этого:

Вход в систему

В этом примере мы предположим, что наш хостинг-провайдер (сервис, на котором находится наш HTTP веб сервер) является фиктивной компанией «Example Hosting Provider», чьи URL адреса выглядят следующим образом: mypersonalwebsite.examplehostingprovider.net.

Сейчас мы создали аккаунт и получили от хостинг-провайдера следующую информацию:

Поздравляем с созданием аккаунта на сервисе «Example Hosting Provider».

Ваш аккаунт: demozilla

Ваш сайт доступен по адресу:

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

Давайте сначала посмотрим на http://demozilla.examplehostingprovider.net/ — как вы можете видеть, то здесь пока ничего нет:

Чтобы подключить SFTP клиент к удалённому серверу, выполните следующие действия:

Ваше окно должно выглядеть как показано ниже:

Теперь нажмите Connect для подключения к SFTP-серверу.

Примечание: Убедитесь, что ваш хостинг-провайдер предлагает SFTP (безопасный FTP) подключение к вашему хостинговому пространству. F TP по своей сути небезопасен, и вам не следует его использовать.

Локальный и удалённый просмотр

После подключения ваш экран должен выглядеть примерно так (мы подключились к нашему собственному примеру, чтобы дать вам представление):

Давайте посмотрим, что вы видите:

Загрузка на сервер

Наш пример инструкций для хостинга указывает нам следующее: «Чтобы опубликовать в Интернете, поместите свои файлы в каталог: Public/htdocs.» Вам нужно перейти в указанный каталог на правой панели. Этот каталог фактически является корнем вашего веб-сайта, где находятся ваши index.html , откуда ваши файл и другие активы будут отправлены.

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

Как узнать, что они online?

Пока все хорошо, но действительно ли файлы в сети? Вы можете перепроверить, перейдя на ваш сайт (например, http://demozilla.examplehostingprovider.net/) в вашем браузере:

И вуаля! Наш сайт работает!

Rsync

Rsync (en-US) is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.

It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:

You’d need to get such details from your hosting provider.

Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the -e option. For example:

Rsync GUI tools

As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. Acrosync is one such tool, and it is available for Windows and macOS.

Again, you would have to get the connection credentials from your hosting provider, but this way you’d have a GUI to enter them in.

GitHub

GitHub allows you to publish websites via GitHub pages (gh-pages).

We’ve covered the basics of using this in the Publishing your website article from our Getting started with the Web guide, so we aren’t going to repeat it all here.

However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See Using a custom domain with GitHub Pages for a detailed guide.

Other methods to upload files

The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:

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

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

А зачем мне мой сайт, если есть соцсети?

Вот четыре случая:

Главные термины для тех, кто хочет сделать собственный сайт

Сайт — если просто, это «место» в интернете. Есть некий адрес, на который можно сделать запрос и получить ответ в виде веб-страницы. Получается, что сайт — это техническая сущность, которая позволяет это сделать.

Хостинг-провайдер (хостер) — компания, которая оказывает вам услугу хранения вашего сайта на своих серверах.

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

Домен (доменное имя) — это текстовый адрес вашего сайта, например mihailmaximov.ru.

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

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

Шаг 1. Регистрация и оплата

Заходим на страницу с тарифами на хостинг и выбираем самый простой вариант — этого хватит с запасом для начала:

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

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

Нажимаем «Заполнить реквизиты» и вводим свои данные

Шаг 2. Выбор домена

Домен — это имя сайта в интернете, например yandex.ru или thecode.media. Если мы делаем личный сайт, в качестве доменного имени можно использовать имя и фамилию, например ilya-maximov.ru.

Для регистрации переходим в раздел «Домены» и нажимаем кнопку «Регистрировать домен»:

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

На финальном шаге нужно указать, на кого будет зарегистрирован домен, — тут нам пригодятся те сведения о себе, которые мы указали раньше. Ещё выбираем в технических настройках пункт «Создать новый сайт» и придумываем имя для папки, где он будет храниться. На адресе это не отразится — это внутренняя настройка для удобства администрирования. Когда всё заполнено — жмём «Зарегистрировать»:

Через несколько минут домен появится в списке активных — это значит, что можно переходить к настройке и установке Вордпресса:

Шаг 3. Установка Вордпресса

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

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

Для установки Вордпресса переходим в раздел «Сайты», находим только что созданный и в блоке «Программы» нажимаем «Установить»:

Попадаем в раздел с выбором программ — нас интересует самая первая, Вордпресс. Нажимаем «Установить» здесь и на следующем экране:

Сразу запустится стандартный процесс установки — у нас спросят название сайта, пароль и почтовый адрес для восстановления доступа, если что-то пойдёт не так. Вводим свои данные и нажимаем «Установить WordPress»:

Шаг 4. Ждём

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

Когда новость долетит, вы сможете открыть в браузере новый адрес и увидите работающий сайт со стандартным контентом. Это значит, что всё работает, — поздравляем, вы только что запустили с нуля свой сайт!

Это всё?

Технически — почти всё. Можно ещё установить сертификат для шифрования соединения, но это в другой раз.

А дальше начнётся работа по наполнению сайта, это уже вам виднее.