Как можно опубликовать сайт

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

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

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

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

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

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

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

Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(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. В случае Rsync вы указываете данные SSH, чтобы установить соединение через SSH, используя параметр -e. Например:

Инструменты графического интерфейса Rsync

Как и в случае с другими инструментами командной строки, для Rsync также существуют инструменты с графическим интерфейсом для тех, кому неудобно пользоваться командной строкой. Acrosync — один из таких инструментов, и он доступен для Windows и macOS.

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

GitHub

GitHub позволяет публиковать веб-сайты через страницы GitHub (gh-страницы).

Мы рассмотрели основы использования этого в статье «Публикация вашего веб-сайта» из нашего руководства «Начало работы в Интернете», поэтому мы не будем повторять все это здесь.

Однако стоит знать, что вы также можете разместить веб-сайт на GitHub, но использовать с ним собственный домен. Подробное руководство см. в разделе Использование личного домена с GitHub Pages.

Другие способы загрузки файлов

Протокол FTP является одним из известных методов публикации веб-сайта, но не единственным. Вот еще несколько вариантов:

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

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

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

Как увидеть страницу в интернете

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

. Такой компьютер называется сервером.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Адрес сайта

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

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

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

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

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

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

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

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

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

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

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

Публикация вашего веб-сайта

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

Какие существуют варианты?

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

Получение хостинга и доменного имени

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

Множество профессиональных веб-сайтов располагается в Интернете именно таким образом.

Советы по поиску хостингов и доменов

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

Использование облачных IDE, таких как CodePen

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

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

Публикация с помощью GitHub

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

Основная настройка

Нажмите Create repository и вы окажетесь на следующей странице:

Загрузка ваших файлов на GitHub

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

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

У всех операционных систем есть командная строка:

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

Дальнейшее изучение GitHub

Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:

git add —all
git commit -m ‘another commit’
git push

Вы можете заменить another commit более подходящим сообщением, описывающим какие изменения вы только что сделали.

Заключение

К этому моменту, у вас должен быть собственный пример веб-сайта, доступный по уникальному веб-адресу. Отлично!

Дальнейшее чтение

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

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

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

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

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

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

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

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

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

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

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

Что дальше

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

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

Это всё?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 4. Ждём

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

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

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

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

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

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

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

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