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


Как сделать на своем компьютере хостинг для сайта самостоятельно

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

А может ну его и превратить свой компьютер в сервер? Куча места за которое никому не придется платить. Ну что, думаете стоит разобраться в этой теме?

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

Условия использования

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

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

В среднем на человека уходит около 50 кб/с. Мой тариф лучшим не назовешь, скорость отдачи около 7 Мб, то есть максимум что я смогу – обеспечить нормальной загрузкой около 140 человек единовременно. Если посетителей больше, то им придется ждать дольше, а значит и процент отказа будет внушительный.

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

Цены на хостинг небольшие, но вы же можете вообще забыть об оплате.

Что вам потребуется

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

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

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

Open Server

Далее все просто. Вам понадобится Open Server. Она бесплатная. При желании вы можете внести пожертвование, разработчики будут рады даже 100 рублям. Кстати, если вы переведете деньги, то сможете загрузить пакет за считанные секунды. Если нет, то придется немного подождать.

Что такое Опен Сервер? Удобная серверная платформа, которую создали специально для веб-мастеров. Если бы не она, то вам бы пришлось вручную устанавливать php, apache, MySql и кучу дополнительных программ. В общем масса геморроя.

Open Servere – это пакет, в котором уже есть все компоненты. Они понадобятся для серверной установки. Останется только распаковать все содержимое и можно заниматься разработкой сайта или написанием скрипта.

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

Однако, Open Server – не единственный пакет. Одним из первых появился Denver, чуть позже xampp. Но я бы не назвал их лучшими. Обновляются довольно редко, а потому теряют свою популярность. Кроме того, вы можете управлять отдельными частями. Добавлять что-то свое, удалять или редактировать. Со временем это может пригодиться.

В Open Server есть множество дополнительных инструментов: просмотр логов, планировщик задач и многое другое.

Кстати, эту программу вы можете установить даже на флешку. Это очень удобно, если вы делаете сайт на заказ и не готовы показывать его в интернете. Просто копируете сайт на USB и готово. Можете вставлять съемный диск в любой компьютер. Заказчик увидит его точно также, как если бы портал уже был в интернете.

Но, довольно прелюдий. Давайте посмотрим на программу в деле. Для начала ее нужно скачать. Переходим в одноименный раздел, выбираем подходящую версию (basic, ultimate, premium), вводим цифра с картинки и переходим к скачиванию.

Качать самую полную версию не всегда имеет смысл. Уверены ли вы, что будете пользоваться CamStudio, который позволяет записывать видео, редактор фото PixBuilder или Skype? К примеру, я рассказывал уже про удаленного помощника TeamViewer. Убежден, что если вы не прочитаете мою статью о нем, то ни разу не откроете эту программу.

При желании все это можно будет установить позже. Я рекомендую брать Premium.

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

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

После того как процесс завершится вы увидите на диске С папку Open Server. В ней будет расположено несколько папок и 2 установочных файла. В папке domains будут располагаться папки с вашими сайтами. Modul – дополнительные установочные программы: php, mysql и так далее.

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

Сразу после запуска вам предложат установить Microsoft Visual C++. Вполне вероятно, что все у вас уже установлено, но во избежание проблем и ошибок можно выполнить загрузку еще раз.

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

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

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

Видео инструкция

Мне очень понравился этот ролик. Это пошаговая инструкция по работе с программой. За 40 минут вы узнаете абсолютно все, что нужно знать для того, чтобы работать о Open Server.

Ну а для тех, кто интересуется этой темой, могу также порекомендовать курс «Продажа информации в интернете от А до Я». Думаю, что для многих это будет полезным.

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

Как разместить веб-сайт (Простое руководство для начинающих) в 2020

Хотите узнать, как разместить веб-сайт? Самостоятельные конструкторы веб-сайтов, такие как WordPress, предлагают вам полную свободу создания веб-сайтов любого типа.

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

Это просто неправда.

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

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

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

Готовы? Давайте начнем.

