Працюємо з GitHub через WebStorm

10.1 Клонування репозиторію

Пам'ятаєте, я розповідав вам про 3 місця зберігання файлів? Віддалений репозиторій, локальний репозиторій та робоча директорія.

Так от, зараз потрібно буде клонувати ваш віддалений репозиторій (який ви створили на GitHub) у ваш локальний репозиторій (репозиторій на вашому комп'ютері).

Тому запускайте WebStorm і починаємо…

Крок 1. Закрийте проект, якщо він відкритий. І натисніть Clone Repository

Крок 2. Укажіть url вашого віддаленого репозиторію, який ви хочете клонувати на комп'ютер.

Такий спосіб корисний, якщо ви клонуєте чийсь репозиторій.

Якщо ви клонуєте свій, буде простіше залогінитися на GitHub через WebStorm:

Виберіть проект і тисніть Clone

Крок 3. Нікому не можна довіряти. Навіть собі.

WebStorm попереджає, щоб ви не запускали код з невідомих репозиторіїв. Оскільки це ваш власний репозиторій, ставимо галочку довіряти.

Крок 4. Стандартний антивірус у Windows попереджає, що з'явилися якісь невідомі файли. Антивірус взагалі не любить невідомі йому програми.

АЛЕ! Ми збираємося ці самі програми створювати, тому просимо IDE сказати антивірусу, щоб він не блокував ваші майбутні програми. Клацайте по кнопці Automatically, а потім — YES.

10.2 Перший коміт

Якщо ви клонували щойно створений репозиторій, він міститиме лише один файл — README.md

Крок 1. Відкрийте файл README.md

Змініть цей файл так, як вам захочеться: можете написати будь-яке привітальне повідомлення, або опис репозиторію.

Крок 2. Після того, як ви внесли зміни до файлу, WebStorm відобразить його синім кольором у дереві файлів ліворуч. Синім кольором відображаються всі змінені файли, якщо зміни у вашій робочій директорії ще не внесені до локального репозиторію.

Крок 3. Коміт

Після того, як ви внесли у файл або файли всі заплановані зміни (і переконалися в їх правильності), нам потрібно залити їх у ваш локальний Git-репозиторій. Поки що вони знаходяться тільки у вашій робочій теці.

Для цього вам потрібно клацнути по кнопці Commit і відзначити всі файли, зміни яких ви хочете внести до локального репозиторію:

Крок 4. І натискаєте кнопку Commit.

Крок 5. Перевірка

Перемикаєтеся у ваш проект і дивіться: якщо файли перестали світитися синім, значить всі зміни вашої робочої директорії успішно внесені до вашого локального репозиторію.

10.3 Робота з файлами

Крок 1. Давайте створимо файл у WebStorm.

Ми ж пишемо HTML-код — нехай це буде main.html

Крок 2. Додаємо файл до локального репозиторію.

Як тільки WebStorm побачила, що ви створили файл, вона одразу запропонувала додати його до вашого локального репозиторію. WebStorm відстежує зміни лише тих файлів у вашій робочій директорії, які вже знаходяться у вашому локальному репозиторії — тільки їх вона буде позначати синім кольором.

Якщо файл є у вашій робочій директорії, але у локальному репозиторії його немає, він позначається червоним — як на картинці нижче:

В принципі ви завжди можете натискати Add, але давайте цього разу ми натиснемо Cancel і потім додамо файл вручну, щоб ви знали, як це робити.

Крок 3. Пишемо у файлі ваш улюблений код.

Я, наприклад, написав: <h1>FIRST COMMIT</h1>

Крок 4. Тепер давайте додамо наш файл main.html до локального репозиторію.

Просто клацніть у будь-якому місці файлу правою кнопкою мишки і виберіть Git --> Add File

Якщо все пройшло успішно, доданий файл буде світитися зеленим:

Крок 5. Далі комітимо його за старою схемою:

10.4 Перший push

Тепер нам потрібно залити наші зміни у локальному репозиторії до віддаленого репозиторію на GitHub. Коли кілька програмістів працюють над одним проектом, вони таким способом синхронізують свої зміни коду.

Крок 1. Клацаємо по кнопці Push.

Насправді це зробити дуже легко: вам просто потрібно буде скористатися кнопкою Push у верхньому меню вашої IDE:

Крок 2. Підтверджуємо внесені коміти.

На цьому кроці ви можете переглянути всі внесені зміни і переконатися, що не зламали випадково щось важливе. Або не забули додати файл, від якого залежать інші файли.

Крок 3. Перевіряємо.

Якщо все пройшло успішно, то ви побачите повідомлення типу такого:

Крок 4. А тепер відкривайте ваш GitHub репозиторій і перевіряйте:

Магія технологій!

10.5 Використання .gitignore-файлів

Якщо ви додали у ваш проект якісь службові файли і не хочете, щоб вони випадково потрапили до репозиторію, можете додати їх до виключень. Для цього є файл з іменем .gitignore. Це дуже зручно, коли у проекті є файли, які не потрібно зберігати у системі контролю версій (наприклад, тимчасові файли, логи, паролі).

Крок 1. Для початку створіть файл у каталозі проекту. Наприклад, .txt файл з будь-яким іменем. Після створення файлу натисніть Cancel.

Крок 2. Клацніть правою кнопкою миші по створеному файлу hacky_fix_that_somehow_works.txt у вікні "Project". Перейдіть до Git --> Add to .gitignore --> Add to .gitignore. Ця опція додає вибраний файл до файлу .gitignore у корені вашого проекту.

Крок 3. Створіть .gitignore у вашому проекті.

WebStorm автоматично додасть ім'я файлу hacky_fix_that_somehow_works.txt до вашого файлу .gitignore.

Після додавання файлів до .gitignore вони будуть відображатися коричневим кольором. При спробі зафіксувати зміни ці файли будуть проігноровані.

Файл .gitignore впливає тільки на файли, які ще не були зафіксовані (закомічені) в репозиторії Git. Якщо файл вже був закомічений, то для його ігнорування потрібно спочатку видалити його з репозиторію.

Не забудьте закомітити сам файл .gitignore в репозиторії Git та відправити зміни на GitHub, щоб усі учасники проєкту використовували однакові правила ігнорування файлів.

Виключення локальних файлів .git/info/exclude

Окрім файлу .gitignore, який використовується для виключення файлів для всіх користувачів проєкту, Git надає можливість створювати локальні правила ігнорування .git/info/exclude, які не будуть зафіксовані в репозиторії та діятимуть лише для вашої локальної копії проєкту.

Це може бути корисним, наприклад, для ігнорування файлів, створених вашим IDE, які не повинні потрапляти до системи контролю версій.

Важливо. Локальні правила ігнорування діють лише для вашої локальної копії репозиторію.

Правила для .gitignore

У файлі .gitignore вказуються шаблони імен файлів та тек, які git повинен ігнорувати.

Порожні рядки ігноруються. Щоб додати коментар, почніть рядок із символу #.

Шаблони:

• * - замінює будь-яку кількість будь-яких символів. Наприклад, *.log ігнорує всі файли з розширенням .log.
• ? - замінює один будь-який символ. Наприклад, temp?.txt ігнорує файли temp1.txt, temp2.txt і т.д.
• [] - вказує діапазон символів. Наприклад, [abc] відповідає будь-якому з символів a, b або c.
• ! - виключає файли, що відповідають шаблону. Наприклад, !important.txt буде відстежувати файл important.txt, навіть якщо є правило *.txt.
• / - на початку шаблону вказує на корінь репозиторію. /temp/ ігнорує теку temp у корені репозиторію.
• ** - відповідає будь-якій кількості вкладених тек. Наприклад, **/temp ігнорує теки temp на будь-якому рівні вкладеності.

Приклад файлу

# Логи
logs/*
*.log

# Папки, що створюються WebStorm
.idea/
*.iml

# Тимчасові файли
*.tmp
*.swp
*~

# Файли, що створюються при збірці проекту
dist/
build/

# Залежності
node_modules/
bower_components/

# Файли конфігурації
.eslintrc.js
.prettierrc.js

# Тестові дані
coverage/
cypress/screenshots/
cypress/videos/

Готові шаблони

1. Колекція .gitignore для різних мов програмування та середовищ розробки: https://github.com/github/gitignore
2. gitignore.io - веб-сервіс, призначений допомогти створювати файли .gitignore