Помощь начинающему Понимать Получение веб-сайта Live

      
      

На днях я получил отличную электронную почту от человека по имени Джош Лонг. Он, по его словам, «относительно новый для веб-дизайна» и немного зациклялся на концепции получения сайта вживую . Я должен сказать, что я рад получить электронные письма, подобные этому, и я всегда их читаю, но я обычно не могу предлагать техническую поддержку по электронной почте. Если я вообще смогу ответить, я обычно указываю людей другим ресурсам сообщества.

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

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

Я относительно новичок в веб-дизайне, но я сделал несколько курсов по HTML и CSS, и я сделал курс Codecademy по JavaScript. Но, (прыгая вперед, возможно, довольно долгое время здесь!) После того, как вы полностью разработали и закодировали веб-сайт или веб-страницу HTML / CSS / JS, я не полностью понимаю полный процесс перехода с локального сайта, размещенного с помощью mamp / wamp, на публикацию публичный сайт, использующий wordpress (?) или какой-либо другой хост (это WordPress даже хост ?!), а также поиск подходящего сервера и способ размещения изображений / видео или другого контента. (Если бы это звучало так, как будто я не знал, что это значит, это потому, что, к сожалению, я этого не делаю! .. но я бы очень хотел!)

Вы чувствуете этот энтузиазм? Я люблю это.

Мы немного работали над тем, чтобы усовершенствовать многие из его вопросов для этого поста, но они все еще являются словами Джоша. Здесь мы идем!

Что такое регистратор доменов ? Я получаю, что они за регистрацию доменных имен, но в чем разница между ними? Откуда вы знаете, какой из них подходит вам? Быстрый поиск «лучших доменных хостов» в Google дал мне 5 объявлений для компаний, которые являются регистраторами / хостами домена и 9 страницами «Top 10», которые выглядят так, как будто у них есть какая-то связь с по крайней мере одной компанией, которую они предлагают , Я просто ищу самый дешевый?

Вы совершенно правы, владельцы доменов регистрируются для регистрации доменных имен. Если вы хотите joshlongisverycool.com вам придется его купить, а владельцы доменных имен — это компании, которые помогут вам в этом.

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

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

Некоторые вещи, на которые следует обратить внимание:

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

Я ненавижу добавлять к вам шум, но вот некоторые владельцы доменов, которые я использовал лично, и не платят за спонсорство здесь, а также не связаны с партнерскими ссылками :

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

Я мог бы предложить, если вы увидите, что владеете несколькими доменными именами в своей жизни, удерживая их консолидированным до одного регистратора . Управление доменами — это не то, что вы будете делать очень часто, поэтому легко потерять информацию о том, какие домены вы зарегистрировали на том, что зарегистрировалось, не говоря уже о том, как / где изменять все настройки у разных владельцев регистрации.

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

Что такое веб-хост и зачем он нужен? Поисковый запрос Google предлагает вам гору статей и объявлений «лучший веб-хостинг». Эти веб-сайты, похоже, полны жаргона, таких как «общий хостинг» и «управляемый хостинг». На некоторых сайтах я вижу такие вещи, как «предлагаемые хосты». Как вы находите правильный веб-хостинг? Я даже не знаю, что мне нужно. Должен ли я найти самый дешевый?

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

Чтобы разместить сайт в новом домене, вам необходимо настроить DNS вашего нового домена, чтобы указать на сервер, подключенный к Интернету. Вот интересный лакомый кусочек … вы могли бы сделать это прямо из своего дома, если захотите. Ваш интернет-провайдер (ISP) дома, вероятно, дает вам IP-адрес. Это все немного страшно, но вы можете указать свое доменное имя на этом IP-адресе и настроить свой компьютер на веб-сервер, который отвечает на входящие запросы и обслуживает ваш сайт. Тем не менее, никто этого не делает. Вы не хотите, чтобы ваш веб-сервер переставал работать, потому что вы закрыли свой ноутбук или ваш интернет-провайдер изменил ваш IP-адрес.

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

Покупка веб-хостинга немного сложнее, чем покупка домена. Вам нужно будет немного узнать о веб-сайте, который вы собираетесь размещать, когда делаете этот выбор. Будет ли это сайт WordPress? Или другой сайт на основе PHP / MySQL CMS (мы свяжемся с ними позже)? Это означает, что ваш хост должен будет поддерживать эти технологии. Большинство из них, некоторые нет. Вы можете посмотреть в своей документации или буквально спросить их, прежде чем вытаскивать спусковой крючок, если вы не уверены. Существует множество технологий для запуска веб-сайтов. Скажем, сайт будет использовать Ruby on Rails — это другой набор требований, который не все хосты предлагают. Или Узел … Или Python … такая же история.

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

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

