GitHub для начинающих

Полное руководство по созданию и размещению сайта на GitHub Pages

Время изучения: 20 мин Уровень: Начальный Обновлено: Окт 2023

1
Что такое GitHub и для чего он нужен?

GitHub — это крупнейшая платформа для хостинга IT-проектов и совместной разработки. Представьте её как социальную сеть для программистов, где можно хранить код, работать над проектами вместе с другими разработчиками и делиться своими наработками.

Основные возможности GitHub:

Хранение кода в репозиториях (специальных папках-проектах)
Система контроля версий Git — отслеживание всех изменений в коде
GitHub Pages — бесплатный хостинг для статических сайтов
Совместная работа через Issues, Pull Requests и Code Review
Сообщество разработчиков — можно найти проекты для участия

А чем GitHub отличается от Git?

Git — это система контроля версий, программа, которую вы устанавливаете на компьютер. Она отслеживает изменения в файлах.

GitHub — это веб-сервис, который использует Git для хранения кода в облаке. Это как Dropbox или Google Drive, но специально для кода с дополнительными инструментами для разработчиков.

Простая аналогия: Git — это двигатель автомобиля, а GitHub — это весь автомобиль с салоном, колёсами и рулём.

2
Регистрация и создание первого сайта

Шаг 1: Регистрация на GitHub

Перейдите на сайт github.com
Нажмите кнопку "Sign up" в правом верхнем углу
Заполните форму: email, пароль, имя пользователя
Подтвердите свою учётную запись через email

Шаг 2: Создание репозитория для сайта

Репозиторий — это папка, где будет храниться код вашего сайта. Для главного сайта нужно создать репозиторий с особым именем:

Специальное имя репозитория

username.github.io

Где username — это ваше имя пользователя на GitHub. Например, если ваш логин ivanov, то репозиторий должен называться ivanov.github.io.

1. Регистрация

Создайте аккаунт на GitHub

2. Создание

Новый репозиторий

3. Написание кода

Добавьте HTML, CSS файлы

4. Публикация

Включите GitHub Pages

3
Создание файлов сайта

Каждый сайт начинается с файла index.html — это главная страница. Создайте этот файл в своём репозитории:

index.html - базовая структура

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый сайт на GitHub</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый сайт на GitHub Pages!</p>
</body>
</html>

Советы для начинающих

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

Совет 2: Используйте готовые шаблоны. На GitHub есть тысячи бесплатных шаблонов. Найдите подходящий и адаптируйте под себя.

Совет 3: Добавляйте изменения постепенно. Сначала HTML, потом CSS, потом JavaScript.

4
Включение GitHub Pages

GitHub Pages — это встроенный хостинг для статических сайтов. Чтобы его активировать:

Перейдите в свой репозиторий на GitHub
Нажмите на вкладку "Settings" вверху
В боковом меню найдите раздел "Pages"
В разделе "Source" выберите ветку "main" (или "master")
Нажмите "Save"

Через 1-2 минуты ваш сайт будет доступен по адресу:

https://ваше-имя-пользователя.github.io

Например: https://ivanov.github.io

Частые проблемы и решения

Проблема: Сайт не загружается, показывает 404 ошибку.

Решение: Убедитесь, что файл называется именно index.html (с маленькой буквы i) и находится в корне репозитория, а не в папке.

Проблема: Изменения не отображаются на сайте.

Решение: GitHub может обновлять сайт до 10 минут. Подождите и обновите страницу через Ctrl+F5 (полное обновление).

Практическое задание

Создайте свой первый сайт на GitHub Pages за 15 минут:

Зарегистрируйтесь на GitHub (если ещё не сделали)

Создайте репозиторий с именем username.github.io

Добавьте файл index.html с любым содержимым

Включите GitHub Pages в настройках репозитория

Поделитесь ссылкой на ваш сайт в комментариях

Бонус: Добавьте CSS-стили, чтобы сделать сайт красивее!

5
Что дальше?

Поздравляем! Вы создали свой первый сайт на GitHub. Теперь можете:

Добавить CSS-стили — создайте файл style.css и подключите его к HTML
Создать дополнительные страницы — about.html, contact.html и т.д.
Использовать шаблоны — найдите готовый дизайн и адаптируйте под себя
Изучить другие платформы — переходите к изучению GitLab, Bitbucket и других сервисов

Для углубленного изучения

Рекомендуем пройти бесплатный курс GitHub Pages Documentation и изучить систему Git более подробно.

1 Что такое GitHub и для чего он нужен?

2 Регистрация и создание первого сайта