Как изменить readme github

Introduction

Markdown is an easy-to-read, easy-to-write language for formatting plain text. You can use Markdown syntax, along with some additional HTML tags, to format your writing on GitHub, in places like repository READMEs and comments on pull requests and issues. In this guide, you’ll learn some advanced formatting features by creating or editing a README for your GitHub profile.

If you’re new to Markdown, you might want to start with «Basic writing and formatting syntax» or the Communicate using Markdown GitHub Skills course.

If you already have a profile README, you can follow this guide by adding some features to your existing README, or by creating a gist with a Markdown file called something like about-me.md. For more information, see «Creating gists.»

Creating or editing your profile README

Your profile README lets you share information about yourself with the community on GitHub.com. The README is displayed at the top of your profile page.

If you don’t already have a profile README, you can add one.

1. Create a repository with the same name as your GitHub username, initializing the repository with a README.md file. For more information, see «Managing your profile README.»
2. Edit the README.md file and delete the template text (beginning ### Hi there) that is automatically added when you create the file.

If you already have a profile README, you can edit it from your profile page.

1. In the upper-right corner of any GitHub page, click your profile photo, then click Your profile.

2. Click the next to your profile README.

   

Adding an image to suit your visitors

You can include images in your communication on GitHub. Here, you’ll add a responsive image, such as a banner, to the top of your profile README.

By using the HTML <picture> element with the prefers-color-scheme media feature, you can add an image that changes depending on whether a visitor is using light or dark mode. For more information, see «Managing your theme settings.»

1. Copy and paste the following markup into your README.md file.

2. Replace the placeholders in the markup with the URLs of your chosen images. Alternatively, to try the feature first, you can copy the URLs from our example below.

   • Replace YOUR-DARKMODE-IMAGE with the URL of an image to display for visitors using dark mode.
   • Replace YOUR-LIGHTMODE-IMAGE with the URL of an image to display for visitors using light mode.
   • Replace YOUR-DEFAULT-IMAGE with the URL of an image to display in case neither of the other images can be matched, for example if the visitor is using a browser that does not support the prefers-color-scheme feature.

3. To make the image accessible for visitors who are using a screen reader, replace YOUR-ALT-TEXT with a description of the image.

4. To check the image has rendered correctly, click the Preview tab.

For more information on using images in Markdown, see «Basic writing and formatting syntax.»

Example of a responsive image

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
  <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

How the image looks

Adding a table

You can use Markdown tables to organize information. Here, you’ll use a table to introduce yourself by ranking something, such as your most-used programming languages or frameworks, the things you’re spending your time learning, or your favorite hobbies. When a table column contains numbers, it’s useful to right-align the column by using the syntax --: below the header row.

1. Return to the Edit file tab.

2. To introduce yourself, two lines below the </picture> tag, add an ## About me header and a short paragraph about yourself, like the following.

   ## About me
   
   Hi, I'm Mona. You might recognize me as GitHub's mascot.
   

3. Two lines below this paragraph, insert a table by copying and pasting the following markup.

4. In the column on the right, replace THING-TO-RANK with «Languages,» «Hobbies,» or anything else, and fill in the column with your list of things.

5. To check the table has rendered correctly, click the Preview tab.

For more information, see «Organizing information with tables.»

Example of a table

## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

How the table looks

Adding a collapsed section

To keep your content tidy, you can use the <details> tag to create an expandible collapsed section.

1. To create a collapsed section for the table you created, wrap your table in <details> tags like in the following example.

2. Between the <summary> tags, replace THINGS-TO-RANK with whatever you ranked in your table.

3. Optionally, to make the section display as open by default, add the open attribute to the <details> tag.

   <details open>
   

4. To check the collapsed section has rendered correctly, click the Preview tab.

Example of a collapsed section

<details>
<summary>My top languages</summary>

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

</details>

How the collapsed section looks

Adding a quote

Markdown has many other options for formatting your content. Here, you’ll add a horizontal rule to divide your page and a blockquote to format your favorite quote.

1. At the bottom of your file, two lines below the </details> tag, add a horizontal rule by typing three or more dashes.

   ---
   

2. Below the --- line, add a quote by typing markup like the following.

   > QUOTE
   

   Replace QUOTE with a quote of your choice. Alternatively, copy the quote from our example below.

3. To check everything has rendered correctly, click the Preview tab.

Example of a quote

---
> If we pull together and commit ourselves, then we can push through anything.

— Mona the Octocat

How the quote looks

You can use HTML comment syntax to add a comment that will be hidden in the output. Here, you’ll add a comment to remind yourself to update your README later.

1. Two lines below the ## About me header, insert a comment by using the following markup.

   <!-- COMMENT -->
   

   Replace COMMENT with a «to-do» item you remind yourself to do something later (for example, to add more items to the table).

2. To check your comment is hidden in the output, click the Preview tab.

## About me

<!-- TO DO: add more details about me later -->

Saving your work

When you’re happy with your changes, save your profile README by clicking Commit changes.

Committing directly to the main branch will make your changes visible to any visitor on your profile. If you want to save your work but aren’t ready to make it visible on your profile, you can select Create a new branch for this commit and start a pull request.

Next steps

• Continue to learn about advanced formatting features. For example, see «Creating diagrams» and «Creating and highlighting codeblocks.»
• Use your new skills as you communicate across GitHub, in issues, pull requests, and discussions. For more information, see «Communicating on GitHub.»

Перевод статьи «Creating a Killer GitHub Profile README. Part 1».

README. Те самые файлы в markdown-разметке, которые вы создаете для нового проекта или GitHub-репозитория. Возможно, вы редактируете README для каждого своего проекта. А может, предпочитаете просто оставлять в этих файлах шаблонное содержимое.

Начиная с июля 2020 года GitHub дает возможность разработчикам создавать репозитории на уровне профиля и использовать README для персонализации их страниц.

Я знал об этом несколько месяцев, но лишь недавно решил углубиться в эту тему. Ну… возможно, я даже слишком углубился.

Многие разработчики, как мне кажется, зря вставляют в свои профили множество «крутых» виджетов и бейджей. Они делают это, не осознавая, что профиль на GitHub похож на портфолио. Он должен подчеркивать то, что делает вас уникальным.

В интернете есть много статей и руководств о том, как добавить в файл README.md самые базовые вещи: изображения, бейджи, статистику. Но я хотел получить что-то более личное, я хотел уникальный профиль. Он должен был:

1. Направлять посетителей в другие мои каналы.
2. Продвигать мои последние опубликованные статьи.
3. В привлекательном виде отображать прикрепленные репозитории.
4. Позволять пользователям видеть мою GitHub-статистику (некоторую).
5. Перечислять некоторые из моих навыков — для тех, кому просто любопытно, и для потенциальных работодателей.
6. Завершать просмотр кое-чем интересным — цитатой из сериала «Офис», получаемой из созданного мной API.

Я советую вам составить собственный список того, что вы хотите видеть в своем профиле. Подумайте, как он должен отображать вашу уникальность.

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

Разбираемся с ограничениями

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

Я знал, что хочу видеть в своем README. Это должен был быть базовый контент и основные сведения — картинки, заголовки и бейджи, которые при клике перенаправляли бы пользователя в нужное место. Также в моем README должны были быть графики и виджеты, отображающие GitHub-статистику. В интернете довольно много туториалов на эту тему, с их помощью можно довольно легко все это реализовать.

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

GitHub Actions. Эти встроенные конвейеры репозиториев позволяют разработчикам автоматизировать задачи и процессы. Вот их-то я и использовал для извлечения своих последних постов и отправки запроса на случайную цитату в мой API. Эти рабочие потоки могут триггерить файлы или функции для получения информации и вставлять контент в README.

Я настроил задачу cron для запуска процесса каждый час, так что мой профиль постоянно обновляется новыми статьями, а посетители при каждом заходе на мою страницу получают новую цитату.

В следующей статье я подробнее остановлюсь на реализации всего этого, но надеюсь, этот обзор дал вам представление о том, как вообще подходить к проблеме.

Создайте репозиторий вашего профиля

Зайдите на GitHub и создайте новый репозиторий с тем же именем, что ваш username на GitHub. У меня имя пользователя — braydoncoyer, поэтому я создал репозиторий с именем braydoncoyer. Если сделаете все правильно, GitHub покажет секретное сообщение (картинка ниже).

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

Также я сразу инициализировал репозиторий файлами README.md и .gitignore.

Примечание. На скриншоте вы видите полученную мной ошибку. Дело в том, что у меня уже был создан репозиторий уровня профиля. У вас такой ошибки не должно возникнуть. Также, если вы не знали, не так давно GitHub выкатил темный режим.

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

Создание шаблона README

Хотя я инициализировал репозиторий файлом README.md, я быстро обнаружил, что мне придется редактировать мой контент в отдельном файле и использовать его как шаблон. Этот шаблон будет скелетом из статического контента, который я использую для создания финального README.md. Для такого решения было несколько причин, но из них можно выделить две основные:

1. По моей задумке рабочий поток GitHub Actions будет триггерить файлы, использующие этот шаблон, вставлять динамический контент, а затем брать весь шаблон и вставлять его в файл README.
2. Если редактировать файл README.md напрямую, после вставки динамического контента получите множество конфликтов слияния.

Поэтому в корневой папке моего репозитория я создал новый файл — README.template.md. Этот файл я буду редактировать вручную.

Картинка-баннер

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

Я открыл Illustrator и создал себе баннер в своем личном стиле (1500×500).

В репозитории я создал новую директорию на уровне корневой и назвал ее assets. Сюда я поместил только что созданный файл с баннером и использовал его в файле README.template.md.

[![Braydon's GitHub Banner](./assets/GitHubHeader.png)](https://braydoncoyer.dev)

Бейджи соцсетей

Одна из функций моего README в GitHub-профиле — направлять посетителей на мои страницы в социальных сетях (Twitter, LinkedIn и CodePen).

Поэтому я поместил бейджи соцсетей вверху профиля, чтобы посетители обращали на них внимание в первую очередь.

Для создания этих бейджей я воспользовался shields.io, отредактировав текст, цвет и URL назначения.

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

Чтобы создать собственный бейдж такого рода, скопируйте разметку «Visits Badge», приведенную ниже, и поменяйте в URL адрес репозитория (все после «/visits/»).

[![Visits Badge](https://badges.pufler.dev/visits/braydoncoyer/braydoncoyer)](https:braydoncoyer.dev)
[![Twitter Badge](https://img.shields.io/badge/Twitter-Profile-informational?style=flat&logo=twitter&logoColor=white&color=1CA2F1)](https://twitter.com/BraydonCoyer)
[![LinkedIn Badge](https://img.shields.io/badge/LinkedIn-Profile-informational?style=flat&logo=linkedin&logoColor=white&color=0D76A8)](https://www.linkedin.com/in/braydon-coyer/)
[![CodePen Badge](https://img.shields.io/badge/CodePen-Profile-informational?style=flat

Вводный раздел

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

Для вступления я написал лишь маленькую аннотацию. Если люди захотят узнать обо мне больше, они смогут найти нужные сведения на моем сайте-портфолио или в профиле LinkedIn. Не совершайте ошибку и не перегружайте посетителей большим объемом информации.

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

Последние посты из моего блога

В соответствии с моим планом, дальше посетители должны увидеть мои последние посты. Этот раздел должен быть динамичным и регулярно обновляться. Вся самая тяжелая работа в конечном счете будет делегирована в отдельный файл, запускаемый GitHub Action. Но чтобы этот файл знал, куда вставлять контент, нужен определенный паттерн в шаблоне.

Пока я поместил следующие строки в разделе постов из блога:

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

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

Чтобы вставить ленту блога в файл README.md, я пользовался руководством из статьи «How to Add Your Recently Published Articles to Your GitHub Profile README using GitHub Actions».

Закрепленные репозитории и GitHub-статистика

Мне хотелось привлечь внимание не только к постам в блоге, но и к нескольким другим репозиториям. Кроме того, я хотел вывести статистику. Для этого я использовал GitHub ReadMe Stats (автор — Anurag Hazra). Контент, который вы получаете из его API, можно обернуть тегом <img> и стилизовать по вкусу. Я очень советую обратить внимание на этот проект. Документация там простая.

<!-- Pinned Repositories -- >

<a href="https://github.com/braydoncoyer/tailwindcss-v2-dark-mode-template">
  <img align="center" style="margin:1rem 0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=tailwindcss-v2-dark-mode-template&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<br>

<a href="https://github.com/braydoncoyer/ng-limeade">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=ng-limeade&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<a href="https://github.com/braydoncoyer/officeapi">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=officeapi&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<!-- GitHub Stats -- >

<a href="https://github.com/braydoncoyer">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/top-langs/?username=braydoncoyer&hide=html,css&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<a href="https://github.com/braydoncoyer">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api?username=braydoncoyer&show_icons=true&line_height=27&count_private=true&title_color=ffffff&text_color=c9cacc&icon_color=4AB097&bg_color=1A2B34" alt="Braydon's GitHub Stats" />
</a>

Навыки

Идем дальше. Мне нужен был способ рассказать посетителям о своих навыках full-stack веб-разработчика. Я не хотел просто перечислять их в маркированном списке: это заняло бы много места, к тому же список сложно сделать стильным.

Вместо этого я создал бейджи при помощи shield.io и отобразил их в ряд. Я использовал тот же цвет фона, что и для баннера, чтобы придерживаться постоянства в дизайне.

Поскольку я хотел перечислить много навыков, я решил основные отображать по умолчанию, а дополнительные выводить опционально, при помощи тега <details>.

[](https://img.shields.io/badge/Code-Angular-informational?style=flat&logo=angular&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Code-Ionic-informational?style=flat&logo=ionic&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Code-React-informational?style=flat&logo=react&logoColor=white&color=4AB197)
...

<details>
<summary>More Skills</summary>

[](https://img.shields.io/badge/Style-CSS-informational?style=flat&logo=css3&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Style-Tailwind-informational?style=flat&logo=Tailwind-CSS&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Style-Sass-informational?style=flat&logo=Sass&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Style-Stylus-informational?style=flat&logo=Stylus&logoColor=white&color=4AB197)
...
</details>

Чтобы увидеть весь список бейджей, которые я использовал в файле README.template.md, кликните сюда.

Цитата из сериала «Офис»

Я хотел бы, чтобы перед уходом с моей страницы посетители увидели нечто уникальное, несущее мой персональный отпечаток. Поэтому GitHub Action будет, помимо вывода постов из блога, запускать еще один скрипт. Этот скрипт будет искать паттерн в README.template.md и вставлять случайно выбранную цитату.

В раздел Office quote я поместил следующий паттерн:

<p>{office_quote}</p>

<p>{office_character}</p>

Check back at the top of the hour for a new quote!

На этом работа со статическим контентом была завершена. Я достиг всех целей, которые ставил для своего профиля.

Заключение

В следующей статье я расскажу, как создал рабочий поток GitHub Action и добавил динамический контент в мой файл README.md.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть множество бесплатных ресурсов, на которых вы можете взять 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".

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

Далее мы добавим значки для ссылок на социальные сети, при клике на которые будет открываться нужный сайт. Вы можете добавить значки для самых разных сайтов: 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 в адресную строку браузера и перейти по нему, увидим следующее:

Обратите внимание, что пока на значке у нас только текст. Чтобы добавить логотип, нам нужно добавить в адрес еще 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
    

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

По аналогии создадим 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>

    

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

Далее в этом же разделе мы добавим счетчик просмотров профиля. Он будет подсчитывать количество просмотров вашей страницы на 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=""/>
    

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

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

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

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

    

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

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

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

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

Как вы уже, наверное, поняли, мы добавим 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>

    

Результат:

Далее, добавим контент в раздел «О себе». Для оформления текста воспользуемся синтаксисом 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.

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

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

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

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

        
---

### :hammer_and_wrench: Languages and Tools :

    

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

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

Скопированный 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>

    

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

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

Для заголовка добавьте следующий код в 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.

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

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

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

Следующий проект, который мы будет использовать для статистики – это 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)
    

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

Добавление блогов в наш README.md на 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.

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

• Добавьте следующий код в раздел 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. Рабочий поток начнет выполняться.
  

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

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

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

***

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

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

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

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

Летом 2020 года GitHub позволила пользователям создавать персональные README-файлы и с их помощью кастомизировать свои профили. Сама платформа при создании подобного файла предлагает уже готовый шаблон, в который можно вписать свои данные. Но о какой кастомизации может идти речь, если у всех будут одинаково оформленные профили? За почти два года сообщество придумало множество различных способов выделиться и особенно оформить свою страницу на GitHub.

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

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

Для редактирования файла понадобятся знание Markdown-разметки и базовое понимание HTML. Оба навыка не сложны в освоении и интуитивно понятны в том объеме, который необходим для кастомизации профиля. На самом деле можно ограничиться только Markdown, но его особенность в том, что текст автоматически выравнивается по левому краю и нет никакой возможности повлиять на это. А HTML в тандеме с Markdown позволяет контролировать расположение объектов на экране. Для создания интерактивных блоков понадобится понимание того, как устроен сервис GitHub Actions, но нужны тоже только лишь базовые знания. Глубокие понадобятся только в том случае, если захочется создать собственный динамический виджет.

Заголовок

Как уже и говорилось ранее, заголовки можно писать как с помощью Markdown, так и с помощью 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>

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

# Hi there, I'm [Daniil](https://daniilshat.ru/) ![](https://github.com/blackcater/blackcater/raw/main/images/Hi.gif) 
### Computer science student, IT news writer from Russia ????????

Некоторые умельцы вовсе отказываются от текстовых заголовков и используют баннеры в их качестве. Баннер можно сделать самостоятельно в любом удобном редакторе изображений или использовать конструкторы, например, REHeader.

Картинку можно вставить как с помощью Markdown, так и с помощью HTML. Опять же, последний вариант позволяет контролировать расположение изображения и его размер:

![Описание](ссылка)

<img src="путь к файлу" alt="альтернативный текст">

Можно использовать необычные шрифты. К сожалению, нет возможности подключить CSS-стили и полноценно кастомизировать внешний вид текста, но можно найти подходящий шрифт, набрать необходимый текст и вставить в README.md. Для этих целей подойдут сервисы, излюбленные пользователями Twitter и Instagram. Все шрифты из подобных конвертеров включены в таблицу символов Unicode и корректно отображаются на всех современных платформах.

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

<!---Пример кода-->
[![Typing SVG](https://readme-typing-svg.herokuapp.com?color=%2336BCF7&lines=Computer+science+student)](https://git.io/typing-svg)

О себе

После заголовка принято рассказывать о себе, представлять свои навыки, возможности и давать ссылки для обратной связи. Это, конечно же, необязательное условие, можно расположить блоки в любой последовательности, но в этой части статьи рассмотрим именно те инструменты, которые помогут организовать блок «О себе».

• Simple Icons — огромная коллекция иконок популярных брендов, компаний, технологий и сервисов в svg-формате. У проекта есть сайт, на котором можно найти удобную иконку и скачать себе, а потом использовать в своем md-файле. Вставлять изображения лучше с помощью HTML — так удобнее задавать необходимый размер.

• Markdown Badges — библиотека бейджей с готовыми фрагментами md-кодов для вставки. Коллекция обширная, можно найти необходимые языки программирования, технологии и оформить блок, к примеру, навыков.

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

Статистика

В README-файл профиля можно добавлять различные виджеты со статистическими данными о себе и свой деятельности на GitHub. Данные автоматически обновляются с некоторой периодичностью и в профиле всегда отображается актуальная информация:

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

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

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

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

• Top Languages Card — виджет, выводящий статистику по часто используемым языкам в репозиториях пользователя. Можно выводить информацию как по всем репозиториям в профиле, так и только по избранным. Есть возможность удалить некоторые языки и никогда не показывать их в поле активности. Также можно выбрать компактный и более подробный вид карточки. Есть поддержка разных цветовых схем. При вставке кода необходимо заменить параметр username= на свой никнейм.

<!---Для компактной версии-->
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

<!---Для подробной версии-->
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

• 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)

• GitHub Extra Pins — и уже третья карточка все от того же самого разработчика. GitHub позволяет закреплять на странице профиля не более 6 репозиториев, но если этого мало, то можно добавить их в 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)

• Codewars — баннер со статистикой сервиса с задачами для программистов. Виджет показывает количество решенных задач и актуальный уровень пользователя на платформе. Ссылки на карточки можно найти в своем профиле, нажав на кнопку «View Profile Badges» под аватаркой. Цветовые схемы нельзя выбрать и нет широкой возможности кастомизации, но доступны три размера — большой, маленький и крошечный. Если сложно найти, то можно скопировать код для карточки необходимого размера, заменить оба поля username на актуальный никнейм на платформе Codewars и вставить в свой md-файл.

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

Маленький (small):  
[![codewars](https://www.codewars.com/users/username/badges/small)](https://www.codewars.com/users/username) 

Крошечный (micro):  
[![codewars](https://www.codewars.com/users/username/badges/micro)](https://www.codewars.com/users/username) 

• LeetCode Readme Stats — виджет будет полезен любителям порешать задачки на сервисе LeetCode. Карточка выводит данные о количестве решенных задач с распределением по уровню сложности. Есть две темы — светлая и темная. Также у автора имеется инструкция по настройке отслеживания статистики с помощью 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)

• GitHub Profile Views Counter — небольшой бейдж, выводящий информацию о количестве посетителей профиля. В поиске GitHub можно найти несколько репозиториев с реализацией виджета, но устроены они приблизительно одинаково, поэтому рассмотрим на примере самого популярного. Бейдж можно персонализировать, выбрав цвет из готовых или указать необходимый в шестнадцатеричной системе, на выбор есть три разных дизайна и возможность изменить исходный текст бейджа. Для вставки надо заменить поле your-github-username на соответствующее своему никнейму.

![](https://komarev.com/ghpvc/?username=your-github-username)

• 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)

• GitHub Readme StackOverflow — виджет позволяет делиться статистикой вклада в сообщество StackOverflow. На выбор есть две темы и два размера карточки. Для вставки в свой README профиля надо скопировать код, заменить параметр userID= на свой. С помощью параметра theme= можно выбрать нужную тему — ligh и dark, а с помощью layout= размер — default и compact. Своего профиля на StackOverflow у меня нет, поэтому продемонстрирую все на примере аккаунта автора виджета.

Светлая большая:  
[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042)](https://stackoverflow.com/users/6558042/omid-nikrah) 

Темная большая:   
[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042&theme=dark)](https://stackoverflow.com/users/6558042/omid-nikrah)  

Светлая маленькая:   
[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042&layout=compact)](https://stackoverflow.com/users/6558042/omid-nikrah)

Темная маленькая:   
[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042&layout=compact&theme=dark)](https://stackoverflow.com/users/6558042/omid-nikrah)

• GitHub Profile Summary Cards — еще одна библиотека карточек, выводит основную информацию по популярным языкам, график активности и общие сведения об аккаунте. Встраивать можно как с помощью Markdown, так и с помощью GitHub Actions. Для выбора доступно ровно десять цветовых схем. В репозитории есть инструкция, но также имеется и веб-приложение для генерации необходимых ссылок. Код для вставки (username= меняем на свой ник, а theme= на название темы из списка):

Карточка профиля: 
![](https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=daniilshat&theme=solarized_dark)

Статистика языков в коммитах:
![](https://github-profile-summary-cards.vercel.app/api/cards/most-commit-language?username=daniilshat&theme=solarized_dark)

Статистика языков в репозиториях:
![](https://github-profile-summary-cards.vercel.app/api/cards/repos-per-language?username=daniilshat&theme=solarized_dark)

Статистика профиля:
![](https://github-profile-summary-cards.vercel.app/api/cards/stats?username=daniilshat&theme=solarized_dark)

Данные по коммитам за сутки:
![](https://github-profile-summary-cards.vercel.app/api/cards/productive-time?username=daniilshat&theme=solarized_dark)

GitHub Actions

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

• Waka Readme Stats — позволяет динамически выводить статистику из сервиса Wakatime в свой профиль GitHub. Можно выбрать, какую именно информацию надо выводить. Это может быть статистика по языкам программирования использованным за неделю, количество коммитов в разное время суток, статистика по часто используемым средам разработки и операционным системам. Сам сервис Wakatime собирает эти данные с помощью плагинов, которые доступны для большого количества популярных IDE, браузеров и редакторов кода. Он анализирует информацию и формирует из нее детальный дашборд в личном кабинете пользователя, а с помощью скрипта можно выводить избранные данные в профиль и настраивать периодичность обновления информации. У автора репозитория есть подробная инструкция по настройке GitHub Actions для взаимодействия с Wakatime.

• Blog post workflow — репозиторий рассказывает, как настроить вывод последних постов из блогов или социальных сообществ в md-файл. У автора репозитория есть подробные инструкции по интеграции с Dev.to, Medium, Stackoverflow, Reddit, YouTube и другими популярными платформами. Но можно воспользоваться RSS-ссылкой и выводить последние посты из собственного блога. В этой статье рассмотрим инструкцию о том, как выводить посты с Хабра в свой профиль GitHub. Во-первых, у нас уже должен быть создан md-файл профиля. Во-вторых, надо открыть этот файл и в необходимом месте вставить следующую конструкцию:

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

Затем в корне репозитория надо создать папку .github в ней папку workflows, а в ней файл blog-post-workflow.yml. Полный путь должен выглядеть следующим образом: username/.github/workflows/blog-post-workflow.yml.

Теперь переходим в созданный yml-файл и вставляем следующее, заменяя ссылку в поле feed-list: на вашу RSS-ссылку (можно скопировать в профиле Хабра в разделе «Публикации»):

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 * * * *' # Runs every hour, on the hour
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Pull in dev.to posts
        uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://habr.com/ru/rss/users/daniilshat/posts/?fl=ru"

Теперь только остается запись изменения и запустить действие. Для этого переходим во вкладку «Actions» в репозитории, с левого края в поле «All workflows» выбираем само действие и нажимаем «Run workflow». Ждем. Если все пройдет успешно, то увидим оповещение, если что-то пойдет не так, то все равно увидим, но уже ошибку. Если все прошло хорошо, то можно обновить страницу профиля и увидеть пять последних постов с Хабра. Часто возникают задержки, и содержимое блока при первом запуске появляется не сразу. В этом случае можно подождать несколько минут, и данные обязательно обновятся.

В yml-файле можно менять поля и их содержимое, кастомизируя выдачу. Если надо выводить последние посты сразу с нескольких сайтов, то можно указать ссылки через запятую.

• Metrics — обширная библиотека с динамической инфографикой. Репозиторий включает в себя более 30 различных плагинов с более чем 200 параметрами для настройки. Можно выводить статистику коммитов, популярные языки, последние обновления, статистику вкладов в сообщество по дням и многое другое. В репозитории есть подробные инструкции для подключения. Библиотека настолько большая, что бессмысленно описывать в этой статье способы интеграции (там на самом деле много всего).

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

• Todoist Stats — интеграция с сервисом отслеживания задач Todoist. Выводит в профиль основную статистику о работе над задачами. Для подключения необходим API-токен из приложения. Само подключение осуществляется через GitHub Actions. Можно сделать все руками, а можно подключить уже готовое решение через маркетплейс GitHub.

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

Забавы ради

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

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

Markdown:

![Jokes Card](https://readme-jokes.vercel.app/api)

HTML:

<img src="https://readme-jokes.vercel.app/api" alt="Jokes Card" />

• Github Readme Quotes — динамически выводит блок с цитатами. Размер ограничен двумя вариантами — вертикальный и горизонтальный, а цветовых схем четыре. В будущем автор проекта планирует расширить параметры кастомизации. Встроить в свой профиль можно с помощью следующего md-кода:

[![Readme Quotes](https://quotes-github-readme.vercel.app/api?type=horizontal&theme=dark)](https://github.com/piyushsuthar/github-readme-quotes)

А если совсем нет времени?

На самом деле необязательно полностью с нуля писать свой md-файл. В Сети есть достаточное количество генераторов, в которые можно ввести информацию о себе, поставить галочки около необходимых интеграций и получить на выходе готовый код. Такой файл можно так и оставить, а можно взять за основу и дополнить своими идеями.

• Github Readme Generator by @arturssmirnovs — проект позволят сгенерировать шаблон README-профиля, добавить хедер, информацию о себе, блок социальных сетей и интегрировать метрики. Приложение доступно онлайн по ссылке.

• Github Readme Generator by @rahuldkjain — еще один генератор с чуть более широким выбором функций. Кроме основного набора, позволяет выбрать языки программирования, технологии, добавить кнопки для донатов через Ko-Fi и buymeacoffe и посмотреть превью сгенерированного файла.

• Awesome GitHub Profile README — репозиторий-библиотека «потрясающих» README-файлов, собранных в одном месте. Можно использовать ее в качестве источника вдохновения или же форкать интересующие проекты, если автор разрешает. Все README разбиты по тематическим категориям, что упрощает поиск.

Что дальше?

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

Based on AlecRust’s idea, I did an implementation of the PNG text service.

The demo is here:

http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World

There are four parameters:

• text: the string to display
• font: not used, because I only have Arial.ttf anyway on this demo.
• fontSize: an integer (defaults to 12)
• color: a six-character hexadecimal code

Please do not use this service directly (except for testing), but use the class I created that provides the service:

https://github.com/lingtalfi/WebBox/blob/master/Image/PngTextUtil.php

class PngTextUtil
{
    /**
     * Displays a PNG text.
     *
     * Note: this method is meant to be used as a web service.
     *
     * Options:
     * ------------
     * - font: string = arial/Arial.ttf
     *          The font to use.
     *          If the path starts with a slash, it's an absolute path to the font file.
     *          Else if the path doesn't start with a slash, it's a relative path to the font directory provided
     *          by this class (the WebBox/assets/fonts directory in this repository).
     * - fontSize: int = 12
     *          The font size.
     * - color: string = 000000
     *          The color of the text in hexadecimal format (6 characters).
     *          This can optionally be prefixed with a pound symbol (#).
     *
     *
     *
     *
     *
     *
     * @param string $text
     * @param array $options
     * @throws BatExceptionBatException
     * @throws WebBoxException
     */
    public static function displayPngText(string $text, array $options = []): void
    {
        if (false === extension_loaded("gd")) {
            throw new WebBoxException("The gd extension is not loaded!");
        }
        header("Content-type: image/png");
        $font = $options['font'] ?? "arial/Arial.ttf";
        $fontsize = $options['fontSize'] ?? 12;
        $hexColor = $options['color'] ?? "000000";
        if ('/' !== substr($font, 0, 1)) {
            $fontDir = __DIR__ . "/../assets/fonts";
            $font = $fontDir . "/" . $font;
        }
        $rgbColors = ConvertTool::convertHexColorToRgb($hexColor);

        //--------------------------------------------
        // GET THE TEXT BOX DIMENSIONS
        //--------------------------------------------
        $charWidth = $fontsize;
        $charFactor = 1;
        $textLen = mb_strlen($text);
        $imageWidth = $textLen * $charWidth * $charFactor;
        $imageHeight = $fontsize;
        $logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
        imagealphablending($logoimg, false);
        imagesavealpha($logoimg, true);
        $col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
        imagefill($logoimg, 0, 0, $col);
        $white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); // For font color
        $x = 0;
        $y = $fontsize;
        $angle = 0;
        $bbox = imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); // Fill text in your image
        $boxWidth = $bbox[4] - $bbox[0];
        $boxHeight = $bbox[7] - $bbox[1];
        imagedestroy($logoimg);

        //--------------------------------------------
        // CREATE THE PNG
        //--------------------------------------------
        $imageWidth = abs($boxWidth);
        $imageHeight = abs($boxHeight);
        $logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
        imagealphablending($logoimg, false);
        imagesavealpha($logoimg, true);
        $col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
        imagefill($logoimg, 0, 0, $col);
        $white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); // For font color
        $x = 0;
        $y = $fontsize;
        $angle = 0;
        imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); // Fill text in your image
        imagepng($logoimg); // Save your image at new location $target
        imagedestroy($logoimg);
    }
}

Note: if you don’t use the Universe framework, you will need to replace this line:

$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);

With this code:

$rgbColors = sscanf($hexColor, "%02x%02x%02x");

In which case your hex color must be exactly six characters long (don’t put the hash symbol (#) in front of it).

Note: in the end, I did not use this service, because I found that the font was ugly and worse: it was not possible to select the text. But for the sake of this discussion I thought this code was worth sharing…