Что делать после верстки сайта

Написал HTML+CSS, что дальше?

Доброго времени суток.
Объясните пожалуйста ламеру пару элементарных вещей в которых не могу разобраться, или подскажите где почитать инфу.
Вот есть верстка (html5, css3, js и т.д.), я понемногу в ней разобрался и могу сверстать что-то похожее на сайт (тут дело за практикой).
Я не понимаю, что нужно делать потом, что бы получить на выходе полноценный сайт с работающими формами и тому подобными плюшками.
Я знаю, что есть ряд CMS на базе которых можно создать свой сайт, но ведь верстку делаешь не под какую-то определенную CMS, а просто по PSD шаблону соблюдая правила семантики и написания кода.
Я сейчас попробую создать сайт на базе Drupal 7 используя тему Zen. Процесс идет потихоньку, я создал субтему и правлю ее подгоняя под PSD макет, дописываю и переписываю стандартные CSS и PHP файлы.
Но все время меня не покидает ощущение, что я двигаюсь в неправильном направлении, ведь если бы именно так создавались сайты, то зачем делать HTML файл.
Подскажите пожалуйста где я туплю и где можно почитать/посмотреть что нужно делать после окончания верстки для создания полноценного сайта.
Спасибо.

• Вопрос задан более трёх лет назад
• 12202 просмотра

Комментировать
Решения вопроса 3

друпал девелопер, фрилансер

Если пользуетесь cms, то делать отдельную вёрстку как правило бессмысленно. У того же друпала есть определённая структура темы (регионы, блоки, поля, идентификаторы, классы) нарушив которую вылезут проблемы. Поэтому двигаетесь в правильном направлении — создание drupal темы по psd шаблону. Плюс как правило на этом же этапе делается и функционал сайта.

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать

Самоделкин.

Дочитал до «ряд cms», дальше не стал.

Тут выбор только за тобой. Если тебе нужен тупо ограниченный функционал, позволяющий тупо «штамповать» статьи одна за одной и ты хочешь, чтобы все было «готовенькое»? Пожалуйста, твой выбор cms. А потом, когда тебе понадобится написать самому что-нибудь, там тебе уже cms не помогут. У них только ограниченный функционал.

Вывод: забей на cms, нажать кнопку и «установить» сайт может даже обезьяна. А вот написать свой код, пусть с костылями, велосипедами и говнокодом, зато свой, это многого стоит.

Если по делу — то практикуйся очень много в написании частей для своего сайта (ну, я про html и css, про js не забывай (как это сделал я)), а потом берись (или сейчас, просто все совмещай, так даже лучше, думаю) за серверную часть. Советую PHP. Отличные мануалы на оф сайте, много локализованной поддержки. Не гонись сразу за «алмазами», сразу придется начать с hello, world. Все приходит с практикой и опытом.

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать
xmoonlight @xmoonlight
https://sitecoder.blogspot.com

Есть «гвозди», а есть «обшивка». CSS/HTML — это обшивка.
Куда вбивать гвозди, чтобы держалась обшивка — решается в зависимости от CMS.
(back-end — каркас, если что)
PHP-файлы — не трогайте. все стили должны быть — в CSS.

Что делать после верстки?

Хотел поинтересоваться, что делать после того как сверстал сайт? Как проверить скорость загрузки сайта(надо как-то на хостинг выкладывать или как), и как заказчик проверить роботу, и как заказчику оправлять готовый проект?
UPDATE
Файлы scss надо отправлють или только глвный css?

• Вопрос задан более трёх лет назад
• 882 просмотра

1 комментарий

Простой 1 комментарий

Этапы создания сайта, что и когда спрашивать у разработчика

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

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

ЭТАП 1 – ЗАПОЛЕНИЕ БРИФА

Этот этап является неотъемлемой частью работы над сайтом. Будь то landing page, корпоративный сайт или интернет магазин – неважно! Бриф нужен всегда. Заказчику он помогает структурировать пожелания к целям, функционалу и дизайну сайта, а разработчику — понять, какие именно задачи закладывает клиент в будущий интернет-ресурс.

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

