Skip to content

Latest commit

 

History

History
273 lines (165 loc) · 37.2 KB

File metadata and controls

273 lines (165 loc) · 37.2 KB

image info

Tweet

Discord

GitHub forks GitHub stars GitHub watchers

Объявление:

Хотели бы вы стать сопровождающим этого проекта и помогать поддерживать его в рабочем состоянии? Если вам интересно, прочтите руководство по сопровождению и пришлите мне сообщение в Твиттере.

Введение

Это руководство, которое поможет начинающим участникам принять участие в простом и понятном проекте.

Цели

  • Внесите свой вклад в проект с открытым исходным кодом.
  • Станьте более продвинутыми в использовании GitHub.

Для кого это?

  • Это для абсолютных новичков. Если вы знаете, как написать и отредактировать тег привязки <a href="" target=""></a>, то вы сможете это сделать.
  • Это также для тех, у кого немного больше опыта, но кто хочет внести свой первый вклад с открытым исходным кодом или получить больше вкладов для получения большего опыта и уверенности.

Зачем мне это делать?

Любой веб-разработчик, начинающий или опытный, должен уметь контролировать версии Git, GitHub - самый популярный сервис, которым пользуются все. Это также сердце сообщества с открытым исходным кодом. Освоение GitHub - это важный навык. Внесение вклада в проект повышает вашу уверенность в себе и дает вам возможность показать что-то в своем профиле на GitHub.
Если вы новый разработчик и вам интересно, нужно ли вам изучать Git и GitHub, то вот ответ: Вы должны были изучить Git вчера.

Какой вклад я собираюсь внести?

Карточка участника

Вы собираетесь разместить на этой веб-странице проекта карточку, подобную этой. Она будет включать ваше имя, ваш Twitter, краткое описание и 3 ссылки на полезные ресурсы для веб-разработчиков, которые вы рекомендуете.

Вы сделаете копию шаблона открытки внутри HTML-файла и настроите ее с помощью собственной информации.

Оглавление

Внести вклад:

Настройка

Сначала давайте настроим всё для выполнения работы

  1. Войдите в свою учетную запись GitHub. Если у вас еще нет учетной записи, то присоединитесь к GitHub. Перед тем как продолжить, я рекомендую вам выполнить учебник GitHub Hello World.
  2. Скачайте приложение GitHub Desktop.
    • Если вы используете VS Code, он поставляется с интегрированным Git'ом и позволяет делать то, что нам нужно, прямо из редактора.
    • Однако самый простой и легкий способ следовать этому руководству - использовать GitHub Desktop.

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

Внесение вклада

Станьте участником проекта с открытым исходным кодом за 10 простых шагов.

Примерное время: Менее 30 минут.

Шаг 1: Форкните этот репозиторий

  • Цель состоит в том, чтобы сделать копию этого проекта и поместить ее в свой аккаунт.
  • Репозиторий - это то, как проект называется на GitHub, а форк - это его копия.
  • Убедитесь, что вы находитесь на главной странице этого репозитория.
  • Кликните на кнопку Fork
Fork

Шаг 2: Клонируйте репозиторий

  • Теперь мы хотим создать локальную копию проекта. То есть копию, сохраненную на вашей собственной машине.
  • Откройте приложение GitHub для рабочего стола. В этом приложении:
  • Кликните на File потом на Clone repository
Clone
  • Вы увидите список ваших проектов и форков на GitHub.
  • Выберите <Ваш-ник-на-GitHub>/Contribute-To-This-Project.
  • Нажмите Clone
Clone project
  • Проект который вы форкнули будет иметь значок вилки слева.
  • У вашего форка будет ваш ник на GitHub.
Ваш форк
  • Это займет некоторое время, пока проект будет копироваться на ваш жесткий диск. Я рекомендую сохранить путь по умолчанию, который обычно ..\Documents\GitHub.
  • Теперь у вас есть локальная копия проекта.

Шаг 3: Создайте новую ветку

  • После клонирования репозитория и открытия его на рабочем столе GitHub пришло время создать новую ветвь.
  • Ответвление - это способ сохранить ваши изменения отдельно от основной части проекта под названием Master. Например, если что-то пойдет не так и вы будете недовольны своими изменениями, вы можете просто удалить ветку, и основной проект не пострадает.
  • Кликните на Current branch
  • Затем кликните на New
Создать ветку
  • Дайте своей ветке имя
  • Нажмите Create branch
Name branch
  • Вы можете назвать его как угодно, но поскольку это ответвление для добавления в проект карточки с вашим именем, называть его your-name-card будет хорошей практикой, так как это сохраняет ясность намерений этого ответвления.
  • Выложите свою ветку на GitHub!
Name branch
  • Теперь вы создали новую ветвь, отдельную от основной.

  • Для следующих шагов убедитесь, что вы работаете в этой ветке. Вы увидите название ветки, в которой вы находитесь, в верхней центральной части приложения GitHub для рабочего стола, где написано Current branch.

  • НЕ РАБОТАЙТЕ НА ВЕТКЕ 'master'


Шаг 4: Откройте index.html

  • Теперь нам нужно открыть файл, который мы собираемся редактировать, с помощью вашего любимого редактора кода.
  • Найдите папку проекта на вашем компьютере. Если вы сохранили папку по умолчанию, она должна быть примерно такой: Ваш компьютер > Документы > GitHub > Contribute-To-This-Project.
  • Файл index.html находится непосредственно в папке Contribute-To-This-Project.
  • Откройте ваш редактор кода (Sublime, VS Code, Atom..) и используйте команду Open file и найдите файл index.html в главной директории проекта
  • Также вы можете найти файл на жестком диске, щелкнуть правой кнопкой мыши и открыть его в редакторе
Open index file
  • Теперь файл, который вы собираетесь редактировать, открыт в вашем редакторе, и вы готовы начать вносить в него изменения.

Шаг 5: Скопируйте шаблон карточки

  • Мы сделаем копию шаблона открытки, чтобы начать работу над ней
  • В верхней части html-файла, под разделами <head> и <header>, вы найдете раздел == TEMPLATE ==.
  • Скопируйте все, что находится в пределах красного квадрата на изображении, от комментария Contributor card START до комментария Contributor card END.
Copy card template
  • Вставьте все это непосредственно под комментарием, указав его.t
  • Убедитесь, что между началом вашей карточки и концом последней карточки есть пробел в одну строку. Хорошая практика заключается в том, чтобы наш код был как можно более понятным
  • Никогда не используйте линтеры или форматтеры стилей. Проект имеет настройку Prettier
Paste card template
  • Теперь это ваша карточка, которую вы можете настраивать и редактировать.

Шаг 6: Примените ваши изменения

  • Теперь мы начнем редактировать html, изменяя настраиваемые поля в нашей карточке.
  • Замените Name на свое имя
  • Заметка: Не изменяйте class="name"
Change name
  • Вставьте URL-адрес вашего аккаунта в Twitter href="Insert URL here"
  • Введите свое имя в текстовое поле
Change contact
  • Если вы предпочитаете использовать контакты, отличные от Twitter, вам нужно заменить значок twitter <i class="fa fa-twitter"></i> на Font Awesome Icons, найдя нужный значок и заменив только часть fa-twitter на новый значок, например, fa-facebook. Затем выполните те же шаги, что описаны выше.
  • Расскажите нам что-нибудь о себе
  • Будьте краткими и милыми. Думайте об этом как о твите, а не как о записи в блоге.
Change about
  • Поделитесь с сообществом 3 ссылками на ресурсы, полезные для веб-разработки
  • Это может быть что угодно: видео, беседа, подкаст, статья, ссылка или инструмент.
  • Если вы новичок, не пугайтесь этого, поделитесь всем, что вы знаете, даже если вам кажется, что это элементарно. Вы удивитесь, как много людей получат пользу.
Change resources
  • Ссылка: вставьте ссылку href="сюда" заменяя #
  • Заголовок: Напишите краткое описание title="здесь"
  • Имя: Напишите имя ресурса в текстовом поле >здесь</a>
  • Убедитесь, что вы сохранили все изменения.
  • Протестируйте свои изменения. ЭТО ОЧЕНЬ ВАЖНО! Откройте html-файл в браузере (например, дважды щелкнув по нему) и посмотрите, как будет выглядеть ваша карточка на сайте. Убедитесь, что вся страница выглядит одинаково и ничего не нарушено. Нажмите на свои ссылки и убедитесь, что они работают. Откройте консоль (Ctrl + Shift + J (Windows / Linux) или Cmd + Opt + J (Mac)) и проверьте, нет ли сообщений об ошибках.
  • Отлично, вы закончили редактирование кода! Следующие шаги отправят ваши изменения на GitHub, а затем отправят их для слияния с основным проектом.

Шаг 7: Закоммитьте свои изменения

  • Вернитесь к настольному приложению GitHub.
  • Ваши изменения будут автоматически добавлены в область хранения.
  • Это означает, что Git записал все сохраненные изменения.
  • Вы можете увидеть это в приложении. Все, что вы добавили в файл, будет выделено зеленым цветом, а удаление - красным.
  • Следующий шаг называется Commit
  • Грубя говоря "принять изменения"
Commit changes
  • Вот как должен выглядеть заголовок вашего рабочего стола GitHub
  • Обратите внимание на символ вилки рядом с именем проекта в разделе Current repository
  • Ваша Current Branch будет иметь имя, которое вы дали ей в шаге 3
Commit changes
  • Чтобы Закоммитить вам нужно заполнить поле Summary
  • Это сообщение, объясняющее, что вы изменили
  • В этом случае "Добавить информацию о моей карточке" было бы разумным сообщением
  • По желанию вы можете добавить более подробное Описание.
  • Нажмите кнопку Commit. На кнопке будет написано что-то вроде Commit to "your-branch-name".