• Netlify делает статический хостинг сайтов, что отлично подходит для таких вещей, как статические генераторы сайтов и сайты JAMstack.
• Zeit — это хост, где вы взаимодействуете с ним только через командную строку.
• Digital Ocean имеет свой собственный способ говорить о хостинге. Они называют свои серверы Droplets, которые вроде виртуальных машин с дополнительными функциями.
• Heroku отлично подходит для размещения приложений с готовым к использованию бэкэнд для таких вещей, как Node, Ruby, Java и Python.
• Amazon Web Services (AWS) — это целый набор продуктов со специализированными функциями хостинга, которые предназначены для довольно продвинутых пользователей. Microsoft Azure и Google Cloud похожи.

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

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

Это волшебный момент!

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

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

Должны ли вы объединить регистратора доменов и веб-хостинга в один, если компания предлагает оба?

Я упоминал это выше немного: я поклонник а не это вообще. С одной стороны, это очень удобно. Такие вещи, как совместное выставление счетов и единый контроль. Хост также будет делать такие вещи, как настройка DNS, чтобы вы были настроены для их хостинга, и вам, вероятно, даже не нужно об этом думать.

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

Что такое «CMS»? В чем его цель? WordPress, Joomla и Drupal — самые популярные имена, которые я нашел для систем управления контентом, и из их описаний все звучит очень похоже. Каковы особенности, которые отделяют друг от друга? Является ли CMS все, что вам нужно, чтобы получить ваш сайт с вашего локального компьютера в общедоступный интернет?

CMS (система управления контентом) — довольно общий термин. Это означает буквально все, что помогает вам управлять контентом. Как вы видели, есть такие крупные игроки, как WordPress и CraftCMS. Они действительно не имеют ничего общего с этой связью между работой на локальном сайте и получением этого сайта вживую. Но они скорее усложняют его.

Причина, по которой вы должны использовать CMS, — это упростить работу над вашим сайтом. Рассмотрим этот сайт, на который вы смотрите прямо сейчас. На этом сайте есть десятки тысяч страниц. Было бы несостоятельным, если бы каждый из них был созданным вручную файлом file.html .

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

Давайте рассмотрим технологию, лежащую в основе WordPress, CMS, которая очень хорошо подходит для CSS-Tricks. Для запуска WordPress необходимо:

1. PHP (базовый язык)
2. MySQL (база данных)
3. Apache (веб-сервер)

Вы можете сделать все это на месте!

Я использую Local by Flywheel для этого (Mac и Windows), но есть несколько способов получить эти технологии: MAMP, Docker, Vagrant и т. Д.

Это поможет вам запустить и запустить локально с вашей CMS. Это красиво. Хорошая локальная среда разработки для вашего сайта имеет решающее значение. Но это не поможет вам получить этот сайт вживую.

Мы перейдем к тому, чтобы все это появилось на сайте в ближайшее время, но вы должны это знать: для запуска веб-сервера необходимо запустить эти же технологии. Глядя на пример WordPress сверху, ваш веб-сервер также должен запускать PHP, MySQL и Apache. Затем вам нужно настроить систему для получения всех ваших файлов с вашего локального компьютера на ваш веб-сервер, как и для любого другого сайта, но, возможно, также иметь систему для работы с базой данных. База данных немного сложна, так как это не «плоский файл», как большая часть остальной части вашего сайта.

CMS может быть построена из любого набора технологий, а не только из перечисленных выше. Например, см. KeystoneJS. Вместо PHP, Keystone — Node.js. Вместо MySQL для базы данных он использует MongoDB. Вместо Apache он использует Express. Просто другой набор технологий. Оба из них можно запустить локально и на реальном веб-сервере.

CMS вообще не может иметь базы данных! Генераторы статических узлов похожи на это. Вы получаете сайт, работающий локально, и они создают набор плоских файлов, которые вы перемещаете на свой живой сервер. Другой способ сделать что-то, но абсолютно все еще CMS. Я всегда говорю, что лучший CMS — это тот, который настроен под ваши нужды.

Что такое «Asset Hosting»? Активы не довольны? В чем разница между CMS и хостинговой услугой? Что делает хозяин объекта?

Давайте определим актив: любой «плоский» файл. Как и в, не динамически генерируется, как CMS может генерировать HTML-файл. Изображения являются ярким примером «актива». Но это также такие вещи, как файлы CSS и JavaScript, а также видео и PDF-файлы.

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

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

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

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

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

Но давайте поговорим о репозиториях Git.

