В процессе перевода.

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

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

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

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

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

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

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

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

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

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

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

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

  • GitHub это "социальная сеть программистов". С помощью нее можно загружать репозитории с вашими разработками в Git - систему контроля версий. По-умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединятся с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная система контроля версий — большинство компаний сейчас использует ее для работы. GitHub имеет очень полезную функцю GitHub pages, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернет.
  • Dropbox - это облачный сервис,  который позволяет хранить данные в Интернете и дает возможность открыть их с любого другого компьютера. Любой человек, имеющий доступ к Интернету, может получить доступ к  папке в  Dropbox, которую вы сделали публично  доступной. Если эта папка содержит данные веб-сайта, они будут показываться как веб-сайт автоматически. Откройте Host websites With Dropbox, чтобы получить более подробную информацию.

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

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

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

Попробуйте один из этих и выберите для себя лучший:

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

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

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

  1. Прежде всего, установите Git на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.
  2. Далее, создайте аккаунт в GitHub. Это просто и легко.
  3. После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.
  4. Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмитре Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите "Новый репозиторий".
  5. На этой странице, в поле Repository name, введите ваше имя пользователя, английскими буквами без пробела. Так, например, наш друг Боб Смит введёт bobsmith.github.io.
  6. Нажмите "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. На текущей странице вас интересует раздел ... или нажмите существующий репозиторий из командной строки. Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте ее в командную строку и нажмите 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.

Заключение

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

Дополнительная литература

Метки документа и участники

 Внесли вклад в эту страницу: nikin93, Riptrip, IrinaShv, thelensky, roikefir, gnusee, romkadmitrievka1997, nemyxa, bondpuoq, Evgeny_Kurkin
 Обновлялась последний раз: nikin93,