Logo Created with 💖 By CandidDeer
Хотели бы вы стать сопровождающим этого проекта и помогать поддерживать его в рабочем состоянии? Если вам интересно, прочтите руководство по сопровождению и пришлите мне сообщение в Твиттере.
- Объявления
- Введение
- Для кого это?
- Зачем мне это делать?
- Какой вклад я собираюсь внести?
- Переводы
- Настройка
- Следующие шаги
- Благодарности
- Внесение вклада
- Шаг 1: Форкните репозиторий
- Шаг 2: Клонируйте репозиторий
- Шаг 3: Создайте новую ветку
- Шаг 4: Откройте index.html
- Шаг 5: Скопируйте шаблон карточки
- Шаг 6: Примените ваши изменения
- Шаг 7: Закоммитьте свои изменения
- Шаг 8: Отправьте свои изменения на GitHub
- Шаг 9: Отправьте PR (Pull Request)
- Шаг 10: Отпразднуйте
Это руководство, которое поможет начинающим участникам принять участие в простом и понятном проекте.
- Внесите свой вклад в проект с открытым исходным кодом.
- Станьте более продвинутыми в использовании GitHub.
- Это для абсолютных новичков. Если вы знаете, как написать и отредактировать тег привязки
<a href="" target=""></a>, то вы сможете это сделать. - Это также для тех, у кого немного больше опыта, но кто хочет внести свой первый вклад с открытым исходным кодом или получить больше вкладов для получения большего опыта и уверенности.
Любой веб-разработчик, начинающий или опытный, должен уметь контролировать версии Git, GitHub - самый популярный сервис, которым пользуются все. Это также сердце сообщества с открытым исходным кодом. Освоение GitHub - это важный навык. Внесение вклада в проект повышает вашу уверенность в себе и дает вам возможность показать что-то в своем профиле на GitHub.
Если вы новый разработчик и вам интересно, нужно ли вам изучать Git и GitHub, то вот ответ: Вы должны были изучить Git вчера.
Вы собираетесь разместить на этой веб-странице проекта карточку, подобную этой. Она будет включать ваше имя, ваш Twitter, краткое описание и 3 ссылки на полезные ресурсы для веб-разработчиков, которые вы рекомендуете.
Вы сделаете копию шаблона открытки внутри HTML-файла и настроите ее с помощью собственной информации.
Это руководство также доступно на других языках
Приветствуются переводы проектной документации. Прочтите
Руководство по переводучтобы внести свой вклад.
Примечание. Это руководство основано на GitHub для ПК. Если вам удобно работать с терминалом, перейдите к этому руководству (Нажмите здесь)
Сначала давайте настроим всё для выполнения работы
- Войдите в свою учетную запись GitHub. Если у вас еще нет учетной записи, то присоединитесь к GitHub. Перед тем как продолжить, я рекомендую вам выполнить учебник GitHub Hello World.
- Скачайте приложение GitHub Desktop.
- В качестве альтернативы, если вам удобно использовать Git в командной строке, вы можете сделать это Вот ссылка на учебник CLI.
- Если вы используете VS Code, он поставляется с интегрированным Git'ом и позволяет делать то, что нам нужно, прямо из редактора.
- Однако самый простой и легкий способ следовать этому руководству - использовать GitHub Desktop.
Теперь, когда вы все настроили, давайте приступим к работе по внесению вклада в проект.
Станьте участником проекта с открытым исходным кодом за 10 простых шагов.
Примерное время: Менее 30 минут.
- Цель состоит в том, чтобы сделать копию этого проекта и поместить ее в свой аккаунт.
- Репозиторий - это то, как проект называется на GitHub, а форк - это его копия.
- Убедитесь, что вы находитесь на главной странице этого репозитория.
 |
|---|
| Кликните на кнопку Fork |
- Теперь у вас есть полная копия на проекта на вашем аккаунте
- Теперь мы хотим создать локальную копию проекта. То есть копию, сохраненную на вашей собственной машине.
- Откройте приложение GitHub для рабочего стола. В этом приложении:
 |
|---|
| Кликните на File потом на Clone repository |
- Вы увидите список ваших проектов и форков на GitHub.
- Выберите
<Ваш-ник-на-GitHub>/Contribute-To-This-Project. - Нажмите Clone
 |
|---|
| ↪️ Проект, который вы форкнули, будет иметь значок вилки слева. У вашего форка будет ваш ник на GitHub. |  |
|---|
- Это займет некоторое время, пока проект будет копироваться на ваш жесткий диск. Я рекомендую сохранить путь по умолчанию, который обычно
..\Documents\GitHub. - Теперь у вас есть локальная копия проекта.
- После клонирования репозитория и открытия его на рабочем столе GitHub пришло время создать новую ветвь.
- Ответвление - это способ сохранить ваши изменения отдельно от основной части проекта под названием
Master. Например, если что-то пойдет не так и вы будете недовольны своими изменениями, вы можете просто удалить ветку, и основной проект не пострадает.
↪️ Кликните на Current branch, затем кликните на New |
 |
|---|---|
↪️ Дайте своей ветке имя, а потом нажмите на Create branch |
 |
