Logo Created with 💖 By CandidDeer
Чи хотіли б ви бути супроводжуючим цього проєкту та допомагати підтримувати його роботу? Якщо ви зацікавлені, прочитайте посібник з супроводу і надішліть мені повідомлення на Twitter.
- Оголошення
- Вступ
- Для кого це?
- Навіщо це потрібно робити?
- До чого я збираюся внести свій внесок?
- Переклади
- Налаштування
- Наступні кроки
- Подяки
- Зробіть свій внесок
- Крок 1 - Створіть “форк” сховища
- Крок 2 - Зробіть клон сховища
- Крок 3 - Створіть нову гілку
- Крок 4 - Відкрийте основний html файл
- Крок 5 - Скопіюйте шаблон картки
- Крок 6 - Застосуйте зміни
- Крок 7 - Зробіть коміти змін
- Крок 8 - Надішліть зміни в GitHub
- Крок 9 - Відкрийте Запит на Пул (PR)
- Крок 10 - Відсвяткуйте
Тут ми дізнаємося, як зробити внесок у цей проект або в GitHub/Git використовуючи Terminal. Це посібник, який допоможе початківцям долучитися до простого і зрозумілого проєкту.
- Зробіть внесок у проєкт з відкритим кодом.
- Станьте більш досконалими у використанні GitHub.
- Це для абсолютних новачків. Якщо ви знаєте, як написати і відредагувати тег прив'язки
<a href="" target=""></a>, тоді ви можете це зробити. - Це також для тих, хто має трохи більше досвіду, але хоче зробити свій перший внесок в проєкт з відкритим кодом, або зробити більше внесків для більшого досвіду та впевненості.
Будь-який веб-розробник, початківець або досвідчений, повинен повинен вміти контролювати версії Git, і GitHub є найпопулярнішим сервісом Git, яким користуються всі. Це також серце спільноти Open Source. Освоєння GitHub є важливою навичкою. Внесок у проєкт підвищує вашу впевненість і дає вам що показати у своєму профілі GitHub.
Якщо ви новий розробник і вам цікаво, чи потрібно вам вивчати Git та GitHub, то ось відповідь: Ви повинні були вивчити Git вчора.
Ви збираєтеся опублікувати на цій веб-сторінці проєкту картку, схожа на цю. Вона буде включати ваше ім'я, ваш Twitter, короткий опис і 3 посилання на корисні ресурси для веб-розробників, які ви рекомендуєте.
Ви зробите копію шаблону картки всередині HTML-файлу та налаштуєте його за допомогою власної інформації.
Цей посібник також доступний на інших мовах
Вітаються переклади проєктної документації. Прочитайте 'Посібник з перекладу', щоб зробити свій внесок.
Примітка: Якщо ви не дуже добре володієте інтерфейсом командного рядка використовуйте навчальний посібник для GitHub Desktop)
Спочатку, давайте налаштуємо все, щоб виконати роботу
- Увійдіть до свого облікового запису GitHub. Якщо у вас ще немає облікового запису, приєднайтеся до GitHub. Перш ніж продовжити, я рекомендую вам пройти підручник GitHub Hello World.
- Якщо у вас ще немає Git, встановіть його тут
Тепер, коли все налаштовано, давайте приступимо до роботи над внеском у проєкт.
Станьте учасником проєкту з відкритим кодом за 10 простих кроків.
Приблизний час: менше 30 хвилин.
- Мета полягає в тому, щоб зробити копію цього проєкту і помістити її в свій аккаунт.
- Сховище (репозиторій) - це те, як називається проєкт на GitHub, а форк - його копія.
- Переконайтеся, що ви перебуваєте на головній сторінці цього сховища.
 |
|---|
| Натисніть на кнопку Fork |
- Тепер у вас є повна копія проєкту у власному сховищі на GitHub.
- Тепер ми хочемо створити локальну копію проєкту. Тобто це копія, збережена на власному комп'ютері.
- Тепер клонуйте це сховище на свою машину. Натисніть кнопку клонування, а потім клацніть значок копіювання в буфер обміну.
- Сховище (репозиторій) — це те, як проект називається на GitHub, а форк — це його копія.
Відкрийте термінал і виконайте таку команду git:
git clone "url який ви щойно скопіювали"Наприклад:
git clone https://github.com/$Username/Contribute-To-This-Project.gitде $Username це ваше ім’я користувача GitHub. Тут ви копіюєте вміст репозиторію перших внесків на GitHub на свій комп’ютер.
Перейдіть до каталогу сховища на вашому комп’ютері (якщо ви ще там не перебуваєте):
cd Contribute-To-This-ProjectТепер створіть нову гілку за допомогою команди git checkout
git checkout -b назва-вашої-нової-гілкиНаприклад:
git checkout -b add-$Username-cardПримітка: Змініть $Username на ваше ім’я користувача GitHub.
-
Зараз ви створили нову гілку, яка відокремлена від основної.
-
Для наступних кроків переконайтеся, що ви працюєте в цій гілці. Ви побачите назву гілки, у якій ви перебуваєте, у нижній лівій частині текстового редактора, який ви використовуєте, де вказано
$Username-cardяк назву вашої гілки. -
НЕ ПРАЦЮЙТЕ У ГІЛЦІ 'master'
Тепер нам потрібно відкрити файл, який ми збираємося редагувати, за допомогою вашого улюбленого редактора коду. Ми використовуємо VSCode як наш улюблений редактор коду.
- Файл
index.htmlзнаходиться безпосередньо в папціContribute-To-This-Project. - Ви можете відкрити файл за допомогою такої команди:
code index.htmlПримітка: це команда терміналу щоб відкрити файл index.html в VSCode.
- Тепер файл, який ви збираєтеся редагувати, відкритий у вашому редакторі, і ви готові почати вносити в нього зміни.
- Ми зробимо копію шаблону картки, щоб почати працювати над нею
- У верхній частині html-файлу, під розділами
<head>і<header>ви знайдете розділ з міткою== TEMPLATE == - Скопіюйте все в межах червоного квадрата на зображенні з коментаря
Contributor card STARTдо коментаряContributor card END
 |
