1/18

Создаем Wiki-страницу класса вместе

Знакомство с GitHub, Markdown и командной работой за 2 часа

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

Что мы сделаем за это время:
1
Зарегистрируемся на GitHub и создадим общий проект
2
Научимся оформлять тексты с помощью Markdown
3
Каждый создаст свою личную страницу в общем репозитории
4
Свяжем все страницы в один работающий сайт
Подготовка к работе

Для работы вам понадобится:

  • Компьютер с доступом в интернет
  • Браузер (Chrome, Firefox, Edge)
  • Электронная почта для регистрации
2/18

Сегодня мы сделаем это

Процесс работы
Ваш браузер
Вы работаете с файлами
GitHub.com
Хранятся файлы и история изменений
Наш общий сайт в интернете!
Результат виден всем по ссылке

К концу занятия у нас будет настоящий работающий сайт, созданный совместными усилиями всего класса!

3/18

Зачем это нужно?

Показываем реальные примеры

Пример 1: README.md популярного проекта

Так выглядит главная страница проекта freeCodeCamp на GitHub:

freeCodeCamp/freeCodeCamp
https://github.com/freeCodeCamp/freeCodeCamp

freeCodeCamp.org's open-source codebase and curriculum

Learn to code for free. Build projects. Earn certifications.

JavaScript HTML CSS

Ключевой момент: Вся эта информация оформлена с помощью Markdown!

Главная идея

GitHub — это "социальная сеть для программистов", где можно:

  • Хранить код и другие файлы
  • Совместно работать над проектами
  • Отслеживать изменения и историю
  • Создавать сайты и документацию

И сегодня вы попробуете это на практике!

4/18

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

Пошаговая демонстрация (повторяйте за мной)
1
Перейдите на github.com
2
Нажмите кнопку "Sign up" в правом верхнем углу
3
Введите email, который у вас всегда под рукой
4
Придумайте логин (это будет частью ссылки на ваш профиль)
5
Создайте надежный пароль и запомните его
6
Пройдите проверку (решите капчу, если появится)
7
Введите код подтверждения из email
8
На вопрос "What do you want to do?" выберите "Skip personalization"
Время на регистрацию: 10 минут

Не торопитесь, внимательно заполняйте все поля. Ваш логин должен быть запоминающимся!

Когда зарегистрируетесь, сообщите мне свой логин для добавления в общий проект.

5/18

Шаг 2 — Создаем "Команду"

(Организацию на GitHub)

Демонстрация (делает преподаватель)
1
В правом верхнем углу нажимаем на аватарку → "Your organizations"
2
Нажимаем "New organization"
3
Выбираем бесплатный тариф "Free"
4
Придумываем название: web-group-45 или school-team-2024
5
Нажимаем "Create organization"
Важная информация

Название организации будет частью адреса нашего сайта!

Пример: если организация называется web-group-45, то сайт будет доступен по адресу:

https://web-group-45.github.io/...
6/18

Шаг 3 — Создаем общий проект

(Репозиторий на GitHub)

Демонстрация (продолжает преподаватель)
1
Внутри организации нажимаем "New repository"
2
Repository name: class-wiki (имя проекта)
3
Description: "Коллективный сайт нашего класса"
4
Выбираем Public (публичный, чтобы все видели)
5
Ставим галочку "Add a README file" (создаст первый файл)
6
Жмем "Create repository"

"Общая папка" создана!

Теперь у нас есть место, где мы будем хранить все файлы нашего проекта.

7/18

Что мы видим? Интерфейс репозитория

Знакомство с элементами интерфейса
Code
Issues
Pull requests
Actions
Projects
Кнопка для клонирования репозитория
README.md
Главный файл с описанием проекта
Главная кнопка для создания новых файлов
Краткий словарь
  • Code — здесь находятся все файлы проекта
  • Issues — система задач для проекта
  • Pull requests — предложения изменений в проект
  • README.md — главный файл с описанием проекта (в формате Markdown)
8/18

Приглашаем команду!

