Share This
Связаться со мной
Крути в низ
Categories
//🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

В этой статье мы создадим привлекательный профиль на GitHub: добавим гифки, эмодзи, иконки социальных сетей, GitHub-статистику, ТОП языков программирования и многое другое. Код прилагается.

kak kreativno oformit profil na github chtoby on privlekal vnimanie 2f85ea6 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Статья является переводом. Оригинал доступен по ссылке.

Если вы откроете мой профиль на GitHub, вы обратите внимание на различные изображения, ссылки на социальные сети и статистику GitHub. Всё это делает профиль непохожим на остальные. Это возможно сделать с помощью файла README.md.

В этой статье мы разберём:

  • что такое файл README.md и как им пользоваться;
  • добавим информацию о себе и своих навыках;
  • добавим GitHub-статистику;
  • создадим рабочий поток GitHub для отображения постов из социальных сетей.

Чтобы всё получилось, вам нужны базовые знания HTML и Markdown.

Код из этой статьи доступен по ссылке.

Что же такое файл README.md в профиле на GitHub и для чего он нужен

Файл README.md в профиле на GitHub позволяет пользователям использовать Markdown-разметку, чтобы отображать детали о себе, о своём опыте, увлечениях, показывать GitHub-статистику и предоставлять эту информацию сообществу. Эти данные отображаются в верхней части вашей GitHub страницы над закрепленными репозиториями.

Так будем выглядеть профиль на GitHub по окончании этой статьи:

kak kreativno oformit profil na github chtoby on privlekal vnimanie 83fde4c - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Мы разделим главную страницу на сектора и постепенно для каждого добавим содержимое. Цвет фона будет зависеть от цветовой темы, выбранной пользователем.

В следующем разделе мы поэтапно разберем шаги создания README-файла.

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека программиста» Интересно, перейти к каналу

Создание README.md на GitHub

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

1. Войдите на GitHub.

2. Нажмите + в правом верхнем углу и выберите New Repository.

kak kreativno oformit profil na github chtoby on privlekal vnimanie d3d352e - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

3. Откроется страница создания нового репозитория. В названии укажите имя пользователя из вашего профиля. После того как вы введете имя пользователя, будет показана информация о том, что вы создаете особый репозиторий.

kak kreativno oformit profil na github chtoby on privlekal vnimanie f2e618a - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

4. Под описанием репозитория не забудьте установить отметку Public, чтобы файл README.md был виден всем.

5. Обязательно установите отметку Add a README file. Это создаст файл README.md, в котором мы и будем работать. Сравните со скриншотом, у вас должно получиться также.

kak kreativno oformit profil na github chtoby on privlekal vnimanie e38286b - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

6. Далее нажимаем кнопку Create repository. Репозиторий успешно создан. Зайдите в только что созданный репозиторий и увидите, что в нем уже есть файл README.md.

kak kreativno oformit profil na github chtoby on privlekal vnimanie dd7eb28 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

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

Открываем файл README.md и вверху справа нажимаем Edit this file icon (иконка с карандашом). Также о редактировании файлов мы можем почитать в официальной документации.

Добавление GIF-изображений и значков

Ниже вы видите тот контент, который мы добавим в этой части статьи:

kak kreativno oformit profil na github chtoby on privlekal vnimanie 7f5f1cd - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Есть множество бесплатных ресурсов, на которых вы можете взять GIF-изображения, например, для этой статьи я использовал Giphy.

Идем на страницу GIF изображения, нажимаем кнопку Share, а затем Copy GIF Link. Мы добавим эту скопированную ссылку в HTML-тег <img/>, чтобы отобразить ее в файле Markdown. Мы используем тег <img/> для упрощения настройки ширины изображения.

Замените содержимое файла README.md следующим кодом:

         <div id="header" align="center">   <img src="https://media.giphy.com/media/M9gbBd9nbDrOTu1Mqx/giphy.gif" width="100"/> </div>      

