Как запустить сайт html в интернет с компьютера

Обновлено: 01.07.2024

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

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

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

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

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

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

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

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

Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имён, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его.
Ваш домашний или рабочий Интернет-провайдер может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов - свяжитесь с ними и узнайте!
Также есть несколько бесплатных сервисов, таких как Neocities, Blogspot, и Wordpress. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов - вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.
Иногда компании предлагают одновременно и хостинг и домен.

Использование онлайн инструментов, таких как GitHub или Google App Engine

Некоторые сервисы позволяют вам опубликовать сайт:

- это "социальная сеть программистов". С помощью неё можно загружать репозитории с вашими разработками для хранения в Git - систему контроля версий. По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная система контроля версий — большинство компаний сейчас использует её для работы. GitHub имеет очень полезную функцию GitHub pages, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете. - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google — нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. Смотрите как разместить ваш веб-сайт на Google App Engine чтобы узнать больше информации.

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

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

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

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

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

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

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

На этой странице, в поле Repository name, введите username.github.io, где username это ваше имя пользователя. Так, например, наш друг valerii15298 введёт valerii15298.github.io.

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

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

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

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

Windows: Командная строка. Чтобы открыть её нажмите клавишу Windows, затем введите Командная строка в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
OS X: Terminal можно найти в Приложения > Утилиты.
Linux: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите Терминал в панели приложений или меню.

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

Примечание: Если вы застряли, GitHub Pages homepage будет очень полезна для вас.

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

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

Мы едва затронули Git. Чтобы узнать больше, начните с GitHub Help site.

Заключение

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

Обязательные условия

Хорошее интернет-соединение

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

На одного пользователя, как правило, требуется приблизительно 50 кб/с. То есть тариф со скоростью отдачи в 5 Мб/с сможет обеспечить нормальный доступ к сайту одновременно 100 посетителям. При большем количестве посетителей увеличится время ожидания загрузки, из-за чего многие из них попросту откажутся от идеи посетить ваш сайт.

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

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

Большой объем физической памяти

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

Статический IP адрес

Ещё отмечу то, что вам потребуется получить сведения о собственном статическом IP-адресе. Он помогает организовывать собственный сервер с постоянным адресом и обеспечивать удалённый доступ к персональному компьютеру и прочим интерфейсам (камерам видеонаблюдения, к примеру). Получить все необходимые сведения можно посредством обращения к своему интернет-провайдеру.

Алгоритм запуска сайта на своём компьютере

Удостоверившись в том, что у вас есть все необходимые для поддержки ресурсы, вы можете приступать к запуску. Я покажу на примере программного обеспечения Open Server. Оно полостью бесплатное, однако за любое денежное пожертвование его можно скачать быстрее. Open Server представляет собой серверную платформу, разработанную специально для использования веб-мастерами. Благодаря ей можно избежать необходимости вручную скачивать и устанавливать целый перечень дополнительных программ по типу php, apache, MySql и так далее.

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

Отмечу, что помимо Open Server существуют и другие пакеты, к примеру – Denver, или xampp. Однако они работают хуже рассматриваемого ПО, поэтому я отдаю предпочтение именно ему.

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

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

После загрузки нужно установить программу. Размещать её следует непосредственно в корне диска, а не в какой-либо папке. После установки на диске вы найдёте несколько папок и 2 файла установки. В « domains » размещаются папки с запускаемыми сайтами. В « modules » помещается дополнительное ПО. Файлы установки рассчитаны на разные конфигурации систем: выбирайте и запускайте соответствующий. Но перед этим отключите антивирус, иначе он может заблокировать определённые операции установки, из-за чего пакет инсталлируется неправильно. Установку дополнительных компонентов пропускать не стоит.

Установив и запустив программу, вы увидите в правом нижнем углу экрана панель Open Server. По кнопке «Запуск» вы включите сервер, функции кнопок «Перезапустить» и «Остановить» понятны по их названию. В параметрах содержится множество различных пунктов, но они нужны для углублённой работы с программой. Разработчики-специалисты самостоятельно разберутся в них, а простым владельцам, желающим протестировать сайт, они вряд ли понадобятся. Вам нужно просто разместить сайт в соответствующей папке и выбрать его в программе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Готов? Ну тогда погнали!

Как создать HTML-страницу

