Небольшое уточнение для начала – в этом посте расскажу про ситуацию, когда вам не нужно покупать, ни хостинг (это ещё ладно, есть бесплатные хостинги), ни домен (а вот это уже интересно). Тем не менее, с помощью прищепки и глобуса мы сделаем самый настоящий сайт. С помощью Itty bitty.
Как это работает
Сперва небольшой экскурс в историю сайтостроения, как всё это, собственно, работает. Есть контент (в виде страницы), который, к слову, вы можете создать у себя на компьютере. Написать пару абзацев в Word, добавить туда картинку и ваш мини-сайт готов.
Другое дело, что видеть его можете только вы. В качестве хостинга для такого, извиняюсь, сайта, выступает ваш компьютер. Включили компьютер – сайт работает. Выключили – сайт не работает. Всё просто.
Чтобы ваш сайт видели все остальные в Интернете, нужно загрузить сайт на компьютер, который будет постоянно включен. Это сервер на хостинге. Но и это полдела. Ещё нужно дать сайту уникальное имя, набрав которое в адресной строке браузера, ваш сайт отобразится на экране пользователя.
Что нам понадобится
Заходими на https://itty.bitty.site/edit и погнали творить. Здесь, правда, особо не разгуляешься. Смотрите сами. Вот вам скриншот этого сайта.
Весь секрет такой веб-разработки в том, что код сайта записывается в адресную строку. Начните набирать какой-то текст и увидите, как меняются символы в адресной строке. Чем больше наберёте текста, тем длиннее будет адрес. И тут первый нюанс такого сайта – запомнить такой адрес будет сложно. Практически невозможно. Продиктовать его по телефону – тот ещё квест. Решение здесь такое – финальная ссылка загоняется в QR-код. Или второй вариант – пользуемся сервисом сокращателей ссылок, типа https://bitly.com.
Но это с простым текстом. А как получить вот такой сайт?
Здесь разметка, фон, тени, эмоджи и даже работающие часы! Для такого результата нужно знание HTML. Если знаете CSS – ещё лучше. Знаете JavaScript – вообще здорово. Но даже набор HTML/CSS позволит вам сделать хороший сайт.
В редакторе самого сервиса такой сайт (как на моём примере) не сделать. Для этого открываем CodePen (сервис такой) и творим там.
Слева есть три блока: HTML, CSS, JS. В каждом пишем свой код и сохраняем. Теперь ваш сайт работает внутри CodePen. Чтобы перенести всё это в Itty bitty, нужно было скопировать адрес вашей работы из CodePen (прямо из адресной строки) и вставить прямо в редактор Itty bitty.
Но недолго музыка играла. Судя по обсуждениям на GitHub, теперь так сделать могут только владельцы Pro тарифа на CodePen.
И там же в обсуждении мы видим вот такую ссылку. Примерно так будет выглядеть ссылка и на ваш сайт в итоге. Так что QR-код и сокращатели ссылок будут очень кстати. Но это потом. А пока переходим по ссылке и видим четыре блока. Под заголовок, HTML, CSS и JS.
В эти блоки копируем содержимое из аналогичных блоков CodePen и нажимаем Process. И магия! Всё работает, как и прежде. Остаётся забрать созданную ссылку и либо в QR её, либо в bitly.
Вывод
Классно же! Практически на пустом месте, не потратив ни копейки, мы получаем сайт. Да, нужно понажимать кнопки, почесать в затылке и несколько раз ошибиться. Зато результат вполне вменяемый. Для каких-то случаев это отличная альтернатива сайту в привычном понимании.