Сайт ADC Hub готов. HTML-структура создана, CSS-стили применены, JavaScript работает. Страницы выглядят красиво в браузере на вашем компьютере. Но прежде чем показать сайт миру, нужна подготовка. Как квартира перед приходом гостей. Визуально чисто, но нужно проверить, что всё на месте и работает.
Когда публикуете сайт, его увидят не только люди, но и поисковые роботы. Гугл, Яндекс, другие поисковики отправляют ботов, которые читают страницы и индексируют их. Чтобы сайт нашёлся в поиске, нужно правильно подготовить метатеги. Как визитка компании, которая рассказывает, кто вы и чем занимаетесь.
Откройте index.html. Посмотрите на секцию <head>. Сейчас там минимум: кодировка, заголовок, ссылка на CSS. Добавим важные метатеги. Начнём с базовых для SEO (лучшему поиску в интернете).
Первый важный тег <meta name="description">:
Описание показывается под ссылкой в поисковой выдаче. Это как аннотация книги. Человек читает и решает, кликать или нет. Максимум 160 символов. Включите ключевые слова естественно, без спама. Опишите, что получит посетитель на странице.
Второй тег <meta name="keywords">. Раньше был важен, сейчас поисковики игнорируют, но не повредит добавить:
Просто перечислите ключевые слова через запятую. Не больше 10-15 слов.
Третий тег для управления индексацией:
Это говорит поисковым роботам: «Индексируй эту страницу и переходи по ссылкам». index разрешает индексацию, follow разрешает переход по ссылкам. Есть противоположные значения noindex и nofollow, если нужно скрыть страницу от поиска.
Кодировка уже должна быть, но проверьте:
UTF-8 обеспечивает корректное отображение кириллицы, эмодзи, любых символов. Без неё русский текст превратится в кракозябры.
Теперь Open Graph теги. Когда делитесь ссылкой в соцсетях, ВКонтакте или Telegram показывают превью: картинка, заголовок, описание. Это формируют OG-теги. Без них соцсеть возьмёт случайную картинку и текст, результат непредсказуемый.
Добавьте базовые OG-теги:
og:title заголовок в превью. Может отличаться от <title>, быть чуть длиннее и эмоциональнее. og:description описание в превью. og:image картинка для превью. Должна быть абсолютная ссылка, размер минимум 1200×630 пикселей. og:url адрес страницы. og:type тип контента, обычно website. Картинку для og:image вы можете скачать из Figma в разделе SEO.
Соберём всё вместе. Вот как должен выглядеть <head> готовой к публикации страницы:
Важный момент: каждая страница сайта должна иметь уникальные <title> и <meta name="description">. Не копируйте одинаковые теги на все страницы. Страница «О нас» должна иметь свой тайтл и описание. Страницы «Наши работы» и «Наша история» свои. Уникальность помогает поисковикам понять, чем страницы отличаются.
Подготовьте все страницы ADC Hub к публикации. Добавьте полный набор метатегов в <head>. Создайте уникальные title и description для каждой страницы. Подготовьте картинку для OG-image. Проверьте превью в отладчиках соцсетей. Это последний шаг перед тем, как загрузить сайт на хостинг и показать миру.
Сайт ADC Hub готов к публикации. Файлы лежат на вашем компьютере: HTML, CSS, JavaScript, картинки. Но чтобы показать сайт миру, нужно загрузить его на хостинг. А перед этим нужно сохранить код в безопасное место, где он не потеряется, даже если компьютер сломается. Для этого существует GitHub.
GitHub.com / Ноябрь 2025
GitHub это платформа для хранения кода. Представьте облачный диск вроде Яндекс.Диска, но специально для программистов. Загружаете файлы проекта, они хранятся на серверах GitHub. Можете скачать их с любого компьютера. Можете вернуться к прошлой версии, если что-то сломали. Можете работать над проектом с командой.
GitHub работает на основе системы Git. Это система контроля версий. Каждое изменение в коде записывается как отдельная версия. Изменили цвет заголовка, сохранили версию. Добавили новую страницу, сохранили версию. Можете листать историю как фотоальбом. «Вот так сайт выглядел месяц назад, вот неделю назад, вот вчера».
Ветки на GitHub / Superuser.com / Ноябрь 2025
Для ADC Hub создадим репозиторий. Это как папка проекта, но с историей всех изменений и возможностью работать в команде.
Начнём с регистрации. Откройте github.com в браузере. Видите форму регистрации? Введите email, придумайте имя пользователя, придумайте пароль. Нажмите «Sign up». Подтвердите email. Аккаунт создан.
После входа попадёте на главную страницу. Слева список ваших репозиториев, пока пустой. Справа лента активности. Вверху справа значок плюса. Нажмите на него. Откроется меню. Выберите «New repository», новый репозиторий.
Как создать репозиторий
Появится форма создания репозитория. Несколько полей, разберём каждое.
Первое поле «Repository name», название репозитория. Пишите короткое понятное имя. Например, adc-hub. Без пробелов, используйте дефисы или подчёркивания. Максимум 100 символов.
Второе поле «Description», описание. Необязательно, но полезно. Напишите одним предложением, что за проект. «Сайт ADC Hub — сообщества дизайнеров и разработчиков». Это поможет вам и другим понять назначение репозитория через год.
Третье поле «Public или Private», видимость репозитория. Public значит репозиторий доступен всем, любой может посмотреть код. Private значит только вы и те, кого пригласите. Для учебного проекта выбирайте Public. Так сможете показать работодателю: «Вот мой код, смотрите, как я умею».
Ниже три чекбокса. Первый «Add a README file». README это текстовый файл с описанием проекта. Как инструкция: что это, как запустить, что внутри. Включите эту опцию. GitHub создаст файл README.md автоматически.
Второй чекбокс «Add .gitignore». Файл .gitignore говорит Git, какие файлы не загружать в репозиторий. Например, временные файлы, пароли, большие файлы. Для простого HTML-сайта можете пропустить, но не помешает выбрать базовый шаблон.
Третий чекбокс «Choose a license», лицензия. Это юридический документ, который определяет, что другие могут делать с вашим кодом. Для учебного проекта можете пропустить или выбрать MIT License, она разрешает всё.
Заполните форму примерно так:
Заполнение формы создания репозитория
Страница перезагрузится. Видите название репозитория вверху? Видите файл README.md в списке? Репозиторий создан. Теперь нужно скопировать его адрес для работы с компьютера.
Найдите зелёную кнопку «Code» справа. Нажмите на неё. Откроется окошко с адресом репозитория. Видите ссылку вида https://github.com/username/adc-hub.git? username это ваше имя пользователя. Нажмите на иконку копирования рядом. Адрес скопировался.
Этот адрес понадобится для загрузки файлов с компьютера в репозиторий. Пока сохраните его в блокноте или оставьте вкладку открытой.
Вернитесь на главную страницу GitHub. Нажмите на иконку профиля вверху справа, выберите «Your repositories». Видите созданный репозиторий adc-hub? Кликните на него. Откроется страница репозитория.
Репозитории GitHub / GitHub.com / Ноябрь 2025
Здесь будут храниться все файлы проекта. Пока только README.md. Через несколько шагов добавите HTML, CSS, JavaScript, картинки. Все файлы сайта ADC Hub будут в одном месте, доступны с любого устройства.
GitHub это не просто хранилище. Это профессиональный инструмент. Почти все компании используют GitHub или аналоги. Умение работать с ним обязательный навык для разработчика. Работодатель смотрит на ваш GitHub и видит: «Этот человек знает, как организовать код, как работать в команде, как документировать проекты».
В прошлом уроке создали репозиторий на GitHub. Теперь он пустой, только файл README внутри. Файлы сайта ADC Hub лежат на вашем компьютере: HTML, CSS, JavaScript, картинки. Нужно загрузить их в репозиторий. Как посылку отправить по почте, только для кода.
Есть два способа загрузить файлы: через веб-интерфейс GitHub или через Git с компьютера. Первый способ простой, но неудобный для больших проектов. Второй профессиональный, но требует установки программ. Разберём оба.
Начнём с простого. Откройте репозиторий на GitHub в браузере. Видите зелёную кнопку «Code» и рядом плюсик? Нажмите на плюсик. Откроется меню. Выберите «Upload files», загрузить файлы.
Появится страница загрузки. Перетащите файлы с компьютера прямо в окно браузера. Или нажмите «choose your files» и выберите через диалог. Выберите все файлы проекта: index.html, style.css, script.js, папку с картинками. Все сразу, одним действием.
Файлы загрузятся. Ниже появится форма коммита. Commit, фиксация изменений. Это как подпись под документом: «Я добавил эти файлы, вот дата и причина». В первое поле напишите короткое сообщение: «Добавлены основные файлы сайта». Во второе можете добавить подробности, но необязательно.
Нажмите зелёную кнопку «Commit changes», зафиксировать изменения. Страница перезагрузится. Видите список файлов в репозитории? index.html, style.css, script.js, README.md. Файлы загружены на GitHub.
