Еще летом 2020 года GiHub разрешили создавать пользовательские README. И хотя платформа предлагает готовые шаблоны, о какой кастомизации может идти речь, если у всех будут одинаковые профили? За три года сообщество напридумывало много способов, чтобы выделиться. 

О том, как это сделать — читайте ниже в нашем материале. 

Создаем README.me профиля

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

Чтобы работать с файлом Readme понадобятся знания Markdown и HTML, языков разметки. К сожалению, первый выравнивает любой текст по левому краю — HTML как раз решает эту проблему и выравнивает текст и задает размер нужному изображению, если нужно. Поэтому и пользоваться мы будем им. 

Как сделать привлекательный заголовок

Чтобы было проще, возьмем изображения с профиля Данила, райтера.

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

Код выглядит так: 

<h1 align="center">Hi there, I'm <a href="https://daniilshat.ru/" target="_blank">Daniil</a> 
<img src="https://github.com/blackcater/blackcater/raw/main/images/Hi.gif" height="32"/></h1>
<h3 align="center">Computer science student, IT news writer from Russia ??</h3>

Некоторые используют вместо текста в заголовке баннеры, которые можно сделать в любом редакторе или конструкторе по типу ReHeader. 

Если хочется поиграться со шрифтами, всегда можно воспользоваться сервисами по типу Fancy Letters, шрифты из конвертов включены в Unicode, поэтому проблем с отображением быть не должно.

Также пользователи сделали интересный репозиторий с эффектом печатной машинки для Readme профиля, просто заходите в веб-интерфейс (https://readme-typing-svg.herokuapp.com/demo/) и программа выдаст готовый код как в HTML, так и в Markdown разметке.

Иконки и ачивки

1. Simple Icons — коллекция иконок популярных брендов, компаний, технологий и сервисов. На официальном веб-сайте проекта пользователи могут легко найти подходящую иконку, скачать её в формате SVG и интегрировать в свой Markdown-файл. Но лучше вставлять изображения с помощью HTML — так удобнее задавать необходимый размер.

2. Shields.io — инструмент для генерации кастомных бейджей. Можно выбрать из готовых шаблонов и подогнать под свой случай, а можно настроить полностью с нуля.

Так, давайте пойдем дальше. Приятно показывать свои регалии? Пользователи разработали целую тучу тулов, чтобы вы смогли отобразить все ваши pet-проекты в статистике. Давайте, пробежимся по парочке. Вот здесь пользователи действительно постарались и разработали кучу модулей, чтобы максимально персонализировать профиль

Виджеты для статистики

3. Github Trophy - трофеи и ачивки прямо в профиле. 10 цветовых схем, чтобы интегрировать виджет под свой дизайн readme, можно выбрать расположение награди настроить фильтрацию. Для добавления необходимо вставить следующий md-код в свой файл, параметр username= необходимо заменить на свой никнейм на платформе.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)

4. Longest streak stats — показывает продолжительность ежедневных сессий и все количество вкладов в сообщество. Здесь и можно показать, насколько ты готов к кранчам))) Автор виджета предоставляет подробную инструкцию по использованию и визуальный конструктор, чтобы подогнать плашку под свой профиль. Если вставлять код из примеров, то параметр user= надо заменить на свой никнейм, если создавать собственный дизайн в конструкторе, то система выдаст необходимый код для вставки.