Вот что вы узнаете из этого руководства.

Что означает размещение веб-сайта?

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

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

Основная задача веб-сервера - принимать входящие запросы и отвечать, отправляя запрошенную страницу в браузер пользователя.

Все это может звучать как набор технического жаргона, и это так.

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

Все веб-сайты в Интернете используют хостинговую компанию для размещения своих веб-сайтов. Даже такие технологические гиганты, как Netflix (размещенный на Amazon) и PayPal (размещенный на облачном хостинге Google), используют сторонних поставщиков услуг для своего хостинга.

Лишь несколько компаний, таких как Google, Microsoft и Amazon, полностью размещают все свои сервисы на своих собственных платформах.

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

Что нужно для хостинга веб-сайта

Для размещения веб-сайта вам потребуются следующие две вещи.

  • Провайдер веб-хостинга
  • Доменное имя

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

Итак, как пользователи попадают на ваш собственный веб-сайт? Вот здесь и появляются доменные имена.

Доменное имя - это адрес вашего веб-сайта, который люди вводят в браузере, чтобы посетить ваш веб-сайт. Например, wpbeginner.com приведет вас на этот сайт.

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

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

Чтобы понять взаимосвязь между хостингом и доменами, см. Наше руководство о разнице между веб-хостингом и доменным именем.

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

Но сначала давайте взглянем на различные типы планов веб-хостинга и оценим, какой из них подходит для размещения вашего веб-сайта.

Типы услуг хостинга веб-сайтов

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

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

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

1. Общий хостинг

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

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

Цены: от 2,75 до 7,99 долларов в месяц

Подходит для: Создание нового блога, веб-сайт малого бизнеса

Наш рекомендуемый провайдер виртуального хостинга: Bluehost

Чтобы узнать больше, ознакомьтесь с нашим руководством о лучшем виртуальном хостинге.

2. Хостинг VPS

Хостинг

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

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

Цена: от 29 долларов.99 / мес

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

Наша рекомендуемая хостинговая компания VPS: HostGator

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

3. Управляемый хостинг WordPress

Управляемый хостинг WordPress - это специализированный хостинг, созданный специально для WordPress. Это похоже на консьерж-сервис для вашего сайта WordPress.

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

Стоимость: от 35 долларов США в месяц

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

Наша рекомендуемая управляемая хостинговая компания WordPress: WP Engine

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

4. Выделенный хостинг

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

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

Цена: от 79,99 долларов в месяц

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

Наша рекомендуемая выделенная хостинговая компания: SiteGround или HostGator

Примечание. Мы используем специальные выделенные серверы HostGator для размещения веб-сайта WPBeginner.

Выбор подходящего плана для размещения веб-сайта

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

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

Тарифы на общий хостинг

начинаются от 7 долларов.99 в месяц (оплачивается ежегодно) и 14,99 доллара за доменное имя.

Теперь, если вы только начинаете, это все еще значительные вложения.

К счастью, Bluehost согласился предложить нашим пользователям скидку на хостинг и бесплатное доменное имя. Обычно вы сможете начать работу за 2,75 доллара в месяц.

Это одна из крупнейших хостинговых компаний в мире и официально рекомендованный хостинг-провайдер WordPress.

→ Нажмите здесь, чтобы получить эксклюзивное предложение Bluehost ←

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

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

Сколько стоит размещение веб-сайта

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

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

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

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

У нас есть отличное руководство по стоимости создания веб-сайта на WordPress и о том, как избежать перерасхода средств.

Как разместить веб-сайт на вашем компьютере

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

Да, можно.

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

Многие новички считают полезным изучить веб-разработку, WordPress и программирование, установив локальный сервер на свой компьютер.

См. Наши руководства о том, как настроить локальный сервер в Windows и Mac.

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

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

Перевод локального хост-сервера в режим онлайн

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

Сначала найдите файл конфигурации программного обеспечения веб-сервера с именем httpd.conf.

