Logo Created with 💖 By CandidDeer
Чи хотіли б ви бути супроводжуючим цього проєкту та допомагати підтримувати його роботу? Якщо ви зацікавлені, прочитайте посібник з супроводу і надішліть мені повідомлення на Twitter.
- Оголошення
- Вступ
- Для кого це?
- Навіщо це потрібно робити?
- До чого я збираюся внести свій внесок?
- Переклади
- Налаштування
- Наступні кроки
- Подяки
- Зробіть свій внесок
- Крок 1 - Створіть “форк” сховища
- Крок 2 - Зробіть клон сховища
- Крок 3 - Створіть нову гілку
- Крок 4 - Відкрийте основний html файл
- Крок 5 - Скопіюйте шаблон картки
- Крок 6 - Застосуйте зміни
- Крок 7 - Зробіть коміти змін
- Крок 8 - Надішліть зміни в GitHub
- Крок 9 - Відкрийте Запит на Пул (PR)
- Крок 10 - Відсвяткуйте
Це посібник, який допоможе початківцям долучитися до простого і зрозумілого проєкту.
- Зробіть внесок у проєкт з відкритим кодом.
- Станьте більш досконалими у використанні GitHub.
- Це для абсолютних новачків. Якщо ви знаєте, як написати і відредагувати тег прив'язки
<a href="" target=""></a>, тоді ви можете це зробити. - Це також для тих, хто має трохи більше досвіду, але хоче зробити свій перший внесок в проєкт з відкритим кодом, або зробити більше внесків для більшого досвіду та впевненості.
Будь-який веб-розробник, початківець або досвідчений, повинен повинен вміти контролювати версії Git, і GitHub є найпопулярнішим сервісом Git, яким користуються всі. Це також серце спільноти Open Source. Освоєння GitHub є важливою навичкою. Внесок у проєкт підвищує вашу впевненість і дає вам що показати у своєму профілі GitHub.
Якщо ви новий розробник і вам цікаво, чи потрібно вам вивчати Git та GitHub, то ось відповідь: Ви повинні були вивчити Git вчора.
Ви збираєтеся опублікувати на цій веб-сторінці проєкту картку, схожа на цю. Вона буде включати ваше ім'я, ваш Twitter, короткий опис і 3 посилання на корисні ресурси для веб-розробників, які ви рекомендуєте.
Ви зробите копію шаблону картки всередині HTML-файлу та налаштуєте його за допомогою власної інформації.
Цей посібник також доступний на інших мовах
| Arabic | Bangla | English | French | German |
|---|---|---|---|---|
| Hindi | Italian | Japanese | Korean | Polish |
| Portuguese | Russian | Serbian | Spanish | Turkish |
| Ukrainian |
Вітаються переклади проєктної документації. Прочитайте 'Посібник з перекладу', щоб зробити свій внесок.
Примітка: Цей підручник заснований на GitHub PC. Якщо вам зручно користуватися терміналом, перейдіть до цього підручника (Натисніть тут)
Спочатку, давайте налаштуємо все, щоб виконати роботу
- Увійдіть до свого облікового запису GitHub. Якщо у вас ще немає облікового запису, приєднайтеся до GitHub. Перш ніж продовжити, я рекомендую вам пройти підручник GitHub Hello World.
- Завантажте додаток GitHub Desktop.
- Крім того, якщо вам зручно користуватися Git у командному рядку, ви можете це зробити ось посилання на підручник CLI.
- Якщо ви використовуєте VS Code, він поставляється з інтегрованим Git і дозволяє нам робити те, що нам потрібно, безпосередньо з редактора.
- Однак найпростіший і найлегший спосіб слідувати цьому посібнику - використовувати GitHub Desktop.
Тепер, коли все налаштовано, давайте приступимо до роботи над внеском у проєкт.
Станьте учасником проєкту з відкритим кодом за 10 простих кроків.
Приблизний час: менше 30 хвилин.
- Мета полягає в тому, щоб зробити копію цього проєкту і помістити її в свій аккаунт.
- Сховище (репозиторій) - це те, як називається проєкт на GitHub, а форк - його копія.
- Переконайтеся, що ви перебуваєте на головній сторінці цього сховища.
 |
|---|
| Натисніть на кнопку Fork |
- Тепер у вас є повна копія проєкту у власному сховищі на GitHub.
- Тепер ми хочемо створити локальну копію проєкту. Тобто це копія, збережена на власному комп'ютері.
- Відкрийте настільну програму GitHub. У програмі:
 |
|---|
| Натисніть на File потім на Clone repository |
- Ви побачите список своїх проєктів і форків на GitHub.
- Виберіть
<Ваше-ім'я-користувача-на-github>/Contribute-To-This-Project. - Натисніть Clone
 |
|---|
| ↪️ Форк проєкту матиме символ вилки зліва. Ваш форк матиме ваше ім'я користувача GitHub |  |
|---|
- Знадобиться деякий час, щоб проєкт був скопійований на ваш жорсткий диск. Я рекомендую зберегти шлях за замовчуванням, який зазвичай є
..\Documents\GitHub. - Тепер у вас є локальна копія проєкту.
- Після клонування сховища і відкриття його на робочому столі GitHub, прийшов час створити нову гілку.
- Гілка - це спосіб зберегти ваші зміни окремо від основної частини проєкту під назвою
Master. Наприклад, якщо щось піде не так, і ви незадоволені своїми змінами, ви можете просто видалити гілку, і основний проєкт не постраждає.
↪️ Натисніть на Current branch, потім натисніть на New |
 |