Что спрашивать у разработчика?

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

ЭТАП 2 — ПРОТОТИПИРОВАНИЕ

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

Что такое прототип сайта?

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

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

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

Что спрашивать у разработчика?

Проверьте прототип сайта:

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

ЭТАП 3.1 – ПРОДАЮЩИЕ ТЕКСТЫ НА САЙТ

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

Однако в 95% случаев прослеживается следующая тенденция: если клиент решил сэкономить и составить тексты самостоятельно, то они так и останутся ненаписанными или в формате «сырых» черновиков. Поэтому взвесьте, насколько экономия получится экономной.

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

ЭТАП 3.2 – ДИЗАЙН САЙТА

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

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

Что спрашивать у разработчика?

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

ЭТАП 4 – ВЁРСТКА САЙТА

Есть картинка, теперь осталось просто загрузить ее в интернет и готово! Но нет, всё гораздо сложнее! После согласования дизайна наступает этап работы верстальщика. Наиболее кратко и понятно постараемся объяснить, что такое вёрстка.

Что такое вёрстка сайта?

На этапе вёрстки сайта первоначально создаётся логическая разметка посредством написания html-кода. Далее же создаётся презентационная разметка, которая отвечает за то, чтобы все элементы страницы размещались именно там, где нужно. Каждый блок дизайна, каждая иконка, раздел текста – у всего есть своё место на сайте. И именно верстальщик настраивает расположение данных блоков.

ЭТАП 5 – ПРОГРАММИРОВАНИЕ

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

Расскажем на примере. Посмотрите на нашем корпоративном сайте на странице «Брендинг» блок «Примеры наших работ».

Обновите страницу (Ctrl + F5) – изменились примеры работ. Сам этот блок и процесс смены примеров работ — это как раз и есть результат программирования.

А теперь пройдите по всему сайту и оцените объём работ: смена слайдера на главной странице; формы заявки и автоматическое оповещение об этом владельца сайта; фильтрация работ на странице примеры работы.

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

Чем удобнее выглядит сайт, тем сложнее оказывается его функционал.

Что спрашивать у разработчика?

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

ЭТАП 6 – НАПОЛНЕНИЕ САЙТА + ПОДГОТОВКА ИНСТРУКЦИЙ ИСПОЛЬЗОВАНИЯ

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

Что спрашивать у разработчика?

Зайдите на сайт и проверьте корректность всех переходов и ссылок! Все текстовые блоки должны быть заполнены. К концу данного этапа к работе сайта не должно быть нареканий.

ЭТАП 7 –НАСТРОЙКА СЧЁТЧИКОВ ПОСЕЩАЕМОСТИ

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

Для того чтобы следить за посещаемостью сайта, в обязательном порядке настраиваются счётчики Яндекс Метрики и Google Analytics, которые дают возможность отслеживать и анализировать статистику посещаемости в различных разрезах. Без настроенных счётчиков вы управляете сайтом вслепую, не контролируя данный инструмент продаж. Благодаря же настроенным счётчикам вы сможете более детально узнать своего клиента и его интересы, а самое главное, понять, как в дальнейшем с ним более продуктивно контактировать через сайт.

Что спрашивать у разработчика?

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

от доменного имени;
от административной панели (если таковая имеется);
от хостинга (либо же только от ftp и базы данных);
от настроенных счётчиков Яндекс Метрики / Гугл Аналитики.

ЗАКЛЮЧЕНИЕ

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

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

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

Была ли статья полезна для вас?

Сейчас читают

Углубиться в то, что любишь

Публичный разбор профиля юриста Юрия Крюкова

Про уникальную способность маркетолога

Написать нам

Политика конфиденциальности

Настоящая Политика конфиденциальности персональных данных (далее – Политика конфиденциальности) действует в отношении всей информации, которую корпоративный сайт Индивидуального предпринимателя Гилёвой Анастасии Андреевны (далее – Сайт), работающего под брендом Маркетинговое агентство Concept Lab (далее – Агентство), расположенный на доменном имени https://conceptlab.pro, может получить о Пользователе во время использования вышеуказанного корпоративного сайта и работы с ним.

