Как загрузить сайт в интернет: Как разместить готовый сайт в Интернете | REG.RU

Как загрузить свой сайт в интернет (6 простых шагов)

Сайт

Май 31, 2022

Anna

4хв. читання

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

Прежде чем начать, вам понадобится следующее:

• Доступ к панели управления вашей учётной записи хостинга.
• Файлы вашего сайта (желательно в архиве .zip или .tar.gz) и базы данных (если используются).
• FTP-клиент, такой как FileZilla и данные для входа в FTP (необязательно).

Ищете недорогой, но адекватный хостинг? Разместите свой проект у нас! К тому же сейчас это можно сделать с огромной скидкой. Воспользуйтесь спецпредложением Hostinger.

К предложению

Оглавление

Шаг 1: выберите надёжный веб-хост

Прежде всего, вам нужно найти правильный веб-хостинг.

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

Вот несколько важных вещей, которые вы должны искать в веб-хостинге:

1. 1. Онлайн-поддержка. Нет ничего хуже, чем застрять и узнать, что вам некому помочь. Если веб-хост не предлагает чат или телефонную горячую линию, вы можете оказываться в трудном положении время от времени.
   2. Контролируйте свой веб-хостинг. Чем меньше вы контролируете свой аккаунт, тем больше вероятность возникновения трудностей, когда ваш сайт начнёт расти. Хорошим примером может быть сравнение WordPress.com с WordPress.org (англ) (версия для самостоятельного размещения).
   3. Место для роста. Самые успешные веб-сайты играют в долговременную игру. Прежде чем вы присоединитесь к веб-хосту, убедитесь, что у них есть масштабируемые решения, если ваш веб-сайт начинает требовать больше огневой мощи (например, виртуальные частные серверы или облачный хостинг).
   4. Гарантия возврата денег. Никто не любит плохие инвестиции, поэтому не забудьте проверить политику возврата. Это даст вам время, чтобы проверить всё, прежде чем полностью использовать эту услугу.
   5. Дополнительные ништячки. Кто не любит хорошую сделку? Например, мы включаем бесплатную регистрацию домена в хостинг, приобретённый на год или более длительный период (а в бизнес-пакет также входит бесплатный SSL)!

Шаг 2. Выберите способ, как загрузить свой сайт в интернет.

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

Файловые менеджеры

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

Однако одним из недостатков, с которым вы можете столкнуться, является ограничение на загрузку. Если резервная копия вашего сайта превышает 256 МБ, вы должны использовать FTP вместо этого.

Протокол передачи файлов (FTP)

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

Если вы решите загрузить свой сайт с помощью FTP, вы не столкнётесь с ограничениями по размеру. Это означает, что вы сможете импортировать резервный архив независимо от его размера.

Автоматический импортёр сайтов

В Hostinger вы также можете найти функцию Import Website. Вы можете использовать его для извлечения архива сайта до 256 МБ непосредственно в каталог public_html.

Плагины миграции WordPress

Если вы используете WordPress, есть несколько способов перемещения вашего сайта. Один из самых простых способов — использовать плагин (например, All in One WP Migration (англ)), который позаботится обо всём.

Однако он также имеет ограничение 256 МБ, которое можно увеличить, купив премиум-версию плагина.

Если веб-сайт больше, использование FTP, это лучший выбор. Подробные инструкции смотрите в нашем полном руководстве по миграции сайта WordPress.

Шаг 3. Загрузите архив сайта и извлеките его.

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

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

Затем вам нужно выбрать архив веб-сайта через свой компьютер и импортировать его на наш сервер.

Затем используйте функцию Извлечь из верхнего меню, чтобы распаковать архив.

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

Если вы решили использовать FTP с FileZilla для загрузки своего сайта, мы рекомендуем предварительно распаковать архив на вашем локальном компьютере (поскольку FTP-клиент не имеет функции извлечения).

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

Шаг 4. Убедитесь, что все файлы находятся в public_html

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

В некоторых случаях при извлечении резервной копии веб-сайта создаётся дополнительный каталог. Это может привести к открытию файлов вашего сайта через example.com/something вместо example.com

Сообщение «

