Публикация сайта
Сайт 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.
Репозиторий GitHub / GitHub.com / Ноябрь 2025
Этот способ работает, но неудобен. Каждый раз при изменении файла нужно вручную загружать его через браузер. Изменили цвет кнопки в CSS? Зайдите на GitHub, найдите файл, загрузите новую версию. Это долго. Профессионалы используют другой способ через Git.
Git это программа для работы с репозиториями на компьютере. Устанавливаете один раз, потом загружаете изменения одной командой. Но есть проблема: Git работает через командную строку, терминал. Для начинающих это сложно. Поэтому используем GitHub Desktop, графическую программу.
Откройте desktop.github.com в браузере. Нажмите «Download for Windows» или «Download for Mac», в зависимости от системы. Скачается установщик. Запустите его. Следуйте инструкциям. Программа установится.
Откройте GitHub Desktop. При первом запуске попросит авторизоваться. Нажмите «Sign in to GitHub». Введите логин и пароль от GitHub. Разрешите приложению доступ. Авторизация завершена.
Теперь клонируем репозиторий на компьютер. Clone, клонирование. Это копирование репозитория с GitHub на ваш компьютер. Работаете локально, потом отправляете изменения обратно.
В GitHub Desktop нажмите «File», потом «Clone repository». Откроется окно. Видите список ваших репозиториев? Найдите adc-hub. Выберите его. Ниже укажите путь, куда сохранить. Например, C:\Projects\adc-hub на Windows или /Users/username/Projects/adc-hub на Mac.
Нажмите «Clone». Программа скопирует репозиторий на компьютер. Откройте эту папку в проводнике. Видите файл README.md? Это и есть клонированный репозиторий.
Клонирование репозитория в GitHub Desktop / Desktop.github.com / Ноябрь 2025
Теперь переместите файлы сайта в эту папку. Скопируйте index.html, style.css, script.js, папку images из старого места в папку репозитория. Как обычное копирование файлов, только в специальную папку.
Вернитесь в GitHub Desktop. Видите изменения? Слева список файлов с галочками. Это новые файлы, которые вы добавили. Программа автоматически их обнаружила.
GitHub Desktop / Desktop.github.com / Ноябрь 2025
Внизу слева поле для сообщения коммита. Напишите: «Добавлены основные файлы сайта ADC Hub». Нажмите синюю кнопку «Commit to main», зафиксировать в главной ветке. Изменения зафиксированы локально.
Но они пока на вашем компьютере, не на GitHub. Нужно отправить. Наверху появилась кнопка «Push origin», отправить на origin. Origin это имя удалённого репозитория на GitHub. Нажмите кнопку. Файлы загружаются.
История файлов в GitHub Desktop / Desktop.github.com / Ноябрь 2025
Через несколько секунд загрузка завершится. Вернитесь в браузер. Обновите страницу репозитория на GitHub. Видите файлы? index.html, style.css, script.js, папка images. Всё на месте. Проект опубликован на GitHub.
Теперь когда меняете файлы, процесс простой. Редактируете style.css в VS Code. Сохраняете. Открываете GitHub Desktop. Видите изменения. Пишете сообщение коммита: «Изменён цвет заголовка». Нажимаете «Commit to main». Нажимаете «Push origin». Готово, изменения на GitHub.
GitHub Desktop показывает, что именно изменилось. Красным выделяет удалённые строки, зелёным добавленные. Видите: «Было так, стало так». Это помогает контролировать изменения. Случайно удалили важную строку? Увидите в GitHub Desktop до коммита, вернёте.
Файлы сайта ADC Hub загружены на GitHub. Репозиторий создан, код сохранён, история версий ведётся. Но сайт пока не доступен в интернете. Откройте репозиторий на GitHub, видите файлы, но это не рабочий сайт. Это как книга на складе издательства, напечатана, но люди её ещё не читают.
Чтобы сайт заработал в интернете, нужен хостинг. Место, где файлы лежат на сервере круглосуточно, доступны всем. Обычно хостинг платный, но GitHub предлагает бесплатный хостинг для статичных сайтов. Называется GitHub Pages.
Pages.github.com / Ноябрь 2025
GitHub Pages это сервис, который превращает репозиторий в работающий сайт. Нажимаете кнопку, GitHub берёт ваши HTML, CSS, JavaScript, запускает сервер, даёт адрес. Всё бесплатно, без ограничений по трафику. Идеально для портфолио, документации, учебных проектов, таких как ADC Hub.
Включим GitHub Pages для репозитория. Откройте репозиторий на GitHub в браузере. Видите вкладки Code, Issues, Pull requests? Справа есть вкладка Settings, настройки. Кликните на неё.
Откроется страница настроек. Слева длинное меню с разделами. Прокрутите вниз. Найдите раздел Pages. Кликните на него. Откроется страница настроек GitHub Pages.
Видите блок «Build and deployment», сборка и развёртывание? Внутри выпадающий список «Source», источник. По умолчанию там «None», ничего. Это значит GitHub Pages выключен. Нажмите на список. Откроются варианты.
Выберите «Deploy from a branch», развернуть из ветки. Ниже появится ещё один список «Branch», ветка. Выберите «main» или «master», в зависимости от того, как называется главная ветка репозитория. Обычно это main.
Справа от списка веток есть второй список с папками. Там два варианта: / (root) и /docs. Выберите / (root), это корень репозитория. GitHub Pages будет искать index.html в корне.
Нажмите кнопку Save, сохранить. Настройки применятся. Страница обновится. Вверху появится сообщение: «Your site is live at https://username.github.io/adc-hub. Это адрес вашего сайта.
Публикация сайта через GitHub Pages / Pages.github.com / Ноябрь 2025
Но сайт ещё не готов. GitHub Pages нужно время, чтобы собрать сайт. Обычно 1-3 минуты. Подождите. Обновите страницу. Сообщение изменится: «Your site is ready to be published at…» станет «Your site is published at…».
Скопируйте ссылку. Откройте в новой вкладке. Видите сайт? Заголовок «ИСТОРИЯ ADC HUB», параграфы, стили, всё работает. Сайт живой, в интернете, доступен всем. Отправьте ссылку другу, он увидит то же самое.
Теперь при каждом изменении файлов сайт обновится автоматически. Изменили цвет заголовка в style.css? Сделали коммит, отправили на GitHub. Через минуту изменения появятся на сайте. GitHub Pages следит за репозиторием и пересобирает сайт при каждом коммите в ветку main.
Адрес сайта выглядит так: https://username.github.io/repository-name/. Если репозиторий называется adc-hub, адрес https://username.github.io/adc-hub/. Если хотите короткий адрес без названия репозитория, создайте репозиторий с именем username.github.io. Тогда адрес будет просто https://username.github.io/.
Теперь давайте изменим ссылки в на наш новый сайт
Вы прошли путь от пустого экрана до работающего сайта в интернете, и это немалое достижение. Многие начинают учить веб-разработку и бросают на первых шагах, но вы дошли до конца: создали структуру через HTML, оформили через CSS, добавили интерактивность через JavaScript, подключили аналитику и опубликовали на GitHub Pages. Сайт ADC Hub теперь живёт по адресу в интернете, доступен всем, и это ваша работа. Помните: это только начало, веб-разработка огромная область, но вы освоили фундамент, на котором строится всё остальное. Пишите код каждый день, создавайте свои проекты, не бойтесь ошибок, участвуйте в сообществах, учите английский и документируйте свой путь. Возможно, веб-разработка станет вашей профессией, возможно хобби, а может быть, вы создадите стартап или просто сделаете сайт для семейного бизнеса. Спасибо, что прошли этот курс, надеюсь, вы не просто читали, а делали, пробовали, экспериментировали. Удачи в дальнейшем обучении, пишите код, создавайте сайты, решайте проблемы — интернет ждёт ваших идей, и у вас теперь есть всё, чтобы их реализовать.