1. ОПРЕДЕЛЕНИЕ ТЕРМИНОВ

1.1. В настоящей Политике конфиденциальности используются следующие термины:

1.1.1. «Администрация Сайта Агентства (далее – Администрация сайта)» – уполномоченные сотрудники на управление сайтом, действующие от имени Индивидуального предпринимателя Гилёвой Анастасии Андреевны, которые организуют и (или) осуществляют обработку персональных данных, а также определяют цели обработки персональных данных, состав персональных данных, подлежащих обработке, действия (операции), совершаемые с персональными данными.

1.1.2. «Персональные данные» — любая информация, относящаяся к прямо или косвенно определенному или определяемому физическому лицу (субъекту персональных данных).

1.1.3. «Обработка персональных данных» — любое действие (операция) или совокупность действий (операций), совершаемых с использованием средств автоматизации или без использования таких средств с персональными данными, включая сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (распространение, предоставление, доступ), обезличивание, блокирование, удаление, уничтожение персональных данных.

1.1.4. «Конфиденциальность персональных данных» — обязательное для соблюдения Оператором или иным получившим доступ к персональным данным лицом требование не допускать их распространения без согласия субъекта персональных данных или наличия иного законного основания.

1.1.5. «Пользователь корпоративного сайта (далее — Пользователь)» – лицо, имеющее доступ к сайту Агентства, посредством сети Интернет и использующее Сайт маркетингового агентства Concept Lab.

1.1.6. «Cookies» — небольшой фрагмент данных, отправленный вебсервером и хранимый на компьютере пользователя, который вебклиент или веб-браузер каждый раз пересылает веб-серверу в HTTP-запросе при попытке открыть страницу соответствующего сайта.

1.1.7. «IP-адрес» — уникальный сетевой адрес узла в компьютерной сети, построенной по протоколу IP.

2. ОБЩИЕ ПОЛОЖЕНИЯ

2.1. Использование Пользователем Сайта означает согласие с настоящей Политикой конфиденциальности и условиями обработки персональных данных Пользователя.

2.2. В случае несогласия с условиями Политики конфиденциальности Пользователь должен прекратить использование Сайта.

2.3. Настоящая Политика конфиденциальности применяется только к сайту Агентства. Агентство не контролирует и не несет ответственность за сайты третьих лиц, на которые Пользователь может перейти по ссылкам, доступным на сайте Агентства.

2.4. Администрация сайта не проверяет достоверность персональных данных, предоставляемых Пользователем Сайта Агентства.

3. ПРЕДМЕТ ПОЛИТИКИ КОНФИДЕНЦИАЛЬНОСТИ

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

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

3.2.1. формы обратной связи и формы заявки (расположены на всех страницах Сайта, включая «шапку» Сайта и «подвал» Сайта):

3.2.1.1. фамилию, имя, отчество Пользователя;

3.2.1.2. контактный телефон Пользователя;

3.2.1.3. адрес электронной почты (e-mail);

3.2.2. формы обратной связи и формы заявки (расположены на всех страницах Сайта, включая «шапку» Сайта и «подвал» Сайта):

3.2.2.1. адрес электронной почты (e-mail);

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

4. ЦЕЛИ СБОРА ПЕРСОНАЛЬНОЙ ИНФОРМАЦИИ ПОЛЬЗОВАТЕЛЯ

4.1. Персональные данные Пользователя Администрация Сайта может использовать в целях:

4.1.1. Установления с Пользователем обратной связи, включая направление уведомлений, запросов, касающихся использования Сайта Агентства, оказания услуг Агентства, обработку запросов и заявок от Пользователя.

4.1.2. Подтверждения достоверности и полноты персональных данных, предоставленных Пользователем.

4.1.3. Предоставления Пользователю с его согласия рассылки статей с корпоративного блога Агентства.