Index of /» означает, что ваши файлы не находятся в правильном каталоге.

Чтобы переместить свой веб-сайт из подпапки в базовый домен (англ), вы можете использовать File Manager или FTP. Выполните следующие короткие действия:

1. Войдите в каталог, в котором находятся ваши файлы.
2. Выберите все из них и нажмите на кнопку Переместить.
3. Задайте пункт назначения public_html и продолжайте.

Шаг 5. Импорт базы данных MySQL

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

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

Быстрые шаги по импорту базы данных:

1. Создайте новую базу данных MySQL и пользователя.
2. Получите доступ к своей новой базе данных через phpMyAdmin.
3. Используйте раздел Импорт для загрузки файла резервной копии.
4. Обновите сведения о подключении базы данных MySQL (например, имя базы данных, хост, пользователь, пароль) в конфигурационных файлах.

Для более детального подхода ознакомьтесь с нашим руководством по восстановлению базы данных с помощью phpMyAdmin (англ).

Шаг 6: Проверьте, работает ли сайт

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

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

Если домен указывает в другое место (англ), есть несколько способов проверить, всё ли будет работать:

1. Использование файла hosts. На вашем компьютере есть специальный файл, который вы можете настроить для эмуляции изменений DNS (англ) (если вы используете MacOS, проверьте это руководство (англ)).
2. Проверка доступности через онлайн-инструменты. Их там много! Кроме того, они чрезвычайно просты в использовании. Просто вставьте своё имя домена, и инструмент сделает всё остальное.
3. Использование плагина браузера. Если вы настроили расширение, такое как Виртуальные Хосты, вы можете использовать его для проверки DNS-изменений. Всё, что вам нужно — это доменное имя и IP-адрес вашей учётной записи (запись A).

Если вы следовали всем инструкциям, как загрузить свой сайт в интернет, он должен появиться. Но если вы столкнулись с проблемой, мы готовы помочь, просто напишите нам в чат! 😉

Нужен недорогой домен для вашего нового проекта? В Hostinger можно найти и купить домен по доступной цене! А при покупке Премиум и Бизнес хостинга, вы получите доменное имя на один год бесплатно.

Заключение

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

С другой стороны, инструмент File Manager чрезвычайно полезен для быстрого импорта одного или двух файлов, создания настроек кода или загрузки веб-сайта, размер которого не превышает 256 МБ.

Если вы хотите начать блог или создать интернет-магазин, вы теперь знаете все необходимые шаги, как загрузить свой сайт в интернете!

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

Більше статей від Anna

Публикация вашего веб-сайта — Изучение веб-разработки

• Назад
• Обзор: Getting started with the web
• Далее

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

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

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

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

• Хостинг — арендованное файловое пространство на веб-сервере хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдаёт контент для веб-пользователей, которые запрашивают его.
• Доменное имя — уникальный адрес по которому люди могут найти ваш веб-сайт, например http://www.mozilla.org или http://www.bbc.co.uk. Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у регистратора доменов.

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

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

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

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

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

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

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

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

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

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

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

• JSFiddle
• Thimble
• JSBin
• CodePen

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

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

1. Прежде всего, установите Git на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.
2. Далее, создайте аккаунт в GitHub. Это просто и легко.
3. После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.
4. Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмите Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите New repository.

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

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

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

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

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

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

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

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