Git — это конкретная форма управления версиями . Есть и другие, но Git настолько доминирует в интернет-индустрии, что вряд ли стоит упоминать о других.

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

Скажем, мы оба редактируем файл и загружаем его через SFTP …, который меняет победы? Это тот, кто загрузил свой файл последним. Мы понятия не имеем, кто что сделал. Мы переписываем друг друга и не можем синхронизировать изменения друг с другом, изменения сразу же влияют на живой сайт, который может сломать вещи, и мы не можем отменить изменения в случае, если мы сломаем вещи. Это настолько неприемлемо, что это никогда не было сделано.

Вместо этого мы работаем с контролем версий, например Git. С Git, когда мы вносим изменения, мы передаем их в репозиторий . Репозиторий можно размещать где угодно, даже на локальной машине. Но чтобы сделать их действительно полезными, они размещаются в Интернете, где каждый имеет доступ. Вы наверняка видели GitHub, который размещает эти репозитории и добавляет множество других функций, таких как отслеживание проблем. Аналогичны GitLab и Bitbucket.

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

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

OK. Итак, теперь со всем этим прямо … где вы начинаете с перехода от местных к жизни? Где вы загружаете свои файлы HTML, CSS и JavaScript? Как вы связываете свое блестящее новое доменное имя с этими файлами и видите его в дикой природе? Какая служба отвечает за добавление нового контента на ваш сайт или его обновление? Действительно ли это запутывает, если у вас разные компании для каждой службы?

Начнем с очень простого сайта, на котором я бы назвал типичный веб-хостинг. Скажем, у вас есть только index.html style.css и script.js файлы на вашем локальном компьютере, который является вашим сайтом. Вы приобрели доменное имя и указали параметры DNS на веб-узле. Этот хост предоставил вам учетные данные SFTP. Вы будете использовать эти учетные данные в приложении, которое позволяет подключаться к SFTP-соединениям:

Ваш хост также сообщит вам, какая папка является «общедоступным корнем» вашего сайта. Файлы, которые будут доступны в общедоступном Интернете, чтобы увидеть мир!

Вы можете услышать, что люди ссылаются на «живой» сайт как на «производственный» сайт. Когда кто-то спрашивает что-то вроде этого, Сделал ли это ошибку для производства? » означает, что ошибка находится на веб-сайте.« Разработка »- это ваш локальный компьютер. У вас также может быть сайт« Staging », который является клоном веб-сайта в реальном времени на одном и том же аппаратном / программном обеспечении сайта для тестирования.

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

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

Одна из услуг, которая помогает с этой идеей развертывания, — Beanstalk. Beanstalk размещает ваш репозиторий Git, плюс вы даете ему учетные данные SFTP для вашего сервера — таким образом он может перемещать файлы на ваш веб-сервер, когда вы совершаете фиксации. Круто? Скажите, что вы хотели принять решение Git repo в другом месте, например, GitHub, Bitbucket или Gitlab. Проверьте DeployBoy, который делает то же самое, только он может подключаться к этим сайтам. Вероятно, сейчас нет ничего удивительного в том, что здесь есть много вариантов, начиная с цены и сложности.

Вернемся к нашему примеру WordPress.

1. У вас это работает на месте (на вашем компьютере) просто отлично, и теперь вы хотите жить с ним.
2. Вы купили доменное имя у регистратора.
3. Вы приобрели хостинг, соответствующий требованиям WordPress.
4. Вы указали DNS имени домена на веб-узле.
5. Вы проверили, что все работает (простой способ: загрузить файл index.html в общий корень через SFTP и убедиться, что он загружается при вводе, введите имя домена в браузер.)

Теперь у вас еще есть работа:

1. Настройте репозиторий Git для сайта.
2. Настройте службу развертывания, чтобы переместить файлы из хранилища на сайт в реальном времени.
3. Настройте / настройте живой сайт по мере необходимости. Например, вам понадобится база данных на реальном сайте. Вам нужно будет создать это (у вашего хоста будут инструкции) и делать такие вещи, как запустить установщик WordPress и обновить файлы конфигурации.
4. Если у вас есть вещи в вашей локальной базе данных, которые вы хотите переместить на живой сайт, вы можете экспортировать / импортировать вещи. Это может произойти на необработанном уровне MySQL с использованием собственных возможностей импорта / экспорта WordPress или причудливого плагина, такого как WP DB Migrate Pro.

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

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

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

---

Удачи!

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

О, и помните: лучший способ узнать что-нибудь вообще — это …

https://css-tricks.com/wp-content/uploads/2018/08/jbw.mp3

Связанные