The Best GitHub: лучшие советы и полная настройка

Создание профиля GitHub README 👋

Файл README находится в репозитории GitHub, имя которого совпадает с именем пользователя вашей учетной записи GitHub. Чтобы создать репозиторий, выполните следующие действия:

• Войдите в GitHub .
• Нажмите значок + в правом верхнем углу страницы и выберите «Новый репозиторий» .

• Откроется страница Создать новый репозиторий . В поле Имя репозитория введите имя пользователя вашей учетной записи GitHub. После ввода имени пользователя GitHub отображает сообщение о том, что вы собираетесь создать специальный репозиторий GitHub.

• Установите флажок «Общедоступный» в разделе «Тип репозитория», чтобы сделать файл README профиля GitHub видимым для всех, кто посещает страницу профиля GitHub. Если вы не хотите, чтобы пользователи видели README вашего профиля GitHub, пока он еще находится в разработке, вы можете выбрать Private . Когда вы закончите разработку README, обязательно измените видимость на Public .
• Установите флажок Добавить файл README . Это добавит README.mdфайл, в который мы добавим содержимое профиля. Значения полей должны выглядеть примерно так, как показано на рисунке ниже.

• Нажмите на кнопку «Создать репозиторий» . Специальный репозиторий успешно создан. Перейдите в репозиторий, который вы только что создали, и вы увидите файл, README.mdдобавленный в репозиторий.

В следующих нескольких разделах мы добавим содержимое в наш README.mdфайл. Мы будем использовать файловый редактор GitHub для записи и предварительного просмотра изменений. Вы можете использовать любой другой удобный текстовый редактор.

Чтобы использовать редактор файлов GitHub, откройте README.mdи щелкните значок «Редактировать этот файл» (значок карандаша) в правом верхнем углу страницы. Подробнее о редактировании файлов GitHub можно прочитать в официальной документации GitHub по редактированию файлов .

Добавление GIF-баннера и раздела «Обо мне»

• Первое, что вы можете увидеть, это анимированный заголовок с текстом «Привет всем!» Для этого я использовал репозиторий GitHub для капсульного рендеринга . Я наткнулся на этот замечательный ресурс, когда искал способы украсить ваш репозиторий GitHub. Вы можете добавлять фоновые изображения и текст поверх них, а также, кто не любит анимацию! Он очень прост в использовании и хорошо задокументирован в репозитории. Вот моя конфигурация рендера.

<p align="center">  <img src="https://capsule-render.vercel.app/api?text=Hey Everyone!🕹️&animation=fadeIn&type=waving&color=gradient&height=100"/></p>

• После вставки простого заголовка, чтобы предоставить ссылки на мои различные учетные записи, такие как LinkedIn, Medium, Dev.to, а также на мой сайт-портфолио, я хотел сделать это минималистичным и бестекстовым способом. Итак, я решил использовать иконки. Существует множество доступных онлайн-инструментов, которые предоставляют тысячи бесплатных иконок для использования. Я использовал IconFinder и лично мне понравилось. Есть много других популярных опций, которые вы можете использовать, например Shields.io , markdown-badges , vector-logo-zone , simple-icons и т. д.

Просто нужно импортировать исходный файл значка в формате png в тег <img> , как показано ниже :

<a href="https://www.instagram.com/thepiyushmalhotra/">  <img height="50" src="https://user-images.githubusercontent.com/46517096/166974368-9798f39f-1f46-499c-b14e-81f0a3f83a06.png"/></a>

• Теперь самое интересное — добавить эту великолепную гифку! GIF-файлы делают наш профиль более динамичным и привлекательным . Честно говоря, вы можете разместить любую GIF, которую хотите. Это может быть популярный мем, гифка о программировании, культовая сцена из фильма или телешоу или что-то, что немного рассказывает людям о ваших увлечениях. В моем случае это аниме, так что я выбрал его. Популярные веб-сайты для обмена gif-файлами, такие как Giphy и Tenor, можно использовать для извлечения любого понравившегося вам gif-файла, и это работает так же, как добавление значков, просто скопируйте адрес изображения и вставьте его в атрибут «src» тега <img> .

Раздел «Обо мне» 👨‍💻

Это раздел, о котором я говорил ранее, где большинство разработчиков используют шаблон, показанный выше. Если вы хотите, чтобы ваш профиль выделялся, я бы посоветовал также изменить аспекты дизайна этого раздела. Я пошел дальше и использовал формат YAML при редактировании файла readme, чтобы информация читалась как код при предварительном просмотре профиля.

Это добавляет нотку профессионализма, а также в качестве бонуса выглядит аккуратно! Чтобы отобразить этот формат, просто оберните текст, как показано ниже, и все готово:

```yaml * ЗДЕСЬ ИДЕТ ВАШ ТЕКСТ * ```

Инструменты и технические вещи 🧰

