Инструкция 2: Как опубликовать простой сайт в интернете

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

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

Проект включает в себя:

• HTML-файлы с разметкой сайта: в index.html находится разметка главной страницы, а в остальных HTML-файлах контент страниц блога;
• в файле style.css находятся стили для всего сайта; обратите внимание, что один и тот же файл стилей подключается на всех страницах сайта, то есть в этом CSS-файле собраны стили для всех используемых элементов;
• ещё в проекте есть две папки: в папке files собраны контентные изображения из блога, а также файл с рецептом; в папке img — общие картинки сайта: фон страницы, фоновый паттерн и аватар с главной страницы.

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

Окей, со структурой проекта разобрались. А теперь давайте разберёмся, как опубликовать наш сайт в интернете.

Для этой задачи используем платформу GitHub. Это популярная платформа для разработчиков, которая позволяет бесплатно опубликовать простой сайт.

Для начала зарегистрируемся на Гитхабе. Откроем главную страницу. Здесь в форме нужно ввести логин, электронную почту и пароль для создания учётной записи. Нажимаем «Зарегистрироваться».

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

Итак, мы зарегистрировались. Что дальше? А дальше нам нужно создать хранилище, где будет лежать код сайта. Нажимаем ссылку New repository.

Далее нужно выбрать название для хранилища, например, my-site, указать тип репозитория (у нас будет публичный) и создать его.

Далее, для того, чтобы удобно заливать код на сайт, нужно установить на компьютер программу GitHub Desktop. Она доступна для Windows или macOS.

Нажимаем кнопку Set up in Desktop, переходим на страницу с программой, скачиваем её, устанавливаем и запускаем.

Теперь нужно залогиниться в программе. Давайте введём логин и пароль, с помощью которых вы регистрировались на Гитхабе.

GitHub Desktop показывает список ваших репозиториев. Пока что в списке всего одно хранилище, то, которое мы создавали чуть раньше. Выбираем его и нажимаем клонировать.

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

Откроем папку проекта, она сейчас пуста. Теперь нужно скопировать в эту папку файлы нашего сайта. Возвращаемся к программе GitHub Desktop и видим, что в ней появился список файлов для отправки в хранилище на Гитхаб. Введём краткое описание, что именно делает это изменение, например, «добавляет файлы сайта» и нажимаем кнопку Commit. Теперь изменения готовы для отправки на Гитхаб. Опубликуем их с помощью кнопки Publish branch.

Пойдёмте на сайт Гитхаба и убедимся, что наши файлы действительно были доставлены. Переходим в хранилище сайта и видим, что наш проект успешно залит на Гитхаб.

Остаётся настроить его, чтобы сайт можно было открыть в браузере. Для этого нужно перейти в настройки репозитория Settings, пролистать настройки вниз до раздела GitHub Pages и в выпадающем списке выбрать ветку master. Изменения сохранены.

Давайте теперь попробуем открыть сайт в браузере. Он будет доступен по адресу: [ваш логин на Гитхабе].github.io/[название сайта]. Сайт открывается и теперь доступен в интернете.

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

Затем в программе GitHub Desktop, когда вы увидите эти изменения, вам нужно написать краткое описание и отправить их на сайт.

Через несколько секунд изменения появятся на сайте.