Зайдите в любую папку на вашем компьютере, кликните правой кнопкой мыши и выберите "Создать" -> "Текстовый документ".

Откройте ваш текстовый документ и вставьте в него следующий код (в будущем вместо этого кода вы вставите то, что хотите выложить на сайт):

Сейчас ваш текстовый документ называется "Новый текстовый документ.txt". Вам же нужно переименовать его в "index.html". Для этого выделите его мышкой и нажми клавишу F2 (или вызовите контекстное меню правой кнопкой мыши и выберите "Переименовать"). Теперь мы можем задать ему нужное для нас имя: "index.html".

Если же вы не видите расширения файла ".txt", нужно включить отображение расширений файлов в Windows: сверху в папке перейдите на вкладку "Вид" и поставьте галочку "Расширения имен файлов".

Ну теперь вы можете 2 раза кликнуть по нашему html-файлу, и он откроется в браузере, и вы увидите "Hello, World!". Наша html-страничка готова.

Как зарегистрировать хостинг

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

Это нам вполне подходит. Пока что у нас задача - размещение сайта в интернете бесплатно. Позже, если захотим, то оплатим, если нет, то нет ;) В процессе регистрации можете указать код партнера: 9813, за это я получу немного денюжек ;) Ну а можете и не указывать - я не обижусь ;)

После регистрации мы получим письмо с логином и паролем, а также данными для доступа к вашему сайту по FTP (это нужно, если у вашего сайта много страниц и вы хотите их быстро загрузить на сервер). Сохраните это письмо и не теряйте (чуть позже, мы попробуем загрузить файлы на сервер по FTP-протоколу). Итак, мы попали в личный кабинет web-разработчика. Он выглядит так:

Размещение сайта в интернете

Правильнее бы этот шаг назвать "Как загрузить файлы на хостинг". Вы же теперь знаете, что такое хостинг!

К делу! Нам надо загрузить нашу html-страницу на наш хостинг. Для этого идем в панели управления хостингом в "Файловый менеджер" -> заходим в папку "public_html" -> в меню сверху выбираем "Файл" -> "Загрузить на сервер".

Если мы выберем файл "index.html", который мы создали в п.1 и нажмем "Загрузить", то сразу же увидим его в папке на хостинге. Файл, созданный там по умолчанию "index.htm", просто выделите мышкой и удалите: "Файл" -> "Удалить". В итоге в директории должен остаться только ваш файл "index.html".

Доступ к сайту по доменному имени

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

Зайдя по этому адресу, вы должны увидеть вашу html-страницу "Hello, World!" :) Поздравляю, у вас все получилось.

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

FTP-клиент

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

Скачиваем и устанавливаем себе клиент FileZilla, запускаем. Далее нам надо настроить соединение с нашим сайтом. Заходим "Файл" --> "Менеджер сайтов" --> "Новый сайт" --> Вводим все данные, касательно своего сайта:

Жмем "Соединиться". Клиент установит соединение по FTP-протоколу с вашим хостингом. Если все данные ввели правильно, то ошибок возникнуть не должно.

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

Движки для сайтов

Если вам самому не охота изучать HTML-разметку и создавать сайт с нуля, то можно просто установить на хостинг какую-либо CMS типа WordPress, и у вас будет полноценный готовый Интернет-сайт, страницы на котором вы сможете очень удобно редактировать прямо в своем браузере. Кстати, в панели управления TimeWeb предлагается на выбор установить различные виды CMS-систем: от Блогов и до форумов, чатов и галерей видео. Большинство CMS бесплатные. Просто посетите пункт меню "Каталог CMS".

Заключение, но не конец

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

Ну что ж, друзья, мы с вами подробно разобрали, как создать и выложить свой сайт в интернет. Надеюсь, что хотя бы 30% информации, что ты прочел, стала для тебя новой. Пиши в комментариях, о чем еще рассказать, задавай вопросы, ну и: УДАЧИ В ИНТЕРНЕТЕ ;)

Понравилась или помогла статья? Самое лучшее, что ты можешь сделать - это поделиться ею в любой из своих соцсетей (даже если ты поделишься в твиттере или google+, которыми ты не пользуешься - это очень поможет развитию моего блога). Спасибо! А если ты еще и оставишь любой комментарий снизу в обсуждениях, то это будет двойное СПАСИБО!

Читайте также: