Создание сайтов в Лутугино, ЛНР. Как создать впечатляющий профиль GitHub README

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

Мы рассмотрим следующее:

что такое профиль GitHub README

как создать профиль GitHub README

добавление социальных значков, навыков и описаний о себе

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

создание рабочего процесса GitHub для извлечения последних опубликованных блогов

Чтобы следовать этому руководству, вам необходимо иметь базовые знания HTML и Markdown. Если вы хотите познакомиться с Markdown, ознакомьтесь с этим введением в Markdown. Кроме того, у вас должна быть учетная запись GitHub. Если у вас его еще нет, зарегистрируйтесь на GitHub.

Код для этого руководства доступен на GitHub.

Что такое README профиля GitHub

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

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

GitHub профиль readme гифка

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

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

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

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

Войдите в GitHub.

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

GitHub Создать репозиторий

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

Поле ввода имени репозитория

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

Установите флажок Добавить файл README. Это добавит README.mdфайл, в который мы добавим содержимое профиля. Значения полей должны выглядеть примерно так, как показано на рисунке ниже.

Создание полей формы репозитория

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

Создан специальный репозиторий

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

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

Добавление GIF-файлов и значков в ваш профиль GitHub README

Вот изображение контента, который будет добавлен в этот раздел:

Раздел заголовка

GIF, использованный в этом разделе, можно найти здесь. Я нашел этот GIF на Giphy, где полно бесплатных GIF-файлов.

Перейдите к ссылке GIF и нажмите кнопку «Поделиться «, а затем «Копировать ссылку GIF». Мы добавим эту скопированную ссылку в imgтег HTML, чтобы отобразить ее в файле Markdown. Мы используем imgтег, так как он поможет нам указать ширину изображения.

Атрибут srcуказывает на URL-адрес, который мы скопировали на предыдущем шаге. Поскольку все содержимое этого раздела выровнено по центру, мы поместили изображение в HTML div-тег с align="center"атрибутом.

Примечание. GitHub преобразует разметку README в HTML и отображает ее на GitHub. После преобразования HTML очищается и из соображений безопасности игнорирует определенные HTML-теги и атрибуты, такие как

Мы заключили изображения в

теги, чтобы все значки располагались на одной строке. Приведенный выше код будет отображать только изображение, сгенерированное из URL-адреса. Чтобы добавить гиперссылки для каждого из значков, мы добавим каждое изображение тегом.

Добавьте приведенный ниже код внутри

тега с тегом id="header"GIF и после него . Обязательно измените hrefатрибут, чтобы он указывал на ваши социальные профили:

На фото ниже результат, который мы получаем.

Предварительный просмотр значков

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

https: //komarev.com/ghpvc/? username=your-github-username

Добавьте приведенный ниже код после

тега с расширением id="badges". Не забудьте заменить your-github-usernameна свое имя пользователя:

На фото ниже результат, который мы получаем.

Предварительный просмотр счетчика профиля

Последней частью этого раздела является текст с волной (: wave:) GIF. Гифка взята с сайта Giphy и находится здесь.

Добавьте приведенный ниже код после тега счетчика просмотров профиля:

hey there

Результат показан ниже.

Привет, предварительный просмотр текста

Сохраните изменения, нажав кнопку «Принять изменения «. На этом первый раздел README профиля GitHub завершен. Давайте перейдем к добавлению большего количества содержимого в наш README.mdфайл.

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

Вот что мы добавим на нашу страницу профиля в этом разделе:

Раздел обо мне

В этом разделе мы добавим GIF и несколько слов, описывающих подробности о нас самих. Вы можете найти GIF здесь.

Чтобы добавить GIF, мы будем использовать тег, укажем высоту и ширину и поместим его внутрь,

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

Результат этого показан ниже.

Предварительный просмотр GIF-баннера

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

---

###: woman_technologist: About Me:

---заключается в добавлении горизонтальной линейки перед новым разделом. Горизонтальная линейка в Markdown должна быть окружена пустыми строками.: woman_technologist: это шорткод для используемого смайлика. Для мужской версии вы можете использовать: man_technologist:. Для других вы можете использовать: technologist:. Вы можете найти список эмодзи и соответствующие шорткоды в репозитории GitHub.

Далее мы добавим личное введение в одну строку и используем: wave: GIF-файл с волной (). Добавьте приведенный ниже код к README.md:

I am a Full Stack Developer from India.

Далее идет список пунктов о себе. Чтобы отобразить список, мы будем использовать -синтаксис Markdown. Мы также поставим перед каждой строкой смайлик. Добавьте следующий код README.mdи внесите изменения в соответствии с вашим профилем. Кроме того, измените your-linkedin-urlURL-адрес своего профиля:

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

Обратите внимание, что внутренний![] () синтаксис последней строки заключается в отображении изображения значка LinkedIn. Внешний [] () — это синтаксис гиперссылки Markdown, чтобы значок указывал на URL-адрес профиля LinkedIn. Здесь мы использовали Shields.io для отображения персонализированного значка LinkedIn. Вы также можете добавить любые другие ссылки, по которым люди могут связаться с вами.

Смотрите результат на картинке ниже.

Предварительный просмотр описания о себе

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

Вот изображение контента, который мы добавим в этот раздел.

Раздел языков и инструментов

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

---

###: hammer_and_wrench: Languages and Tools:

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

Перейдите в папку значков, найдите и откройте reactпапку. Вы найдете изображения в формате SVG и EPS. Щелкните любое изображение и скопируйте URL-адрес, указанный в адресной строке браузера.

DevIcons реагируют на логотип

Мы будем использовать этот URL-адрес в теге и соответствующим образом укажем атрибут heightand. widthТочно так же вы можете искать другие навыки и добавлять их в отдельные теги.

Добавьте приведенный ниже код в README.md. Добавьте/удалите необходимые навыки, которые вы хотите в своем профиле:

Результаты изображены ниже.

Предварительный просмотр языков и инструментов

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

Вот изображение того, что мы добавим в этот раздел.

Раздел статистики GitHub

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

---

###: fire: My Stats:

Мы добавим в этот раздел некоторые статистические данные об активности пользователя на GitHub, такие как количество коммитов, количество PR и т. д. На GitHub есть много проектов с открытым исходным кодом, которые предлагают различную статистику для профиля GitHub. В этом руководстве мы увидим, как использовать два таких проекта с открытым исходным кодом.

Первым проектом с открытым исходным кодом, который предлагает статистику GitHub, является GitHub Streak Stats. Этот проект предоставляет следующие три статистики:

общее количество вкладов пользователя

самая длинная полоса вкладов для пользователя

текущая статистика серии для пользователя

Получите доступ к статистике, используя следующий URL-адрес:

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

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

[![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 для создания URL-адреса. Для этого выполните следующие действия:

Перейдите на веб- сайт статистики серии. В поле Имя пользователя введите свое имя пользователя GitHub. При необходимости измените другие поля.

После того, как вы настроили все поля, нажмите кнопку «Отправить «.

После создания уценки нажмите кнопку «Копировать в буфер обмена «и добавьте скопированную уценку в файл README.md.

Инструмент статистики серии

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

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

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

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

На фото ниже представлен превью для моей itsZed0учетной записи.

Предварительный просмотр статистики GitHub

Добавление недавних блогов в ваш профиль GitHub README

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

Сообщения в блоге

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

---

###: writing_hand: Blog Posts:

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

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

Checkout: используется для извлечения всех файлов из текущего репозитория в рабочую область Git, где наш рабочий процесс может получить к ним доступ.

Рабочий процесс публикации в блоге: используется для получения последних сообщений в блогах, опубликованных пользователем на различных веб-сайтах.

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

Чтобы настроить рабочий процесс GitHub, выполните следующие действия:

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

Сохраните изменения, нажав кнопку «Принять изменения «.

Конфигурация рабочего процесса GitHub определяется в.ymlфайле, который следует синтаксису YAML. В вашем репозитории в раскрывающемся списке «Добавить файл «выберите «Создать новый файл «.

Создать новый файл в GitHub

В поле Имя файла...github/workflows/blog-post-workflow.yml введите. Все файлы конфигурации рабочего процесса GitHub.ymlнаходятся в.github/workflowsкаталоге.

Создать yml-файл поста в блоге

Добавьте следующий код на вкладку «Редактировать новый файл «:

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</untypoX

with:

max_post_count: «4»

feed_list: «https: //dev.to/feed/itszed0»

В приведенном выше коде мы определили рабочий процесс nameкак «последний рабочий процесс публикации в блоге», который запускает onуказанное scheduleв cronполе. 0 * * * *- это синтаксис cron POSIX, означающий, что расписание должно запускаться в 0-ю минуту каждый час.

workflow_dispatch: позволяет пользователю запускать рабочий процесс вручную. jobsдавайте определим одно или несколько заданий, которые будут выполняться при выполнении рабочего процесса. В нашем случае у нас есть одно задание, то есть компьютер update-readme-with-blogсредыruns-onUbuntu, размещенный на GitHub.

stepsопределить набор действий или команд, которые должны быть выполнены. Мы определили два действия в разделе steps: actions/checkout@v2и gautamkrishnar/blog-post-workflow@master. Последний принимает два входных параметра, определенных в withполе. max_post_countопределяет максимальное количество сообщений, отображаемых в README, feed_listпредставляет собой RSS-канал с разделителями-запятымиURL-адресов для различных платформ ведения блогов.

В этом руководстве мы выбрали блоги с платформы dev.to. Список всех поддерживаемых платформ см. в этой документации.

Чтобы узнать больше о синтаксисе рабочего процесса GitHub, ознакомьтесь с этой документацией по синтаксису рабочего процесса.

Замените на feed_listURL-адреса вашего RSS-канала и нажмите кнопку «Сохранить новый файл «. Это позволит успешно создать рабочий процесс. Он будет получать новые сообщения в блоге с dev.to и добавлять их в ваш README.mdфайл каждый час.

Чтобы запустить рабочий процесс вручную, выполните следующие действия.

В своем репозитории перейдите на вкладку Действия.

В разделе «Все рабочие процессы «щелкните «Последний рабочий процесс публикации в блоге».

В раскрывающемся списке «Выполнить рабочий процесс «нажмите кнопку «Выполнить рабочий процесс». Рабочий процесс начнет выполняться.

Запуск рабочего процесса публикации в блоге

Перейдите на страницу своего профиля GitHub и в разделе «Сообщения в блогах» вы увидите список всех сообщений в блогах с платформ для ведения блогов, определенных в blog-post-workflow.ymlфайле. Ниже приведен вывод для «https: //dev.to/feed/itszed0»файла feed_list.

Сообщения в блоге

Обратите внимание, что у пользователя itsZed0есть одна статья под названием «Тестовый пост» на dev.to, которую можно найти здесь. Следовательно, рабочий процесс извлекает эту статью и отображает ее в README профиля GitHub.