Если вы используете WAMP в Windows, вы найдете его в папке C: \ wamp \ bin \ apache \ apache [версия #] \ conf].

Пользователи

MAMP на Mac найдут его в папке / Applications / MAMP / conf / apache /.

Вы можете открыть этот файл с помощью текстового редактора, такого как Блокнот или TextEdit. После этого нужно найти строку, которая начинается с

.

Слушайте 80

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

Слушайте 64.233.160.1: 80

Далее вам нужно найти следующую строку:

Имя сервера localhost: 80

Теперь измените его, заменив localhost: 80 своим IP-адресом.

Имя сервера 64.233.160.1

Далее вам нужно найти следующую строку для WAMP:

<Каталог "c: / wamp / www /">

Если вы используете MAMP, найдите следующую строку:

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

Разрешить заказ, запретить
Разрешить со всех

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

Теперь любой желающий может использовать ваш IP-адрес для доступа к вашему сайту вместо localhost. Это не идеальная ситуация, так как вашим пользователям будет сложно запомнить IP-адрес.

Вот здесь и пригодятся доменные имена.

Указание вашего доменного имени на локально размещенный веб-сайт

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

Во-первых, вам нужно изменить настройки DNS вашего доменного имени.На скриншотах ниже мы используем Domain.com:

После этого необходимо отредактировать запись имени A, указав в качестве имени знак @. Если у вас его нет, нажмите кнопку «Добавить новую запись», чтобы продолжить.

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

Если компьютер с вашим локальным сервером напрямую подключен к Интернету, то все готово.

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

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

Затем вам нужно перенаправить веб-трафик или HTTP-трафик на порт 80.В поле IP-адрес вам нужно ввести IP-адрес вашего компьютера в локальной сети. Этот IP-адрес является внутренним адресом, который идентифицирует ваш компьютер в локальной сети.

После этого нужно применить изменения и перезагрузить роутер.

Недостатки самостоятельного хостинга веб-сайта

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

Ниже приведены лишь несколько недостатков размещения веб-сайта на локальном компьютере.

  • Чтобы запустить веб-сервер, вам необходимо установить его на компьютер, подключенный к высокоскоростному Интернет-соединению 24 часа в сутки.
  • Вам также необходимо установить обновления для программного обеспечения веб-сервера, сохранить резервные копии, запланировать резервный сервер и многое другое.
  • Компьютер, на котором размещен ваш веб-сайт, также будет открыт для попыток взлома, внедрения вредоносных программ и DDOS-атак. Это также может повлиять на безопасность всех других компьютеров в вашей сети.
  • Вам нужно будет приобрести статический IP-адрес у вашего интернет-провайдера, что будет стоить вам дополнительных затрат.

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

Часто задаваемые вопросы о хостинге веб-сайтов

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

1. Зачем мне нужен хостинг-провайдер для размещения веб-сайта?

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

Это позволяет вам сосредоточиться на создании веб-сайта и развитии бизнеса вместо управления серверным программным обеспечением.

2. Могу ли я купить доменное имя и хостинг у двух компаний?

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

3. Могу ли я купить доменное имя и разместить свой сайт позже?

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

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

4. Могу ли я разместить свой веб-сайт на моем локальном компьютере, а затем перенести его на хостинг-провайдера?

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

5. Могу ли я разместить веб-сайт у одного провайдера, а затем сменить его на другого?

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

6. ​​Где разместить свой сайт?

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

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

Для начинающих сайтов мы рекомендуем Bluehost. Они автоматически устанавливают WordPress и предлагают удобную для новичков панель инструментов, встроенное кеширование, безопасность и многое другое.Вдобавок ко всему, они предлагают читателям WPBeginner скидку на хостинг + бесплатное доменное имя.

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

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Как бесплатно разместить свой сайт в сети с помощью страниц Github

«Я уже некоторое время занимаюсь Codecademy и другими учебниками. Но как мне разместить свой сайт в сети?

Это вопрос, который мне задавали несколько раз за последние несколько месяцев.

Я знаю, насколько сложно «запустить сайт» может быть для новичков. Особенно для тех, кто только что закончил базовый курс HTML / CSS и очень хочет получить свою работу в Интернете.

Вот почему я создал краткое пошаговое руководство, показывающее, как вывести ваш сайт в сеть с помощью Github Pages.

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

Присоединяйтесь к бесплатному курсу портфолио

Подпишитесь на мой * бесплатный * курс о том, как создать сайт портфолио в качестве веб-разработчика / дизайнера.

Спасибо! Проверьте свой почтовый ящик сейчас, чтобы подтвердить свой адрес электронной почты.


Почему вам следует использовать Github Pages

Как и все, есть много способов разместить ваши файлы HTML, CSS и JavaScript (JS) в Интернете.

Однако я думаю, что Github Pages - один из лучших способов сделать это.

  • Github важен для любого начинающего разработчика / дизайнера, чтобы изучить и использовать
  • Разработчики и программисты всех видов используют Github
  • Plus, создание сайта на Github Pages бесплатно

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

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

Необходимые инструменты для размещения вашего сайта на страницах Github

Для начала вам понадобится:

  • Компьютер / ноутбук: Я буду использовать свой Macbook Pro
  • Текстовый редактор: Я использую Sublime Text 2, но есть и другие варианты
  • Базовые ноу-хау HTML и CSS: демонстрационных файлов, которые я буду использовать очень просто
  • Учетная запись Github: , которую я покажу вам, как создать, если вы еще не используете Github - это как создание любой другой учетной записи в Интернете.
  • Командная строка: AKA CLI, AKA Terminal, AKA Console.Или готовность использовать его очень простым способом :)