В этом разделе вы можете продемонстрировать свои навыки и перечислить инструменты и технологии, с которыми вы знакомы. Я всегда предпочитаю минималистичный и четкий дизайн загроможденным данным, поэтому на этот раз я также выбрал значки. Мы, люди, предпочитаем информацию через визуальные носители гораздо больше, чем что-либо еще, верно?

Вы можете использовать все, что я упомянул выше, например IconFinder , Shields.io , markdown-badges , vector-logo-zone , simple-icons и т. д. Но для этого раздела я бы лично рекомендовал DevIcon . В отличие от других ресурсов, DevIcon создан для предоставления значков, связанных исключительно с языками программирования и инструментами разработки, что делает его идеальным.

Просто скопируйте источник изображения SVG с веб-сайта DevIcon и вставьте его в тег <p>, чтобы отобразить несколько значков!

<h2> 🚀 &nbsp;Some Tools I Have Used and Learned</h2><p align="left"><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg" alt="vscode" width="45" height="45"/><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bash/bash-original.svg" alt="bash" width="45" height="45"/><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" alt="php" width="45" height="45"/></p>

Ваша история GitHub 📈

Наконец, в конце файла README вашего профиля вы можете указать практически что угодно. Некоторые разработчики размещают то, что сейчас играет, в своем профиле Spotify , некоторые добавляют свою статистику GitHub , а некоторые добавляют забавную маленькую игру в змейку на вашем графике вкладов GitHub, как я, и я покажу вам, ребята, как разместить!

Я начну с двух статистических карточек GitHub ReadMe. Один показывает мое общее количество звезд, коммитов и пулреквестов и т. д. А другой отображает мои наиболее используемые языки программирования в процентах. Вы, ребята, можете получить эти карты из популярного репозитория GitHub ReadMe Stats Repo , и самое приятное в них то, что они полностью настраиваются с различными настройками и темами!

Далее, вероятно, моя любимая вещь из всех элементов моего профиля. Создание игры «Змейка» из вашего графика вкладов GitHub . Его довольно легко настроить, и он выглядит очень удовлетворительно, когда змея поглощает ваш график коммитов.

Чтобы настроить его для вашего профиля, мы собираемся использовать то, что называется GitHub Actions. GitHub Actions — это инструменты CI/CD в GitHub, с помощью которых вы можете инициировать рабочие процессы, которые автоматически запускают, развертывают и создают ваши материалы.

![Snake animation]( https://github.com/thepiyushmalhotra/thepiyushmalhotra/blob/output/github-contribution-grid-snake.svg )

• Первый шаг — скопировать эту строку выше и добавить ее в файл README вашего профиля. Не забудьте изменить имя пользователя на свое, а не на мое.
• Теперь нам нужно создать рабочий процесс GitHub, чтобы график вклада в анимации змеи обновлялся в соответствии с заданием cron, которое мы настроим.
• Перейдите на вкладку «Действия» в репозитории README и создайте новый рабочий процесс. Это создаст новую папку в вашем репозитории с именем «.github/workflows», а после этого внутри нее будет создан новый файл с именем «main.yml».

• Удалите все внутри только что созданного файла main.yml и добавьте в него этот код ниже:

name: Generate Datason:  schedule: # execute every 12 hours    - cron: "* */12 * * *"  workflow_dispatch:jobs:  build:    name: Jobs to update datas    runs-on: ubuntu-latest    steps:      # Snake Animation      - uses: Platane/snk@master        id: snake-gifwith:          github_user_name: thepiyushmalhotra          svg_out_path: dist/github-contribution-grid-snake.svg      - uses: crazy-max/[email protected]        with:          target_branch: output          build_dir: dist        env:          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

• Не забудьте заменить мое имя пользователя на ваше. Здесь мы используем cronjob , который обновляется каждые 12 часов, поэтому всякий раз, когда у вас есть новый коммит, он будет добавлен в вашу анимацию змеи.
• Последний шаг — вернуться на страницу «Действия» файла README, щелкнуть только что созданный рабочий процесс «Создать данные» или любое имя, которое вы ему дадите, и нажать кнопку «Запустить рабочий процесс».

И вуаля! Теперь ваш график вклада Snake в GitHub активен. Наслаждайтесь просмотром, как эта змея съедает вашу тяжелую работу! Чтобы завершить все это, я просто добавил еще одну анимацию рендеринга капсулы в нижний колонтитул, которая выглядела хорошо, как вы можете видеть в GIF выше.

Я также упомянул дополнительный список ресурсов для ваших индивидуальных потребностей в дизайне:

• Awesome-GitHub-Profile-Readme — список замечательных файлов Readme от многих талантливых разработчиков!
• GitHub Readme Generator — простой способ быстро создать базовый шаблон дизайна для вашего профиля.
• Узнайте больше о действиях GitHub , если вы заинтересованы в автоматизации.
• Создавайте различные метрики GitHub , которые можно встраивать где угодно.
• Если вам нужен быстрый и простой способ создания cronjobs и узнать о них больше, то Crontab Guru — довольно хороший ресурс, и вы узнаете точное время, когда будет выполняться ваш рабочий процесс.