1. Укажите в командной строке каталог test-site (или другое название каталога, содержащего ваш сайт). Для этого используйте команду cd (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием test-site на рабочем столе:

   cd Desktop/test-site
   

2. Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту git, чтобы он превратил каталог в репозиторий git:

   git init
   

3. Далее вернёмся к сайту GitHub. На текущей странице вас интересует раздел «…or push an existing repository from the command line». Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:

   git remote add origin https://github. com/bobsmith/bobsmith.github.io.git
   

4. Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами.

   git add --all
   git commit -m 'adding my files to my repository'
   

5. Наконец, загрузите код на GitHub — вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду:

   git push -u origin master
   

6. Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (username.github.io), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.

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

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

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

git add --all
git commit -m 'another commit'
git push

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

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

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

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

• Что такое веб-сервер?
• Что такое доменные имена?
• Сколько стоит сделать что-то в Интернете?
• Развёртывание сайта: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.
• Cheap or Free Static Website Hosting, статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.

• Назад
• Обзор: Getting started with the web
• Далее

• Установка базового программного обеспечения
• Каким должен быть ваш веб-сайт?
• Работа с файлами
• Основы HTML
• Основы CSS
• Основы JavaScript
• Публикация вашего веб-сайта
• Как работает Веб

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 15 дек. 2022 г. by MDN contributors.

Публикация вашего веб-сайта — Изучите веб-разработку

• Предыдущий
• Обзор: Начало работы в Интернете
• Следующий

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

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

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

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

• Веб-хостинг — это арендованное файловое пространство на веб-сервере хостинговой компании. Вы размещаете файлы веб-сайта на веб-сервере. Веб-сервер предоставляет содержимое веб-сайта посетителям веб-сайта.
• Доменное имя — это уникальный адрес, по которому люди находят ваш веб-сайт, например, http://www.mozilla.org или http://www.bbc.co.uk . Вы можете арендовать свое доменное имя на любое количество лет у регистратора доменов .

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

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

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

• MDN не рекламирует конкретные коммерческие хостинговые компании или регистраторов доменных имен. Чтобы найти хостинговые компании и регистраторов, просто введите «веб-хостинг» и «доменные имена». У всех регистраторов будет возможность проверить, доступно ли нужное вам доменное имя.
• Ваш домашний или офисный интернет-провайдер может предоставить ограниченный хостинг для небольшого веб-сайта. Доступный набор функций будет ограничен, но он может идеально подойти для ваших первых экспериментов.
• Существуют также бесплатные сервисы, такие как Neocities, Google Sites, Blogger и WordPress. Иногда вы получаете то, за что платите, но иногда этих ресурсов достаточно для ваших первоначальных экспериментов.
• Многие компании предоставляют хостинг и домены.

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

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

• GitHub — это сайт «социального кодирования». Он позволяет загружать репозитории кода для хранения в Git 9.0026 система контроля версий. Затем вы можете совместно работать над проектами кода, а система по умолчанию имеет открытый исходный код, а это означает, что любой человек в мире может найти ваш код GitHub, использовать его, учиться на нем и улучшать его. GitHub имеет очень полезную функцию под названием GitHub Pages, которая позволяет вам отображать код веб-сайта в Интернете.
• Google App Engine — это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google, независимо от того, нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. См. Как разместить свой веб-сайт в Google App Engine? Чтобы получить больше информации.

Эти опции обычно бесплатны, но вы можете перерасти ограниченный набор функций.

Использование веб-среды IDE, такой как CodePen

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

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

• JSFiddle
• Глюк
• JS Bin
• CodePen

Теперь давайте рассмотрим, как легко опубликовать свой сайт через GitHub Pages.

1. Прежде всего, зарегистрируйтесь на GitHub и подтвердите свой адрес электронной почты.
2. Далее необходимо создать репозиторий для хранения файлов.
3. На этой странице в репозитории имя введите имя пользователя .github.io, где имя пользователя — ваше имя пользователя. Например, наш друг Боб Смит ввел бы bobsmith.github.io . Установите флажок « Инициализировать этот репозиторий с помощью файла README» . Затем нажмите Создать репозиторий .
4. Перетащите содержимое папки вашего сайта в репозиторий. Затем нажмите Подтвердить изменения .

   Примечание: Убедитесь, что ваша папка имеет индекс index.html 9файл 0023.

5. Перейдите в браузере на имя пользователя .github.io, чтобы увидеть свой веб-сайт в Интернете. Например, для имени пользователя chrisdavidmills перейдите по адресу chrisdavidmills . github.io.

   Примечание: Запуск веб-сайта может занять несколько минут. Если ваш веб-сайт не отображается сразу, подождите несколько минут. Попробуйте еще раз.

Дополнительные сведения см. в справке GitHub Pages.

• Что такое веб-сервер
• Понимание доменных имен
• Сколько стоит сделать что-то в Интернете?
• Развертывание веб-сайта: хороший учебник от Codecademy, который идет немного дальше и показывает некоторые дополнительные методы.
• Дешевый или бесплатный хостинг статических веб-сайтов Скотта Мюррея содержит несколько полезных идей о доступных услугах.

• Предыдущий
• Обзор: Начало работы в Интернете
• Следующий

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 26 февраля 2023 г. участниками MDN.

Как бесплатно разместить веб-сайт (пошаговое руководство)

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

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

К счастью, все изменилось с появлением бесплатных и простых услуг размещения статических сайтов, таких как GitHub Pages. В этой статье мы рассмотрим, как легко настроить Github Pages и использовать его для бесплатного размещения веб-сайта!

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

1. Создать учетную запись GitHub
2. Создать репозиторий кода
3. Загрузите файлы вашего веб-сайта в репозиторий кода
4. Просмотрите свой веб-сайт в Интернете

Предварительные требования:

Прежде чем мы начнем, нам нужно иметь под рукой несколько вещей:

1. Веб-страницу , которую мы можно загрузить на GitHub. Если у вас его нет или вы не знаете, как его создать, вы можете узнать, как начать работу, в этом видео от нашего собственного веб-разработчика Абхишека:

2. Адрес электронной почты , чтобы настроить учетную запись GitHub.

Есть все, что нужно? Давай начнем!

Разместите веб-сайт Шаг 1: Создайте учетную запись GitHub

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

Это будет отражено в URL-адресе вашего веб-сайта, поэтому выберите то, чем вы хотите поделиться со своим кругом (например, если вы выберете « johndoe », ваш веб-сайт будет доступен по адресу johndoe.github.io).

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

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

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

Разместите веб-сайт. Шаг 2. Создайте репозиторий кода. Конечно, это звучит очень технично, но просто означает проект кода. Вы можете узнать о репозиториях и различиях Git и GitHub в нашем руководстве.

Наш веб-сайт со всеми его файлами является примером проекта кода, и мы создадим для него репозиторий на GitHub — или, проще говоря, мы загрузим проект нашего веб-сайта на GitHub. Если вы не смогли найти страницу для создания нового проекта GitHub, щелкните следующее: Создать новый репозиторий GitHub.

Вот так выглядит страница создания нового репозитория:

Вот кое-что важное. Имя репозитория (поле «Имя репозитория») должно точно совпадать с именем пользователя, которое вы выбрали при регистрации на GitHub, за которым следует « .github.io ».

Итак, если вы выбрали имя пользователя « johndoe », имя репозитория здесь должно быть « johndoe .github.io». В нашем случае мы выбрали « githubpages-testing-cf », поэтому мы назовем репозиторий « githubpages-testing-cf .github.io».

Оставьте его общедоступным и нажмите кнопку «Создать репозиторий».

Разместите веб-сайт Шаг 3: Загрузите файлы своего веб-сайта в репозиторий кода

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

Не пугайтесь всех деталей; нам не нужно знать ничего из этого прямо сейчас! Найдите « загрузить существующий файл » (в разделе «Быстрая настройка», чуть ниже, где вы видите имя репозитория) и нажмите на него:

На этой странице перетащите все файлы из папки вашего проекта. Если вы прошли краткий курс веб-разработки, это папка, которую мы назвали «портфолио».

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

В нашем случае мы добавили файлы нашего проекта, поэтому напишем что-то вроде «добавлены файлы проекта».

Когда вы закончите, нажмите « Зафиксировать изменения », и GitHub перенесет вас на домашнюю страницу репозитория.

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

Разместите веб-сайт Шаг 4: Просмотрите свой веб-сайт в Интернете

Чтобы просмотреть недавно опубликованный веб-сайт, откройте новую вкладку в браузере и введите адрес https://your-username.github.io , заменив ваше имя пользователя с вашим настоящим именем пользователя GitHub; поэтому, если ваше имя пользователя было « johndoe », введите https://johndoe. github.io.

Имя пользователя нашей тестовой учетной записи было githubpages-testing-cf , поэтому мы введем https:// githubpages-testing-cf .github.io в адресную строку браузера и нажмем Enter!

Тадаа!!

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

Резюме

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

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