5. СПОСОБЫ И СРОКИ ОБРАБОТКИ ПЕРСОНАЛЬНОЙ ИНФОРМАЦИИ

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

5.2. Персональные данные Пользователя могут быть переданы уполномоченным органам государственной власти Российской Федерации только по основаниям и в порядке, установленным законодательством Российской Федерации.

5.3. При утрате или разглашении персональных данных Администрация сайта информирует Пользователя об утрате или разглашении персональных данных.

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

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

6. ОБЯЗАТЕЛЬСТВА СТОРОН

6.1. Пользователь обязан:

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

6.2.1. Использовать полученную информацию исключительно для целей, указанных в п. 4 настоящей Политики конфиденциальности.

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

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

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

7. ОТВЕТСТВЕННОСТЬ СТОРОН

7.1. Администрация сайта, не исполнившая свои обязательства, несёт ответственность за убытки, понесённые Пользователем в связи с неправомерным использованием персональных данных, в соответствии с законодательством Российской Федерации, за исключением случаев, предусмотренных п.п. 5.2., и 7.2. настоящей Политики Конфиденциальности.

7.2. В случае утраты или разглашения Конфиденциальной информации Администрация сайта не несёт ответственность, если данная конфиденциальная информация:

7.2.1. Стала публичным достоянием до её утраты или разглашения.

7.2.2. Была получена от третьей стороны до момента её получения Администрацией сайта.

7.2.3. Была разглашена с согласия Пользователя.

8. РАЗРЕШЕНИЕ СПОРОВ

8.1. До обращения в суд с иском по спорам, возникающим из отношений между Пользователем сайта Агентства и Администрацией сайта, обязательным является предъявление претензии (письменного предложения о добровольном урегулировании спора).

8.2 .Получатель претензии в течение 30 календарных дней со дня получения претензии, письменно уведомляет заявителя претензии о результатах рассмотрения претензии.

8.3. При не достижении соглашения спор будет передан на рассмотрение в судебный орган в соответствии с действующим законодательством Российской Федерации.

8.4. К настоящей Политике конфиденциальности и отношениям между Пользователем и Администрацией сайта применяется действующее законодательство Российской Федерации.

9. ДОПОЛНИТЕЛЬНЫЕ УСЛОВИЯ

9.1. Администрация сайта вправе вносить изменения в настоящую Политику конфиденциальности без согласия Пользователя.

9.2. Новая Политика конфиденциальности вступает в силу с момента ее размещения на Сайте Агентства, если иное не предусмотрено новой редакцией Политики конфиденциальности.

9.3. Все предложения или вопросы по настоящей Политике конфиденциальности следует сообщать через форму обратной связи в разделе Контакты Сайта Агентства, расположенной по адресу https://conceptlab.pro/contacts/.

9.4. Действующая Политика конфиденциальности размещена на странице по адресу https://conceptlab.pro.

Обновлено «16» ноября 2020 г.

Агентство концептуальной рекламы
© Concept Lab. 2023. Авторские права защищены.

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

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

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

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

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

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

• Хостинг — арендованное файловое пространство на веб-сервере хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдаёт контент для веб-пользователей, которые запрашивают его.
• Доменное имя — уникальный адрес по которому люди могут найти ваш веб-сайт, например 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, а затем отображать результат этого кода в виде сайта — и все это на одной вкладке браузера. Вообще говоря, эти инструменты достаточно просты, отлично подходят для обучения, хороши для того, чтобы делиться кодом (например, если вы хотите поделиться техникой с коллегой или обратиться за помощью в отладке к коллегам из другого офиса) и бесплатны (основные функции). Они размещают вашу отрендереную страницу на уникальном веб-адресе. Однако, основные функции довольно ограничены, и приложения обычно не предоставляют хостинговое пространство для таких файлов, как изображения и т.д.

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

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

А теперь, давайте рассмотрим, как опубликовать свой сайт на страницах 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.

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

cd Desktop/test-site 

git init 

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

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

git push -u origin master 

Примечание: Если вы застряли, 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.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.