Демонстрация (делает преподаватель)
1
Переходим во вкладку "Settings" (справа вверху)
2
В боковом меню выбираем "Collaborators and teams"
3
Нажимаем "Add people"
4
Вводим логины студентов, которые успели зарегистрироваться
5
Каждый студент получает email-приглашение и должен его принять
Что делать студентам

После того как преподаватель добавит вас в проект:

  1. Проверьте свою электронную почту
  2. Найдите письмо от GitHub с приглашением
  3. Нажмите кнопку "Accept invitation" в письме
  4. Теперь вы можете редактировать файлы в репозитории!
9/18

Язык Markdown за 5 минут

Простой синтаксис для оформления текстов
Что хотим сделать Пишем так в Markdown Как это будет выглядеть
Заголовок 1 уровня # Самый главный

Самый главный
Заголовок 2 уровня ## Меньше

Меньше
Список - Пункт 1
- Пункт 2
  • Пункт 1
  • Пункт 2
Жирный текст **жирный текст** жирный текст
Курсив *курсивный текст* курсивный текст
Ссылка [Google](https://google.com) Google
Демонстрация редактирования

Давайте посмотрим, как редактировать файл прямо на GitHub:

  1. Откройте файл README.md
  2. Нажмите на значок карандаша (иконка редактирования)
  3. Внесите изменения в тексте
  4. Переключитесь на вкладку "Preview" чтобы увидеть результат
10/18

Задание для каждого

Создайте свою личную страницу

Цель: Создать файл ВашеИмя.md с информацией о себе
1
Перейдите в репозиторий class-wiki (ссылку даст преподаватель)
2
Нажмите кнопку "Add file" → "Create new file"
3
В поле имени файла введите: ivanov_ivan.md (латиницей, маленькими буквами)
4
Скопируйте шаблон со следующего слайда в окно редактирования
5
Измените данные на свои
6
Прокрутите вниз. В поле "Commit changes" напишите: Добавил страницу Ивана
7
Оставьте галочку "Commit directly to the main branch"
8
Нажмите "Commit new file"
Роль преподавателя

Пока студенты выполняют задание:

  • Ходите по классу и помогайте тем, у кого возникают трудности
  • Отвечайте на вопросы
  • Через 10-15 минут в репозитории уже будет 10-15 новых файлов!
11/18

Шаблон для личной страницы

Код для копирования
# Ваше Имя Фамилия

## Обо мне
- **Любимый предмет:** Информатика
- **Хобби:** Играю на гитаре, программирую
- **Цель на год:** Выучить Python

## Мой топ-3
1. Игра: Minecraft
2. Сериал: Секретные материалы
3. Книга: "Мастер и Маргарита"

## Ссылка на крутой ресурс
[Здесь я учусь программировать](https://htmlacademy.ru)

---
Страница создана в рамках занятия по GitHub

Иван Иванов

Обо мне

  • Любимый предмет: Информатика
  • Хобби: Играю на гитаре, программирую
  • Цель на год: Выучить Python

Мой топ-3

  1. Игра: Minecraft
  2. Сериал: Секретные материалы
  3. Книга: "Мастер и Маргарита"

Ссылка на крутой ресурс

Здесь я учусь программировать

Страница создана в рамках занятия по GitHub

Скопируйте этот код, замените данные на свои и создайте файл!

12/18

Проблема! Как сделать общую страницу?

Постановка задачи

"Теперь давайте создадим главную страницу index.md, где будут ссылки на всех участников."

Демонстрация (делает преподаватель):

1
Создаем файл index.md
2
Пишем в нем:
# Вики-страница нашего класса!

Здесь собраны страницы всех участников проекта:

## Участники:
- [Иван Иванов](ivanov_ivan.md)
3
Коммитим файл
Задача для студентов

"Теперь каждый должен добавить в этот список СВОЮ ссылку!"

Пример того, что нужно добавить:

- [Анна Петрова](petrova_anna.md)
- [Сергей Сидоров](sidorov_sergey.md)
13/18

Что случится? Конфликт изменений

Демонстрация конфликта
1
Два человека одновременно откроют index.md для редактирования
2
Первый успеет сохранить (скоммитить) свои изменения

Второй получит ошибку!

"This file has been changed by someone else. You cannot merge your changes until you pull their changes."

(Этот файл был изменен кем-то другим. Вы не можете объединить свои изменения, пока не получите их изменения.)

3
Объяснение: "GitHub защищает нас от потери чужих изменений. Это и есть основа командной работы — нужно учитывать работу других!"
Командная работа в действии

Конфликты — это нормальная часть совместной работы. Они возникают, когда несколько человек пытаются изменить одно и то же.

Главное — научиться их решать цивилизованно!

14/18

Решение: Работаем по очереди или...

(Рассказываем про Git)

Два подхода к решению

Простой выход

Можно работать по очереди или договориться, кто какую строчку добавляет.

Алгоритм:

  1. Обновите страницу с файлом
  2. Если файл изменился — скопируйте свежую версию
  3. Добавьте свою строку
  4. Сохраните изменения

"Взрослое" решение

Использовать Git на компьютере. Объясняем цикл работы:

git pull # скачать свежую версию
# изменить свой файл
git add . # отметить изменения
git commit -m "добавил ссылку" # сохранить с комментарием
git push # отправить изменения на GitHub
Что выбрать для первого занятия?

На первом занятии можно остановиться на простом решении — работе по очереди через веб-интерфейс.

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

15/18

Волшебная кнопка — GitHub Pages

Демонстрация (делает преподаватель)
1
Идем в "Settings" → "Pages"
2
В разделе "Branch" выбираем main и папку / (root)
3
Жмем "Save"
4
Появляется ссылка вида:
https://web-group-45.github.io/class-wiki/

Ждем 1-2 минуты...

GitHub нужно немного времени, чтобы собрать и опубликовать наш сайт.

5
ОТКРЫВАЕМ ССЫЛКУ!
16/18

Наш результат!

На большом экране открывается сайт

Вики-страница нашего класса!

Здесь собраны страницы всех участников проекта:

Участники:

Сайт создан с помощью GitHub Pages. Последнее обновление: сегодня.

Это реальный сайт в интернете, созданный вами за 1,5 часа!

По ссылкам можно переходить на страницы каждого студента.

17/18

Что мы сегодня узнали?

GitHub

Платформа для хранения кода и совместной работы. Наша "социальная сеть для программистов".

Markdown

Простой язык разметки для оформления текстов. Основа документации на GitHub.

Командная работа

Как согласовывать изменения, избегать конфликтов и работать вместе над одним проектом.

И самое главное...

Мы создали реальный проект, который можно показать друзьям и родителям!

Сайт живет в интернете и будет доступен даже после окончания занятия.

18/18

Домашнее задание

(по желанию)

1

Улучшите свою страницу

Добавьте на свою страницу:

  • Картинку (ваше фото или аватар)
  • Таблицу с расписанием занятий
  • Блок с кодом (например, пример программы на Python)
  • Используйте цитаты и другие элементы Markdown
2

Помогите соседу

Исправьте ошибку на странице соседа:

  1. Найдите страницу с опечаткой или ошибкой
  2. Нажмите "Edit this file"
  3. Исправьте ошибку
  4. При сохранении выберите опцию "Create a new branch and start a pull request"
  5. Напишите комментарий, что вы исправили

Так вы познакомитесь с системой Pull Requests!

3

Создайте новую тему

Создайте новую папку в репозитории и сделайте там страницу на любую тему:

  • Игры, которые мы любим
  • Лучшие фильмы 2024 года
  • Спортивные достижения класса
  • Полезные ресурсы для учебы
  • Шутки и мемы про школу

Пригласите друзей добавить контент в вашу тему!

Спасибо за работу!

Вопросы?

Не стесняйтесь спрашивать — мы только начинаем наш путь в мире GitHub!