![](https://habrastorage.org/getpro/habr/upload_files/0e1/d35/965/0e1d3596513c01a8060895bb9edc0e7b.png)
Еще летом 2020 года GiHub разрешили создавать пользовательские README. И хотя платформа предлагает готовые шаблоны, о какой кастомизации может идти речь, если у всех будут одинаковые профили? За три года сообщество напридумывало много способов, чтобы выделиться.
О том, как это сделать — читайте ниже в нашем материале.
Создаем README.me профиля
![](https://habrastorage.org/getpro/habr/upload_files/97d/4db/894/97d4db8945c57c8dda7c16e80da1dad9.png)
Чтобы создать README для начала необходимо сгенерировать новый публичный репозиторий, вписав в названии свой никнейм. Как только мы откроем настройки, нас поздравит Octocat с созданием личного репозитория профиля. GitHub сразу предоставляет базовый шаблон, но давайте поговорим о том, как сделать оформление чуточку интереснее.
Чтобы работать с файлом Readme понадобятся знания Markdown и HTML, языков разметки. К сожалению, первый выравнивает любой текст по левому краю — HTML как раз решает эту проблему и выравнивает текст и задает размер нужному изображению, если нужно. Поэтому и пользоваться мы будем им.
Как сделать привлекательный заголовок
Чтобы было проще, возьмем изображения с профиля Данила, райтера.
![](https://habrastorage.org/getpro/habr/upload_files/463/400/f2f/463400f2fac937e3a4bd3b81883e787b.png)
Давайте разместим заголовок по центру при помощи 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, поэтому проблем с отображением быть не должно.
![](https://habrastorage.org/getpro/habr/upload_files/99e/7f3/6a9/99e7f36a909d2fe8ffa705e83b7c435b.png)
Также пользователи сделали интересный репозиторий с эффектом печатной машинки для Readme профиля, просто заходите в веб-интерфейс (https://readme-typing-svg.herokuapp.com/demo/) и программа выдаст готовый код как в HTML, так и в Markdown разметке.
![](https://habrastorage.org/getpro/habr/upload_files/611/32e/2ed/61132e2ed837aebd87690205e76885f0.gif)
Иконки и ачивки
![](https://habrastorage.org/getpro/habr/upload_files/b20/0a8/500/b200a85003214b7676c723a6f8aecea3.png)
1. Simple Icons — коллекция иконок популярных брендов, компаний, технологий и сервисов. На официальном веб-сайте проекта пользователи могут легко найти подходящую иконку, скачать её в формате SVG и интегрировать в свой Markdown-файл. Но лучше вставлять изображения с помощью HTML — так удобнее задавать необходимый размер.
2. Shields.io — инструмент для генерации кастомных бейджей. Можно выбрать из готовых шаблонов и подогнать под свой случай, а можно настроить полностью с нуля.
Так, давайте пойдем дальше. Приятно показывать свои регалии? Пользователи разработали целую тучу тулов, чтобы вы смогли отобразить все ваши pet-проекты в статистике. Давайте, пробежимся по парочке. Вот здесь пользователи действительно постарались и разработали кучу модулей, чтобы максимально персонализировать профиль
Виджеты для статистики
![](https://habrastorage.org/getpro/habr/upload_files/2cb/7bf/010/2cb7bf010c46cabcf2e40156e84dea5f.png)
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)
![](https://habrastorage.org/getpro/habr/upload_files/e18/58b/76f/e1858b76f613b8cc792889f601f93377.png)
4. Longest streak stats — показывает продолжительность ежедневных сессий и все количество вкладов в сообщество. Здесь и можно показать, насколько ты готов к кранчам))) Автор виджета предоставляет подробную инструкцию по использованию и визуальный конструктор, чтобы подогнать плашку под свой профиль. Если вставлять код из примеров, то параметр user= надо заменить на свой никнейм, если создавать собственный дизайн в конструкторе, то система выдаст необходимый код для вставки.
[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=DenverCoder1)](https://git.io/streak-stats)
![](https://habrastorage.org/getpro/habr/upload_files/efe/f7f/4b0/efef7f4b017e786c5384a0f26ff65f19.png)
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)
![](https://habrastorage.org/getpro/habr/upload_files/7ec/7b7/7fa/7ec7b77fa5b31257d6b6d22150e6315e.png)
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)
![](https://habrastorage.org/getpro/habr/upload_files/63a/473/0d4/63a4730d43547d49b66c186da02d56f2.png)
8. GitHub Profile Views Counter — маленький бейджик, с помощью которого можно отслеживать число посетителей.
![](https://komarev.com/ghpvc/?username=your-github-username)
![](https://habrastorage.org/getpro/habr/upload_files/7eb/c9f/3af/7ebc9f3afa9f503a0c17fb727cee4755.png)
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)
![](https://habrastorage.org/getpro/habr/upload_files/473/e56/ce3/473e56ce303544b7bd7aeee59c94f926.png)
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)
![](https://habrastorage.org/getpro/habr/upload_files/67d/8cf/fd1/67d8cffd1d965ac70c2ad4f169e809a8.png)
11. GitHub Profile Summary Cards — карточка с популярными языками, графиком активностями. Встраивать можно как с помощью Markdown, так и с помощью GitHub Actions. На выбор 10 цветовых схем.
В репозитории есть инструкция, но также имеется и веб-приложение для генерации необходимых ссылок. Код для вставки (username= меняем на свой ник, а theme= на название темы из списка).
Github Actions
Но давайте теперь перейдем к самому интересному – Actions позволяет автоматизировать репозитории под вывод информации в реальном времени и интеграцию в Readme интерактивных игр. Давайте приведем парочку примеров.
![](https://habrastorage.org/getpro/habr/upload_files/09f/158/d2c/09f158d2cb407327153735acd63d75b3.png)
1. Waka Readme Stats предоставляет возможность динамического отображения статистики из сервиса Wakatime на профиле GitHub. Этот инструмент позволяет выбирать конкретную информацию для отображения, такую как статистика по языкам программирования, количество коммитов в разное время суток и данные по используемым средам разработки и операционным системам. Для этого используются плагины Wakatime, собирающие данные из популярных сред разработки.
![](https://habrastorage.org/getpro/habr/upload_files/340/966/0cf/3409660cfe5538fb0e68cdb9c4cc54b1.png)
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.
И готово!
![](https://habrastorage.org/getpro/habr/upload_files/a44/41d/179/a4441d179a8bdf2e13aa341f3666340e.png)
3. Metrics представляет собой обширную библиотеку с более чем 30 различными плагинами и более чем 200 параметрами для настройки динамической инфографики. Эти плагины позволяют отображать различную статистику, такую как количество коммитов, популярные языки, последние обновления и вклад в сообщество.
![](https://habrastorage.org/getpro/habr/upload_files/dee/6ee/70d/dee6ee70d9368badf6bf93b228b7a5c9.gif)
4. GitHub Stats Terminal Style предлагает анимированное окно со статистикой в дизайне терминала, которое также обновляется с использованием GitHub Actions. Пользователи могут выбирать из около десяти цветовых схем и настраивать информацию.
![](https://habrastorage.org/getpro/habr/upload_files/28a/d2f/291/28ad2f291ab2f5fe4b08df15e2bc0621.png)
5. Todoist Stats интегрируется с сервисом отслеживания задач Todoist, выводя основную статистику о работе над задачами на профиле GitHub. Подключение осуществляется через GitHub Actions или другие решения из GitHub.
"snk" добавляет в md-файл профиля анимированную сетку Contributions Graph с змейкой, которая перемещается и съедает зеленые квадратики активности. Эта анимация генерируется ежедневно с помощью GitHub Actions, добавляя оригинальный элемент на страницу профиля.
Вот и все! На просторах интернета можно найти и другие инструменты) Не бойтесь экспериментировать, но и не забывайте про стиль.
Комментарии (6)
MaxiEnergy
01.05.2024 03:25+4Тут главное с кастомизацией не перемудрить, чтобы не выглядело аляповато и безвкусно. К некоторым зайдешь - ощущение, что попал на сайт онлайн казино, потому что все двигается, светится, элементов очень много. Все же вкус - это дело тонкое.
Спасибо за статью. Почитать было полезно, на всякий случай сохраню. Может что-то у себя использую)
velon
01.05.2024 03:25+5Но ведь это всё уже было в Оформляем README-файл профиля на GitHub
Зачем этот повтор?
Japskiddin
01.05.2024 03:25Не знал, что на GitHub можно делать такое описание профиля, спасибо за статью!
shubinftw
Как же круто, что на гите есть возможность использовать столько инструментов для кастомизации: это же рай для любой площадки.
Спасибо за статью!