|---|---|
↪️ Дайте назву своїй гілці, а потім натисніть на Create branch |
 |
| ↪️ Опублікуйте нову гілку на GitHub |  |
-
Ви можете назвати її як завгодно, але оскільки це гілка для додавання картки з вашим ім'ям, назвати її
ваше-ім'я-користувача-cardбуде хорошою практикою, оскільки вона зберігає наміри цієї гілки чіткими. -
Зараз ви створили нову гілку, яка відокремлена від основної.
-
Для подальших кроків переконайтеся, що ви працюєте в цій гілці. Ви побачите назву гілки, в якій ви перебуваєте, у верхній центральній частині програми GitHub Desktop, де написано Current branch.
-
НЕ ПРАЦЮЙТЕ У ГІЛЦІ 'master'
- Тепер нам потрібно відкрити файл, який ми збираємося редагувати, за допомогою улюбленого редактора коду.
- Знайдіть папку проєкту на комп'ютері. Якщо ви зберегли папку за замовчуванням, вона має бути приблизно такою:
Ваш комп'ютер > Документи > GitHub > Contribute-To-This-Project. - Файл
index.htmlзнаходиться безпосередньо в папціContribute-To-This-Project. - Відкрийте ваш редактор коду (Sublime, VS Code, Atom.. і т.п.), скористайтеся командою
Open fileі знайдіть файл index.html в головному каталозі проєкту
 |
|---|
| ↪️ Також ви можете знайти файл на жорсткому диску, клацнути правою кнопкою миші та відкрити за допомогою редактора |
- Тепер файл, який ви збираєтеся редагувати, відкритий у вашому редакторі, і ви готові почати вносити в нього зміни.
- Ми зробимо копію шаблону картки, щоб почати працювати над нею
- У верхній частині 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-x-twitter"></i>на Font Awesome Icons, знайшовши потрібну піктограму та замінивши лише частинуfa-x-twitterна новий значок, наприклад,fa-facebook. Потім виконайте ті ж дії, що і вище.
 |
|---|
| ↪️ Розкажіть дещо про вас. Нехай це буде коротким і приємним. Думайте про це більше як твіт, ніж як публікацію в блозі |
 |
| ↪️ Поділіться зі спільнотою 3 посиланнями на ресурси, корисні для веб-розробки. Це може бути що завгодно, відео, виступ, подкаст, стаття, посилання або інструмент. Якщо ви новачок, нехай вас це не лякає, поділіться тим, що знаєте, навіть якщо вважаєте це базовим. Ви здивуєтеся, скільки людей отримають користь. |
- Посилання: вставте посилання
href="сюди"замінючи#. Будь ласка, утримайтеся від використання скорочувачів URL-адрес або URL-адрес, які не належать до сайту, який ви публікуєте! - Заголовок: Напишіть короткий опис
title="сюди". - Назва: Напишіть ім'я ресурсу в текстовому полі
>сюди</a>. - Переконайтеся, що ви зберігли всі зміни.
- Протестуйте свої зміни. ЦЕ ДУЖЕ ВАЖЛИВО! Відкрийте html-файл в браузері (наприклад, двічі клікнувши по ньому) і подивіться, як ваша картка буде виглядати на сайті. Переконайтеся, що вся сторінка виглядає однаково і нічого не зламано. Натисніть на свої посилання та переконайтеся, що вони працюють. Відкрийте консоль (Ctrl + Shift + J (Windows / Linux) або Cmd + Opt + J (Mac)) і перевірте, чи немає повідомлень про помилки.
- Чудово, ви закінчили редагувати код! Наступні кроки надішлють ваші зміни до GitHub, а потім відправлять їх до об'єднання з основним проєктом.
- Поверніться до програми GitHub.
- Внесені зміни буде автоматично додано до області зберігання.
- Це означає, що Git записав усі збережені зміни.
- Ви можете побачити це в програмі. Все, що ви додали до файлу, буде виділено зеленим, а видалення - червоним.
 |
|---|
↪️ Наступний крок називається Commit. Це приблизно означає підтвердити зміни |
 |
↪️ Саме так має виглядати ваш заголовок програми GitHub. Зверніть увагу на символ вилки поруч з назвою проєкту в Current repository, Ваш Current branch матиме ім'я, яке ви дали йому на кроці 3 |
 |
↪️ Для того, щоб зробити Commit, вам необхідно заповнити поле Summary. Це повідомлення про коміт, яке пояснює, що ви змінили. У цьому випадку "Додати дані моєї картки" було б розумним повідомленням. За бажанням можна додати більш детальний опис у поле Description. Натисніть кнопку Commit. Ваша кнопка скаже щось на зразок Commit to "your-branch-name" |
- Тепер ваші зміни збережено або committed. Але вони зберігаються тільки локально, тобто на вашому комп'ютері.
- Синхронізація локальних змін зі сховищем GitHub називається Push. Ви "проштовхуєте" зміни з локального сховища до віддаленого сховища на GitHub.
↪️ Натисніть кнопку Push |
 |
|---|
- Через кілька секунд операція буде завершена, і тепер у вас є точно така ж копія цієї гілки як на вашому комп'ютері, так і на 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 року в Європі.