| ↪️ Выложите свою ветку на GitHub |  |
-
Вы можете назвать его как угодно, но поскольку это ответвление для добавления в проект карточки с вашим именем, называть его
your-name-cardбудет хорошей практикой, так как это сохраняет ясность намерений этого ответвления. -
Теперь вы создали новую ветвь, отдельную от основной.
-
Для следующих шагов убедитесь, что вы работаете в этой ветке. Вы увидите название ветки, в которой вы находитесь, в верхней центральной части приложения GitHub для рабочего стола, где написано 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.
 |
|---|
- Вставьте все это непосредственно под указывающим на это комментарием
- Убедитесь, что между началом вашей карточки и концом последней карточки есть пробел в одну строку. Рекомендуется, чтобы наш код был как можно более понятным
- Никогда не используйте линтеры или форматтеры стилей. Проект имеет настройку Prettier
 |
|---|
- Теперь это ваша карточка, которую вы можете настраивать и редактировать.
- Теперь мы начнем редактировать html, изменяя настраиваемые поля в нашей карточке.
↪️ Замените Name на ваше имя |
 |
|---|
- Примечание: не изменяйте
class="name"
↪️ Вставьте URL-адрес вашего аккаунта в Twitter href="Insert URL here", введите свое имя в текстовое поле |
 |
|---|
- Если вы предпочитаете использовать контакты, отличные от Twitter, вам нужно заменить значок twitter
<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 |
 |
↪️ Чтобы Закоммитить вам нужно заполнить поле Summary . Это сообщение, объясняющее, что вы изменили. В этом случае "Добавить информацию о моей карточке" было бы разумным сообщением. По желанию вы можете добавить более подробное описание в поле Description. Нажмите кнопку Commit. На кнопке будет написано что-то вроде Commit to "your-branch-name" |
- Теперь ваши изменения сохранены или зафиксированы. Но они сохранены только локально, то есть на вашем компьютере.
- Синхронизация локальных изменений с вашим репозиторием на GitHub называется Push. Вы "проталкиваете" изменения из вашего локального репозитория в удаленный репозиторий на GitHub.
↪️ Нажмите на кнопку Push |
 |
|---|
- Через несколько секунд операция будет завершена, и теперь у вас есть точно такая же копия этой ветки как на вашей машине, так и на GitHub.
- Настал момент, которого вы так долго ждали: подача пулл реквеста (PR).
- До сих пор вся проделанная вами работа была связана с форком проекта, который, как вы помните, находится на вашем собственном аккаунте на GitHub.
- Теперь пришло время отправить свои изменения в основной проект для слияния с ним.
- Это называется Pull Request, потому что вы просите сопровождающего оригинального проекта "перетянуть" ваши изменения в свой проект.
- Перейдите на главную страницу вашего форка на 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. Считайте это хорошей практикой, если это произойдет с вами. Следите за комментариями и запрошенными изменениями. Как только вы внесете запрашиваемые изменения (в свою ветку), все, что вам нужно сделать, это зафиксировать и отправить изменения. PR будет автоматически обновлен новыми изменениями.
Я обещаю, что постараюсь рассмотреть и объединить как можно скорее, но я делаю это в свободное время, поэтому задержка в несколько дней неизбежна.
- Вернитесь через некоторое время, чтобы проверить, как прошел ваш объединенный Pull Request.
- Вы должны получить письмо от GitHub, когда ваши изменения будут одобрены, или если будут запрошены дополнительные изменения. И когда PR будет окончательно объединен с мастером и ваша карточка будет добавлена.
- Вы также можете узнать, как внести свой вклад, из этой бесплатной серии: Как внести свой вклад в проект с открытым исходным кодом на GitHub
- Если вы нашли этот проект полезным, пожалуйста, поставьте ему ⭐ звезду ⭐ вверху страницы и Tweet о нем, чтобы помочь распространить информацию
.
- Вы можете следовать за мной и связаться со мной в Твиттере или используя любой из этих других вариантов.
- Это проект с открытым исходным кодом, поэтому, помимо вклада в свою карту, вы можете помочь исправить ошибки, внести улучшения или новые функции. Откройте проблему или отправьте новый pull request.
- Чтобы помочь улучшить наше сообщество, загляните на вкладку GitHub Discussions, расположенную рядом с Pull Requests. Это место, где можно представиться, углубиться в обсуждение Open Source и пообщаться с мейнтейнерами проекта. Поможете ли вы нам создать эту функцию и улучшить наше сообщество?
- Спасибо за ваш вклад в этот проект. Теперь вы можете попробовать внести свой вклад в другие проекты; обратите внимание на метку
, чтобы найти варианты вклада, удобные для новичков. - Я также ищу соавторов, которые могли бы помочь мне в рецензировании и объединении PR. Если вы хотите получить более продвинутую практику работы с Git, пожалуйста, напишите мне DM в Twitter и прочитайте руководство сопровождающего.
На этот проект сильно повлияла работа Рошана Джосси - проект замечательные первые вклады с его отличным учебником.
Этот проект также особенно вдохновлен большим сообществом вокруг #GoogleUdacityScholars Стипендия Google Challenge: Front-End Web Dev, класс 2017г. в Европе.