|---|
- Вставте все це безпосередньо під вказуючим на це коментарем
- Переконайтеся, що між початком вашої картки і кінцем останньої картки є один рядок пробілу. Рекомендується зберігати наш код якомога чіткішим
- Ніколи не використовуйте linter або форматери стилю. Проект має налаштування Prettier
 |
|---|
- Тепер це ваша картка, яку ви можете налаштувати та відредагувати.
- Тепер ми почнемо редагувати html, змінюючи користувацькі поля в нашій картці.
↪️ Замініть Name на ваше ім'я |
 |
|---|
- Примітка: не змінюйте
class="name"
↪️ Вставте URL-адресу свого Твіттера href="Insert URL here", введіть своє ім'я у текстове поле |
 |
|---|
- Якщо ви віддаєте перевагу іншим контактам, крім Твіттера, вам потрібно замінити значок твіттера
<i class="fa fa-twitter"></i>на Font Awesome Icons, знайшовши потрібну піктограму та замінивши лише частинуfa-twitterна новий значок, наприклад,fa-facebook. Потім виконайте ті ж дії, що і вище.
 |
|---|
| ↪️ Розкажіть дещо про вас. Нехай це буде коротким і приємним. Думайте про це більше як твіт, ніж як публікацію в блозі |
 |
| ↪️ Поділіться зі спільнотою 3 посиланнями на ресурси, корисні для веб-розробки. Це може бути що завгодно, відео, виступ, подкаст, стаття, посилання або інструмент. Якщо ви новачок, нехай вас це не лякає, поділіться тим, що знаєте, навіть якщо вважаєте це базовим. Ви здивуєтеся, скільки людей отримають користь. |
- Посилання: вставте посилання
href="сюди"замінючи#. Будь ласка, утримайтеся від використання скорочувачів URL-адрес або URL-адрес, які не належать до сайту, який ви публікуєте! - Заголовок: Напишіть короткий опис
title="сюди". - Назва: Напишіть ім'я ресурсу в текстовому полі
>сюди</a>. - Переконайтеся, що ви зберігли всі зміни.
- Протестуйте свої зміни. ЦЕ ДУЖЕ ВАЖЛИВО! Відкрийте html-файл в браузері (наприклад, двічі клікнувши по ньому) і подивіться, як ваша картка буде виглядати на сайті. Переконайтеся, що вся сторінка виглядає однаково і нічого не зламано. Натисніть на свої посилання та переконайтеся, що вони працюють. Відкрийте консоль (Ctrl + Shift + J (Windows / Linux) або Cmd + Opt + J (Mac)) і перевірте, чи немає повідомлень про помилки.
- Чудово, ви закінчили редагувати код! Наступні кроки надішлють ваші зміни до GitHub, а потім відправлять їх до об'єднання з основним проєктом.
- Тепер відкрийте термінал у каталозі вашого проекту та запустіть команду
git status, і ви помітите, що в git не внесено жодних змін. - Ви можете додати ті зміни, які ви зробили, за допомогою команди
git-add
git add index.html- Тепер зафіксуйте ці зміни за допомогою команди
git commit - Примітка: замініть
$Usernameвашим іменем користувача Github.
git commit -m "Add $Username card info"- Тепер ваші зміни збережено або committed. Але вони зберігаються тільки локально, тобто на вашому комп'ютері.
- Синхронізація локальних змін зі сховищем GitHub називається Push. Ви "проштовхуєте" зміни з локального сховища до віддаленого сховища на GitHub.
- Ми використовуємо команду
git push, щоб надсилати зміни на github. - Примітка: замініть
$Username-cardназвою вашої гілки.
git push -u origin $Username-card- Через кілька секунд операція буде завершена, і тепер у вас є точно така ж копія цієї гілки як на вашому комп'ютері, так і на GitHub.
- Настав момент, якого ви так довго чекали: подання Запиту на Пул (Pull Request - PR).
- Поки що вся робота, яку ви зробили, була пов'язана з форком проєкту, який, як ви пам'ятаєте, знаходиться у вашому власному обліковому записі GitHub.
- Тепер настав час перенести свої зміни в основний проєкт, щоб об'єднати з ним.
- Це називається Pull Request, тому що ви просите супроводжуючого (maintainer) оригінального проєкту "перетягнути" ваші зміни до свого проєкту.
- Перейдіть на головну сторінку вашого форка на GitHub (нагорі буде значок вилки і ваш логін).
- У верхній частині сховища ви побачите виділене повідомлення Pull Request з зеленою кнопкою.
 |