В атрибуте src указываем ссылку, которую мы ранее скопировали. Поскольку весь контент в этой части будет выровнен по центру, мы поместили изображение в HTML-тег <div> с атрибутом align="center".

Примечание GitHub преобразует элементы Markdown в файле README.md в HTML. После этого HTML очищается и из соображений безопасности некоторые HTML-теги игнорируются, например <script>, <style> и т. д. По этим причинам мы использовали атрибут align вместо CSS-стилей.

Перейдем в окно предпросмотра. Наша картинка появилась на странице:

kak kreativno oformit profil na github chtoby on privlekal vnimanie bed16c0 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Далее мы добавим значки для ссылок на социальные сети, при клике на которые будет открываться нужный сайт. Вы можете добавить значки для самых разных сайтов: Instagram, Facebook, Twitter и т. д. Мы добавим три значка: Twitter, YouTube и LinkedIn.

Для создания и редактирования необходимых нам значков будем использовать ресурс Shields.io. Используем URL-адрес https://img.shields.io/badge/ и передадим ему дополнительные параметры, чтобы получить нужные значки.

Первый параметр, который мы передадим, будет следующего формата: Label-Color

Здесь:

Label – название социальной сети, отображенное на значке.

Color – цвет самого значка.

Для трех социальных сетей значения будут следующие:

  • LinkedIn: LinkedIn-blue
  • Twitter: Twitter-blue
  • YouTube: YouTube-red

Так должен выглядеть итоговый URL для LinkedIn:

         https://img.shields.io/badge/LinkedIn-blue     

Если поместить этот URL в адресную строку браузера и перейти по нему, увидим следующее:

kak kreativno oformit profil na github chtoby on privlekal vnimanie be00c6c - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Обратите внимание, что пока на значке у нас только текст. Чтобы добавить логотип, нам нужно добавить в адрес еще 2 параметра:

  • logo = {название иконки для социальной сети}
  • logoColor = {цвет этой иконки}

Такой URL должен у нас получиться:

         https://img.shields.io/badge/LinkedIn-blue?logo=linkedin&logoColor=white     

Также добавим параметр стиля к нашему URL-адресу. Существует множество вариантов стилей, подробнее можно ознакомиться на сайте Shields.io. Мы будем использовать элемент for-the-badge.

Итоговый URL для значка LinkedIn будет выглядеть так:

         https://img.shields.io/badge/LinkedIn-blue?logo=linkedin&logoColor=white&style=for-the-badge     

Вставим этот адрес в браузер и посмотрим, что получилось:

kak kreativno oformit profil na github chtoby on privlekal vnimanie 3e61e78 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

По аналогии создадим URL-адреса для остальных значков:

         https://img.shields.io/badge/YouTube-red?style=for-the-badge&logo=youtube&logoColor=white https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white     

Добавим каждый URL в тег <img/>:

         <div id="badges">   <img src="https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn Badge"/>   <img src="https://img.shields.io/badge/YouTube-red?style=for-the-badge&logo=youtube&logoColor=white" alt="Youtube Badge"/>   <img src="https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter Badge"/> </div>      

Мы поместили изображения внутрь тега <div>, чтобы все значки были расположены на одной строке. Код выше выведет только картинки из URL-адресов. Чтобы добавить ссылки на социальный сети, каждое изображение нужно поместить в тег <a>.

Добавьте код ниже внутрь тега <div> с id="badges" и тег <img> с нашим GIF-изображением. Также не забудьте добавить ссылки на свои социальные сети в атрибут href.

         <div id="badges">   <a href="your-linkedin-URL">     <img src="https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn Badge"/>   </a>   <a href="your-youtube-URL">     <img src="https://img.shields.io/badge/YouTube-red?style=for-the-badge&logo=youtube&logoColor=white" alt="Youtube Badge"/>   </a>   <a href="your-twitter-URL">     <img src="https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter Badge"/>   </a> </div>      