Чтобы следовать этому руководству, я создал видео, которому нужно следовать.

Видео начинается с абсолютного начала. Идеально для просмотра, если вы новичок в HTML и CSS.


8 шагов для запуска вашего сайта на страницах Github

Во-первых, вот ссылка с дополнительной информацией о страницах Github и их настройке: https://pages.github.com/

Шаг 1. Зарегистрируйтесь / войдите в учетную запись GitHub

Сделайте это на Github.com.

Создание учетной записи Github похоже на регистрацию в Facebook или Twitter. Вы дадите свое имя, имя пользователя, адрес электронной почты и установите пароль.

Если у вас уже есть учетная запись, авторизуйтесь.

Шаг 2. Разберитесь между сайтами пользователей и сайтами проектов

Когда дело доходит до создания страницы Github, есть два варианта: сайт проекта или сайт пользователя / организации .

Разница в том, что у вас неограниченное количество сайтов проекта, но только один сайт пользователя.Мой пользовательский сайт - laurencebradford.github.io . Потому что laurencebradford - мое имя пользователя.

Пример сайта проекта: laurencebradford.github.io/wp-quiz/

Здесь wp-quiz привязан к репозиторию wp-quiz.

Если у вас кружится голова: не волнуйтесь.

В основном репозиторий похож на (сложную) папку с кучей файлов. Разные люди могут даже редактировать файлы в репозитории одновременно.И вы можете создать на Github столько репозиториев, сколько захотите, каждый с соответствующей страницей Github.

С другой стороны, вам разрешен только один пользовательский сайт. Итак, если ваше имя пользователя - chunkymonkey - ваш сайт пользователя Github будет chunkymonkey.github.io.

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

Принимая решение о создании, подумайте о своих целях.И помните, что у вас только один пользовательский сайт. (Но вы всегда можете изменить содержимое сайта, который вы настраиваете сейчас, если вы последуете за мной, в будущем.)

Шаг 3. Создайте новый репозиторий

На панели инструментов Github щелкните « new repository », как показано ниже.

.

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

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

Какие есть варианты?

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

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

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

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

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

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

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

С помощью онлайн-инструмента, такого как GitHub или Google App Engine

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

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

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

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

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

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

Публикация через GitHub

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

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

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

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

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

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

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

В этом модуле

.