|---|
↪️ Натисніть на кнопку Compare and pull request |
 |
↪️ Приблизно так виглядає сторінка Open a pull request. |
- ПАМ'ЯТАЙТЕ, ви намагаєтеся об'єднати вашу гілку з оригінальним проєктом, а не з гілкою
Masterвашого форка. - Зображення нижче дасть вам уявлення про те, як має виглядати заголовок вашого pull request.
- Зліва - оригінальний проєкт, за яким слідує гілка
Master. Праворуч - ваш форк і гілка, яку ви створили.
 |
|---|
↪️ Створить pull request: введіть заголовок, додайте необов'язкову інформацію в опис і натисніть на Create pull request |
- Нехай вас не бентежать усі варіанти. Поки що вам потрібно виконати лише ці три кроки.
- Залиште опцію
Allow edits from maintainersпозначеною галочкою. - Тепер, ваш Pull Request буде надіслано супроводжуючому оригінального проєкта. Коли він буде розглянутий та прийнятий, ваші зміни з'являться на вкладці веб-сторінки проєкту.
От і все. Ви зробили це! Тепер ви зробили свій внесок у відкритий код на GitHub.
Ви додали код на опубліковану веб-сторінку: https://syknapse.github.io/Contribute-To-This-Project
Ваші зміни не будуть помітні відразу; Спочатку вони повинні бути переглянуті, прийняті та консолідовані супроводжувачем проєкту. Після їх об'єднання ваша картка повинна бути видимою і діючою на сторінці.
Це цілком нормально, якщо рецензент може просити про внесення змін в ваш PR. Вважайте це хорошою практикою, якщо так трапиться з вами. Слідкуйте за коментарями та запитами на внесення змін. Після того, як ви внесли запрошені рецензентом зміни (у свою гілку), все, що вам потрібно, це зробити commit та push ваших змін. PR буде автоматично оновлений новими змінами.
Обіцяю, що постараюся переглянути і об'єднати якомога швидше, але роблю це у вільний час, тому затримка на кілька днів неминуча.
- Поверніться через деякий час, щоб перевірити, як обробився ваш Pull Request.
- Ви повинні отримати електронний лист від GitHub, коли ваші зміни будуть схвалені, або якщо будуть запитані додаткові зміни. І коли PR буде остаточно з'єднаний з master, ваша картка буде додана.
- Ви також можете дізнатися, як зробити свій внесок із цієї безкоштовної серії: Як зробити внесок у проект з відкритим кодом на GitHub
- Якщо ви вважаєте цей проєкт корисним, будь ласка, поставте йому ⭐ зірочку ⭐ у верхній частині сторінки і напишіть Tweet про нього щоб допомогти поширити інформацію
.
- Ви можете стежити за мною і зв'язатися зі мною на Twitter або використайте будь-який з цих інших варіантів.
- Це проєкт з відкритим кодом, тому, окрім додавання вашої картки, ви можете допомогти виправити помилки, покращити або створити нові функції. Відкрийте проблему або надішліть новий pull request.
- Щоб допомогти покращити нашу спільноту, погляньте на розділ GitHub Discussions, розташований поруч з Pull Requests. Це місце, де можна представитися, заглибитися в дискусію Open Source та поспілкуватися з супроводжуючими проєкту. Допоможете нам створити цю функцію та покращити нашу спільноту?
- Дякуємо, що зробили свій внесок у цей проєкт. Тепер ви можете спробувати зробити свій внесок в інші проєкти; зверніть увагу на позначку
, щоб знайти варіанти зробити свій внесок, зручні для початківців. - Я також шукаю співавторів, які могли б допомогти мені з експертною оцінкою та об'єднанням PR. Якщо ви хочете отримати більш просунуту практику Git, будь ласка, напишіть мені DM у Twitter і прочитайте керівництво супроводжуючого.
На цей проєкт сильно вплинула робота Рошана Джоссі Чудові перші внески з його чудовим підручником.
Цей проєкт також особливо надихається великою спільнотою навколо #GoogleUdacityScholars Стипендія Google Challenge: Front-End Web Dev, клас 2017 року в Європі.