[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=DenverCoder1)](https://git.io/streak-stats)

5. GitHub Stats Card —  виджет выводит основную информацию о деятельности пользователь на платформе — общее количество звезд, коммитов и вкладов в сообщество. Предоставляет сравнительную оценку пользователя, сопоставляя его деятельность с другими участниками GitHub. Несколько базовых тем в наборе и возможность кастомизации 

 Чтобы добавить виджет на свой веб-сайт, необходимо скопировать соответствующий код, вставить его в файл и заменить параметр "username" на актуальное имя пользователя.

 [![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

6. GitHub Extra Pins — позволяет закрепить еще парочку репозиториев внутри README-файл в виде карточки и не ограничиваться только 6 проектами. 

 Для вставки надо заменить параметры username= на актуальный никнейм, repo= на название необходимого репозитория, а в скобках указать ссылку на сам репозиторий.

 [![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)

 7. Codewars — виджет, показывающий количество решенных задач и актуальный уровень пользователя на платформе. Ссылки на карточки можно найти в своем профиле, нажав на кнопку «View Profile Badges» под аватаркой. Кастомизации нормальной нет, но есть три варианта размеров виджета.

Большой (large):  [![codewars](https://www.codewars.com/users/username/badges/large)](https://www.codewars.com/users/username)   

Нужно заменить оба поля username на актуальный никнейм на платформе Codewars и вставить в свой md-файл. 

 Все, наверное, слышали про литкод, амбассадор топовых задачек для программистов, так сказать. Ну так вот с LeetCode Readme Stats можно выводить данные о количестве решенных задач с уровнями сложности. Также у автора имеется инструкция по настройке отслеживания статистики с помощью GitHub Actions. Параметр username= необходимо заменить на актуальный.

 Светлая тема:  

[![KnlnKS's LeetCode stats](https://leetcode-stats-six.vercel.app/api?username=KnlnKS)](https://github.com/KnlnKS/leetcode-stats)

Темная тема:  

[![KnlnKS's LeetCode stats](https://leetcode-stats-six.vercel.app/api?username=KnlnKS&theme=dark)](https://github.com/KnlnKS/leetcode-stats)

 8. GitHub Profile Views Counter — маленький бейджик, с помощью которого можно отслеживать число посетителей. 

 

 9. Github Readme Activity Graph — виджет с графиком активности на платформе за последний месяц. Интересно, зачем вообще нужна статистика подобной активности, но автор предлагает для персонализации больше 10 тем и инструкцию к кастомизации. 

 Вставка производится уже привычным способом — копируем код, меняем параметр username= на нужный и вставляем в свой md-файл.

 [![Ashutosh's github activity graph](https://activity-graph.herokuapp.com/graph?username=Ashutosh00710)](https://github.com/ashutosh00710/github-readme-activity-graph)

10. Виджет "GitHub Readme StackOverflow" позволяет вставить статистику вклада в сообщество StackOverflow в свой профиль на GitHub. Можно выбрать одну из двух тем и два размера карточки. 

Для использования виджета в своём README профиля, просто скопируйте код и замените параметр userID на свой ID. Тему можно выбрать с помощью параметра theme (ligh) или (dark) и размер с помощью параметра layout (default) или (compact). 

[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042&layout=compact&theme=dark)](https://stackoverflow.com/users/6558042/omid-nikrah)

11. GitHub Profile Summary Cards — карточка с популярными языками, графиком активностями. Встраивать можно как с помощью Markdown, так и с помощью GitHub Actions. На выбор 10 цветовых схем. 

В репозитории есть инструкция, но также имеется и веб-приложение для генерации необходимых ссылок. Код для вставки (username= меняем на свой ник, а theme= на название темы из списка).

Github Actions

Но давайте теперь перейдем к самому интересному – Actions позволяет автоматизировать репозитории под вывод информации в реальном времени и интеграцию в Readme интерактивных игр. Давайте приведем парочку примеров. 

1. Waka Readme Stats предоставляет возможность динамического отображения статистики из сервиса Wakatime на профиле GitHub. Этот инструмент позволяет выбирать конкретную информацию для отображения, такую как статистика по языкам программирования, количество коммитов в разное время суток и данные по используемым средам разработки и операционным системам. Для этого используются плагины Wakatime, собирающие данные из популярных сред разработки.

2. Blog post workflow рассматривает настройку вывода последних постов из различных блогов или социальных сетей в формате md-файла на GitHub. Инструкция включает подробные шаги по интеграции с различными платформами, такими как Dev.to, Medium, Stackoverflow, Reddit, YouTube, а также возможность использования RSS-ссылок для вывода последних постов из собственного блога. Процесс настройки включает создание файлов и использование GitHub Actions для регулярного обновления информации. 

Если хотите добавить выход постов с блога – выглядеть сам код будет примерно так:

Первым делом создаём md-файл профиля со следующим контентом:

<!-- BLOG-POST-LIST:START --><!-- BLOG-POST-LIST:END -->

Затем, в репозитории создаём путь username/.github/workflows/blog-post-workflow.yml и заполняем его:

name: Latest blog post workflow
on:
  schedule:
    - cron: '0 * * * *'
  workflow_dispatch:

jobs:
  update-readme-with-blog:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "ССЫЛКА НА ПРОФИЛЬ"

Замените feed_list на вашу ссылку RSS.

И готово!

3. Metrics представляет собой обширную библиотеку с более чем 30 различными плагинами и более чем 200 параметрами для настройки динамической инфографики. Эти плагины позволяют отображать различную статистику, такую как количество коммитов, популярные языки, последние обновления и вклад в сообщество.

4. GitHub Stats Terminal Style предлагает анимированное окно со статистикой в дизайне терминала, которое также обновляется с использованием GitHub Actions. Пользователи могут выбирать из около десяти цветовых схем и настраивать информацию.

5. Todoist Stats интегрируется с сервисом отслеживания задач Todoist, выводя основную статистику о работе над задачами на профиле GitHub. Подключение осуществляется через GitHub Actions или другие решения из GitHub.

"snk" добавляет в md-файл профиля анимированную сетку Contributions Graph с змейкой, которая перемещается и съедает зеленые квадратики активности. Эта анимация генерируется ежедневно с помощью GitHub Actions, добавляя оригинальный элемент на страницу профиля.

Вот и все! На просторах интернета можно найти и другие инструменты) Не бойтесь экспериментировать, но и не забывайте про стиль.