Вот что должно получиться:

kak kreativno oformit profil na github chtoby on privlekal vnimanie dc5ad0f - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Далее в этом же разделе мы добавим счетчик просмотров профиля. Он будет подсчитывать количество просмотров вашей страницы на GitHub. Для значка счетчика воспользуемся проектом с открытым исходным кодом. Документация по этому проекту находится в профиле Views Counter на GitHub. Механизм очень похож на добавление значков для социальных сетей. Используем параметры стилей и в итоге должен получиться следующий URL:

         https://komarev.com/ghpvc/?username=имя пользователя на GitHub     

Добавьте следующий код после тега <div> с id="badges". Не забудьте указать верное имя пользователя.

         <img src="https://komarev.com/ghpvc/?username=your-github-username&style=flat-square&color=blue" alt=""/>     

Ниже образец того, что должно получиться:

kak kreativno oformit profil na github chtoby on privlekal vnimanie 925dfd8 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

И в конце этого раздела добавим текст и эмодзи. GIF-изображение можно взять с сайта Giphy.

Добавьте этот код после тега <img> в котором мы написали счетчик просмотров профиля:

         <h1>   hey there   <img src="https://media.giphy.com/media/hvRJCLFzcasrR4ia7z/giphy.gif" width="30px"/> </h1>      

Так должно получиться:

kak kreativno oformit profil na github chtoby on privlekal vnimanie 524372b - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Нажимаем кнопку Commit changes и тем самым сохраняем изменения. Итак, мы завершили первую часть по созданию файла README.md в нашем профиле на GitHub.

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

Вот пример того, что должно у нас получиться в этом разделе:

kak kreativno oformit profil na github chtoby on privlekal vnimanie 20c880b - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Как вы уже, наверное, поняли, мы добавим GIF-картинку и несколько слов о себе. GIF можно найти по этой ссылке.

Чтобы добавить GIF, мы будем использовать тег <img>, установим высоту и ширину изображения, а также поместим его внутрь тега <div>, чтобы выровнять изображение по центру с помощью атрибута align="center". Добавьте в файл README.md следующий код:

         <div align="center">   <img src="https://media.giphy.com/media/dWesBcTLavkZuG35MI/giphy.gif" width="600" height="300"/> </div>      

Результат:

kak kreativno oformit profil na github chtoby on privlekal vnimanie f356d7d - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Далее, добавим контент в раздел «О себе». Для оформления текста воспользуемся синтаксисом Markdown, так как нам не нужны никакие выравнивания. Добавьте этот код в ваш файл README.md:

         ### :woman_technologist: About Me :     

Три дефиса --- используются для добавления горизонтальной линии перед каждым разделом. Перед и после горизонтальной линии в Markdown должны быть пустые строки.

:woman_technologist: используется для добавления эмодзи. Также есть мужская версия этого эмодзи :man_technologist:

Список эмодзи и их кодов вы можете найти в репозитории по ссылке.

Далее мы кратко представимся. Нам будет достаточно одной строки и в этой же строке добавляем эмодзи. Вставьте следующий код в наш файл:

         I am a Full Stack Developer <img src="https://media.giphy.com/media/WUlplcMpOCEmTGBtBW/giphy.gif" width="30"> from India.     

Далее напишем список фактов о себе. Для этого используем синтаксис Markdown. В начале каждой строки добавим эмодзи. Добавьте следующий код и внесите соответствующие изменения. И не забудьте изменить your-linkedin-url на правильную ссылку.

         - :telescope: I’m working as a Software Engineer and contributing to frontend and backend for building web applications.  - :seedling: Exploring Technical Content Writing.  - :zap: In my free time, I solve problems on GeeksforGeeks and read tech articles.  - :mailbox:How to reach me: [![Linkedin Badge](https://img.shields.io/badge/-kakbar-blue?style=flat&logo=Linkedin&logoColor=white)](your-linkedin-url)      

Обратите внимание на последнюю строку. Внутри мы использовали элементы синтаксиса Markdown ![]() чтобы отобразить значок LinkedIn.

Вот что у нас получилось.

kak kreativno oformit profil na github chtoby on privlekal vnimanie 7716b6c - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Добавление языков программирования и инструментов

Вот результат того, что мы будем делать в этой части статьи.

kak kreativno oformit profil na github chtoby on privlekal vnimanie 72f5661 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Для начала добавим заголовок, вставьте следующий код в файл README.md:

          ---  ### :hammer_and_wrench: Languages and Tools :      

Мы добавим изображения, которые отражают какими технологиями и навыками вы обладаете. Бесплатные логотипы для разных языков программирования можно найти в репозитории DevIcons.

Перейдите в папку icons, найдите и откройте директорию react. Здесь вы найдете изображения в форматах SVG и EPS. Кликните на нужное изображение и скопируйте URL из адресной строки браузера.

kak kreativno oformit profil na github chtoby on privlekal vnimanie 658efc9 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Скопированный URL мы будем использовать в теге <img> и сразу установим атрибуты высоты и ширины. Точно таким же способом вы можете добавлять навыки в отдельные <img> теги.

Добавьте следующий код в файл. Откорректируйте список навыков, чтобы он соответствовал вашему опыту.

         <div>   <img src="https://github.com/devicons/devicon/blob/master/icons/java/java-original-wordmark.svg" title="Java" alt="Java" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/react/react-original-wordmark.svg" title="React" alt="React" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/spring/spring-original-wordmark.svg" title="Spring" alt="Spring" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/materialui/materialui-original.svg" title="Material UI" alt="Material UI" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/flutter/flutter-original.svg" title="Flutter" alt="Flutter" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/redux/redux-original.svg" title="Redux" alt="Redux " width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/css3/css3-plain-wordmark.svg"  title="CSS3" alt="CSS" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/html5/html5-original.svg" title="HTML5" alt="HTML" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/javascript/javascript-original.svg" title="JavaScript" alt="JavaScript" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/firebase/firebase-plain-wordmark.svg" title="Firebase" alt="Firebase" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/gatsby/gatsby-original.svg" title="Gatsby"  alt="Gatsby" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/mysql/mysql-original-wordmark.svg" title="MySQL"  alt="MySQL" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/nodejs/nodejs-original-wordmark.svg" title="NodeJS" alt="NodeJS" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/amazonwebservices/amazonwebservices-plain-wordmark.svg" title="AWS" alt="AWS" width="40" height="40"/>&nbsp;   <img src="https://github.com/devicons/devicon/blob/master/icons/git/git-original-wordmark.svg" title="Git" **alt="Git" width="40" height="40"/> </div>      

Вот результат того, что у нас получилось:

kak kreativno oformit profil na github chtoby on privlekal vnimanie e29b4cb - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Добавление статистики GitHub

В этой части статьи у нас должно получиться следующее:

kak kreativno oformit profil na github chtoby on privlekal vnimanie 2290aed - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Для заголовка добавьте следующий код в README.md:

         ---  ### :fire: My Stats :      

Мы добавим в этот раздел немного статистики по вашей активности на GitHub, например: количество коммитов, количество пулл-реквестов (pull requests) и т. д. На GitHub есть много проектов с открытым кодом, которые предоставляют различные данные по статистике. В этой статье мы будем использовать два проекта.

Первый проект – это GitHub Streak Stats. Он предоставляет следующие три показателя:

  1. Общее число контрибуций пользователя.
  2. Самый продолжительный период контрибуций.
  3. Статистика по текущему периоду.

Получим доступ к статистике по следующему URL:

         https://github-readme-streak-stats.herokuapp.com/?user=your-github-username     

Мы можем немного кастомизировать вывод статистики (изменить тему, цвет фона и т. д.) добавлением параметров к URL. Добавьте следующий код в README.md. Замените your-github-username на своё имя пользователя.

         [![GitHub Streak](http://github-readme-streak-stats.herokuapp.com?user=your-github-username&theme=dark&background=000000)](https://git.io/streak-stats)     

Вот пример того, что должно получиться, здесь в качестве имени пользователя было использовано itsZed0.

kak kreativno oformit profil na github chtoby on privlekal vnimanie e9439c1 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Также мы можем использовать ресурс Streak Stats Website для генерации URL:

  1. Зайдите на сайт Streak Stats Website. В поле Username введите имя пользователя на GitHub и заполните остальные поля.
  2. Далее нажмите Submit.

3. После того как Markdown сгенерировался, нажмите Copy To Clipboard и добавьте скопированную информацию в README.md.

kak kreativno oformit profil na github chtoby on privlekal vnimanie 50b400d - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Следующий проект, который мы будет использовать для статистики – это GitHub Readme Stats, разработанный Anurag Hazra. Данный продукт предоставляет всевозможную статистику, но в этой статье мы будем использовать только одну. Она отображает ТОП языков программирования, которыми вы пользуетесь. Если вы хотите более подробно ознакомиться с этим проектом, можете почитать документацию в репозитории.

Ниже пример Markdown для отображения языков программирования, которые вы используете:

         [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=your-github-username)](https://github.com/anuraghazra/github-readme-stats)      

Здесь также можно доработать внешний вид (изменить цвет, ограничить количество языков и т. д.). Более подробно с возможностями кастомизации можно ознакомиться здесь.

Добавьте следующий код в README.md. Замените your-github-username своими данными.

         [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=your-github-username&layout=compact&theme=vision-friendly-dark)](https://github.com/anuraghazra/github-readme-stats)     

Ниже пример того, что получилось:

kak kreativno oformit profil na github chtoby on privlekal vnimanie ad9b6e7 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Добавление блогов в наш README.md на GitHub

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

kak kreativno oformit profil na github chtoby on privlekal vnimanie 2b80774 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Для заголовка добавьте следующий код в README.md:

         ---  ### :writing_hand: Blog Posts :      

В этом разделе мы отобразим недавние посты, опубликованные пользователем на различных платформах. Для этого мы создадим рабочий поток (workflow), который будет представлять собой автоматизированный процесс выполнения заданий. Каждое задание в потоке будет иметь одно или более возможных действий. Действие на GitHub – это набор исполняемых команд, объединенных в этапы. Мы также можем использовать собственное действие или использовать действие, созданное другим пользователем.

Чтобы получить сообщения в блоге, мы использует два уже существующих действия:

  1. Checkout – используется для извлечения всех файлов из текущего репозитория в рабочий процесс Git для предоставления процессу доступа к ним.
  2. Blog Post Workflow – используется для получения последних сообщений в блогах с других сайтов.

Рабочий процесс можно запускать в определенное время или при наличии триггера. В этом обучении, для получения последней записи в блоге, мы будем запускать рабочий процесс каждый час. Более подробно про действия (GitHub actions) можно почитать в официальной документации.

Чтобы создать рабочий поток GitHub, сделайте следующее:

  • Добавьте следующий код в README.md. Рабочий поток заменит комментарии списком постов:
         <!-- BLOG-POST-LIST:START -->  <!-- BLOG-POST-LIST:END -->     
  • Сохраните изменения, нажав Commit change.
  • Конфигурация рабочего потока GitHub определяется в файле с расширением .yml в котором используется синтаксис YAML. В вашем репозитории нажмите Add File, затем Create New file.

kak kreativno oformit profil na github chtoby on privlekal vnimanie e94b9f6 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

  • В поле Name your file.. введите .github/workflows/blog-post-workflow.yml. Вся конфигурация рабочего потока GitHub располагается в директории .github/workflows.

kak kreativno oformit profil na github chtoby on privlekal vnimanie 01aaab4 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

  • Добавьте следующий код в раздел Edit new file:
         name: Latest blog post workflow on:   schedule:     # Runs every hour     - cron: '0 * * * *'   workflow_dispatch:  jobs:   update-readme-with-blog:     name: Update this repos README with latest blog posts     runs-on: ubuntu-latest     steps:       - uses: actions/checkout@v2       - uses: gautamkrishnar/blog-post-workflow@master         with:           max_post_count: "4"           feed_list: "https://dev.to/feed/itszed0"      

В этом коде мы определили рабочий поток с названием Latest blog post workflow, который запускается по графику (on: schedule:), заданному в поле cron. 0 * * * * – это POSIX cron синтаксис, и значение этого поля в том, что задача будет запускаться в ноль минут каждого часа.

  • workflow_dispatch: позволяет пользователю отслеживать и запускать рабочий поток вручную.
  • jobs позволяет нам определить одно или несколько заданий, которые будут выполняться во время работы потока. В нашем случае, у нас одна задача – update-readme-with-blog – которая запускается (runs-on) на машине с операционной системой Ubuntu, размещенной на GitHub.
  • steps определяет набор действий или команд, которые должны быть исполнены. Мы создали два действия steps: actions/checkout@v2 и gautamkrishnar/blog-post-workflow@master. Последнее принимает два параметра, которые прописаны в поле with.
  • max_post_count определяет максимальное количество постов для отображения в README.
  • feed_list – это разделенный запятыми RSS-канал для URL-адресов различных блогинг-платформ.

В этой статье мы добавим блоги с платформы dev.to. Чтобы узнать, какие платформы поддерживаются данным функционалом, ознакомьтесь с документацией.

Если вы хотите узнать больше о синтаксисе для рабочих потоков GitHub, можете ознакомиться с документацией Workflow Syntax.

Замените значение в поле feed_list вашей ссылкой и нажмите Commit new file. Тем самым вы создадите рабочий поток. В результате поток будет каждый час проверять новые посты из вашего профиля на dev.to и добавлять их в README.md.

Чтобы запустить поток вручную, выполните следующее:

  • В репозитории перейдите на вкладку Actions.
  • Под надписью All workflows нажмите Latest blog post workflow.
  • Нажмите Run workflow. Откроется выпадающий список и далее Run workflow. Рабочий поток начнет выполняться.

kak kreativno oformit profil na github chtoby on privlekal vnimanie 2d82919 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

  • Перейдите на страницу профиля в раздел Blog Posts. Вы увидите список всех постов с платформ, прописанных в файле blog-post-workflow.yml. На картинке ниже показан список постов по адресу https://dev.to/feed/itszed0, который мы прописали в feed_list.

kak kreativno oformit profil na github chtoby on privlekal vnimanie be06af6 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

Вы можете перейти по ссылке и убедиться в том, что у пользователя itsZed0 один пост с названием Test post: рабочий поток «увидел» эту запись и отобразил её в профиле на GitHub.

Вот что у нас получилось в итоге.

kak kreativno oformit profil na github chtoby on privlekal vnimanie 7d8e3f1 - 🔥 Как креативно оформить профиль на GitHub, чтобы он привлекал внимание

***

В этой статье мы:

  1. Изучили, что такое файл README.md в профиле на GitHub.
  2. Узнали, как создавать файл README.md.
  3. Добавили GIF-изображения, информацию о себе и свои навыки в профиль.
  4. Добавили статистические данные.
  5. Создали рабочий поток для отображения постов из наших социальных сетей в профиле на GitHub.

Материалы по теме

  • Вдарим по опенсорсу: как без страха прокачать свой аккаунт на Github
  • GitLab или GitHub? Как выбрать ресурс под определённый тип репозитория
  • Почему твой GitHub-репозиторий никому не нужен

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close