Как вы загружаете файлы на веб-сервер? - Изучите веб-разработку

В этой статье показано, как опубликовать свой сайт в Интернете с помощью инструментов передачи файлов.

Сводка

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

SFTP

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

Примечание : Конечно, есть много других вариантов. См. Дополнительные сведения в разделе «Инструменты публикации».

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

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

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

Мы только что открыли счет и получили от них следующую информацию:

Поздравляем с открытием учетной записи на Example Hosting Provider.

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

Ваш сайт будет виден по адресу demozilla.examplehostingprovider.net

Для публикации в этой учетной записи подключитесь через SFTP со следующими учетными данными:

  • SFTP-сервер: sftp: // demozilla.examplehostingprovider.net
  • Имя пользователя: demozilla
  • Пароль: quickbrownfox
  • Порт: 5548
  • Для публикации в Интернете поместите свои файлы в каталог Public / htdocs .

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

Примечание : В зависимости от вашего хостинг-провайдера большую часть времени вы увидите страницу, на которой написано что-то вроде «Этот веб-сайт размещен на [Hosting Service]».»При первом переходе на свой веб-адрес.

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

  1. Выберите Файл> Менеджер сайта ... в главном меню.
  2. В окне Site Manager нажмите кнопку New Site , затем введите имя сайта как demozilla в отведенное место.
  3. Укажите SFTP-сервер, указанный вашим хостом, в поле Host: .
  4. В раскрывающемся списке Тип входа: выберите Обычный , затем введите предоставленные имя пользователя и пароль в соответствующие поля.
  5. Введите правильный порт и другую информацию.

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

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

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

Здесь и там: локальный и удаленный просмотр

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

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

  • На центральной левой панели вы видите свои локальные файлы.Перейдите в каталог, в котором вы храните свой веб-сайт (например, mdn ).
  • На центральной правой панели вы видите удаленные файлы. Мы вошли в наш удаленный корень FTP (в данном случае пользователя / demozilla )
  • На данный момент вы можете игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и сервером SFTP, и журнал в реальном времени каждого взаимодействия между вашим клиентом SFTP и сервером.

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

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

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

Они действительно онлайн?

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

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

Rsync

Rsync - это инструмент для синхронизации файлов между локальными и удаленными файлами, который обычно доступен в большинстве систем на базе Unix (таких как macOS и Linux), но существуют и версии для Windows.

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

 rsync [-options] SOURCE user @ x.x.x.x: DESTINATION 
  • -options - это дефис, за которым следует одна или несколько букв, например -v для подробных сообщений об ошибках и -b для создания резервных копий. Вы можете увидеть полный список на странице руководства rsync (ищите «Сводка параметров»).
  • ИСТОЧНИК - это путь к локальному файлу или каталогу, из которого вы хотите скопировать файлы.
  • user @ - это учетные данные пользователя на удаленном сервере, на который вы хотите скопировать файлы.
  • x.x.x.x - IP-адрес удаленного сервера.
  • НАЗНАЧЕНИЕ - это путь к месту, куда вы хотите скопировать свой каталог или файлы на удаленном сервере.

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

Для получения дополнительной информации и дополнительных примеров см. Как использовать Rsync для копирования / синхронизации файлов между серверами.

Конечно, рекомендуется использовать безопасное соединение, например FTP. В случае Rsync вы указываете детали SSH, чтобы установить соединение через SSH, используя опцию -e .Например:

 rsync [-options] -e "ssh [ПОДРОБНОСТИ SSH ЗДЕСЬ]" ИСТОЧНИК [email protected]: DESTINATION 

Вы можете найти более подробную информацию о том, что необходимо, в Как копировать файлы с помощью Rsync через SSH.

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

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

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

GitHub

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

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

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

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

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

  • Веб-интерфейсы . HTML-интерфейс, действующий как интерфейс для службы удаленной загрузки файлов. Предоставляется вашим хостингом.
  • WebDAV . Расширение протокола HTTP для расширенного управления файлами.
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий