Урок 7. Как опубликовать сайт на GitHub Pages

В этом уроке мы узнаем, как загрузить наш проект на GitHub и опубликовать его на GitHub Pages. Это простой и бесплатный способ сделать свой сайт доступным в интернете. GitHub Pages автоматически размещает ваши файлы на сервере и предоставляет URL-адрес для доступа к вашему сайту.

Шаг 1: Создаём репозиторий на GitHub

Первым делом, вам нужно создать аккаунт на GitHub (если у вас его ещё нет). Затем выполните следующие шаги:

1. Перейдите на главную страницу вашего профиля и нажмите на кнопку "New" для создания нового репозитория.

2. Дайте репозиторию имя, например, portfolio.

3. Выберите "Public" для того, чтобы репозиторий был виден всем.

4. Не забудьте поставить галочку рядом с "Initialize this repository with a README".

5. Нажмите на кнопку "Create repository".

Шаг 2: Загружаем файлы в репозиторий

Теперь вам нужно загрузить файлы вашего проекта (HTML, CSS, изображения) в созданный репозиторий. Это можно сделать двумя способами:

1. Загружаем через интерфейс GitHub:

1. На странице репозитория нажмите кнопку "Add file", затем "Upload files".

2. Перетащите файлы с вашего компьютера или выберите их через проводник.

3. После загрузки файлов нажмите на кнопку "Commit changes".

2. Используем Git для загрузки через терминал::

Если у вас установлен Git, откройте терминал и выполните следующие команды:

# Клонируем ваш репозиторий на компьютер
git clone https://github.com/ваш_ник/portfolio.git

# Переходим в папку с проектом
cd portfolio

# Добавляем все файлы проекта
git add .

# Создаём коммит с описанием
git commit -m "Добавил файлы портфолио"

# Отправляем изменения в репозиторий на GitHub
git push origin main

Шаг 3: Настраиваем GitHub Pages

Теперь, когда ваш проект загружен на GitHub, давайте настроим GitHub Pages для публикации сайта:

1. На странице репозитория перейдите во вкладку "Settings".

2. Прокрутите вниз до раздела "Pages".

3. В разделе "Branch" выберите main (или master, если у вас используется эта ветка).

4. Нажмите "Save".

После этого GitHub начнёт публиковать ваш сайт. Через несколько секунд вы увидите URL-адрес, по которому будет доступен ваш сайт. Обычно он выглядит так: https://ваш_ник.github.io/portfolio.

Шаг 4: Проверяем сайт

Откройте выданный GitHub адрес в браузере и убедитесь, что ваш сайт загружен и работает корректно. Если какие-то файлы не отображаются, проверьте правильность их путей в коде (особенно для файлов стилей и изображений).

Что дальше?

Поздравляю! Вы успешно опубликовали свой сайт с помощью GitHub Pages. Теперь вы можете делиться ссылкой на своё портфолио с друзьями, коллегами и потенциальными работодателями.