Write commit message and commit

Шаг 8: Отправьте свои изменения на GitHub

  • Теперь ваши изменения сохранены или зафиксированы. Но они сохранены только локально, то есть на вашем компьютере.
  • Синхронизация локальных изменений с вашим репозиторием на GitHub называется Push. Вы "проталкиваете" изменения из вашего локального репозитория в удаленный репозиторий на GitHub.
  • Нажмите на кнопку Push
Push to GitHub
  • Через несколько секунд операция будет завершена, и теперь у вас есть точно такая же копия этой ветки как на вашей машине, так и на GitHub.

Шаг 9: Отправьте PR (Pull Request)

  • Настал момент, которого вы так долго ждали: подача пулл реквеста (PR).
  • До сих пор вся проделанная вами работа была связана с форком проекта, который, как вы помните, находится на вашем собственном аккаунте на GitHub.
  • Теперь пришло время отправить свои изменения в основной проект для слияния с ним.
  • Это называется Pull Request, потому что вы просите сопровождающего оригинального проекта "перетянуть" ваши изменения в свой проект.
  • Перейдите на главную страницу вашего форка на GitHub (вверху будет значок форка и ваше имя пользователя).
  • В верхней части репозитория вы увидите выделенное сообщение Pull Request с зеленой кнопкой.
  • Нажмите на Compare and pull request
Submit a Pull Request
  • Так выглядит страница Open a pull request.
  • ПОМНИТЕ вы пытаетесь объединить свою ветку с оригинальным проектом, а не с веткой Master на вашем форке..
  • Приведенное ниже изображение дает вам представление о том, как должен выглядеть заголовок вашего пулл реквеста.
  • Слева - исходный проект, за которым следует мастер-ветвь. Справа - ваш форк и созданная вами ветка.
Open a Pull Request
  • Создайте пулл реквест:
  • Напишите заголовок
  • Добавьте необязательную информацию в описание.
  • Нажмите Create pull request
Submit a Pull Request
  • Не пугайтесь множества вариантов. Вам нужно выполнить только эти три шага.
  • Оставьте опцию Allow edits from maintainers отмеченной.
  • Теперь мейнтейнеру проекта будет отправлен запрос Pull Request. Как только он будет рассмотрен и принят, ваши изменения появятся на веб-странице проекта.

Шаг 10: Отпразднуйте

Вот и все. Вы сделали это! Теперь вы внесли свой вклад в открытый исходный код на GitHub.

Вы добавили код на живую веб-страницу: https://syknapse.github.io/Contribute-To-This-Project

Ваши изменения не будут видны сразу; сначала они должны быть рассмотрены, приняты и объединены сопровождающим проекта. Как только они будут объединены, ваша карточка должна стать видимой и живой на странице.

Это вполне нормально, когда рецензент просит внести изменения в PR. Считайте это хорошей практикой, если это произойдет с вами. Следите за комментариями и запрошенными изменениями. Как только вы внесете запрашиваемые изменения (в свою ветку), все, что вам нужно сделать, это зафиксировать и отправить изменения. PR будет автоматически обновлен новыми изменениями.

Я обещаю, что постараюсь рассмотреть и объединить как можно скорее, но я делаю это в свободное время, поэтому задержка в несколько дней неизбежна.



Следующие шаги

  • Вернитесь через некоторое время, чтобы проверить, как прошел ваш объединенный Pull Request.
  • Вы должны получить письмо от GitHub, когда ваши изменения будут одобрены, или если будут запрошены дополнительные изменения. И когда PR будет окончательно объединен с мастером и ваша карточка будет добавлена.
  • Если вы нашли этот проект полезным, пожалуйста, поставьте ему ⭐ звезду ⭐ вверху страницы и Tweet о нем, чтобы помочь распространить информацию Tweet.
  • Вы можете следовать за мной и связаться со мной в Твиттере или используя любой из этих других вариантов.
  • Это проект с открытым исходным кодом, поэтому, помимо вклада в свою карту, вы можете помочь исправить ошибки, внести улучшения или новые функции. Откройте проблему или отправьте новый pull request.
  • Чтобы помочь улучшить наше сообщество, загляните на вкладку GitHub Discussions, расположенную рядом с Pull Requests. Это место, где можно представиться, углубиться в обсуждение Open Source и пообщаться с мейнтейнерами проекта. Поможете ли вы нам создать эту функцию и улучшить наше сообщество?
  • Спасибо за вклад в этот проект. Теперь вы можете попробовать внести свой вклад в другие проекты; обратите внимание на метку Good First Issue, чтобы найти варианты вклада, удобные для новичков.
  • Я также ищу соавторов, которые могли бы помочь мне в рецензировании и объединении PR. Если вы хотите получить более продвинутую практику работы с Git, пожалуйста, напишите мне DM в Twitter и прочитайте руководство сопровождающего.

Вернуться наверх;