Boshqalar

Ijobiy taassurot qoldiradigan Github README profilni qanday yaratish mumkin?

Ijobiy taassurot qoldiradigan Github README profilni qanday yaratish mumkin?

Agar GitHub profilimga kirib koʻrsangiz, unda suratlar, ijtimoiy tarmoqlarga havolalar, biroz GitHub statistikasi va bloglarimga havolalar borligini koʻrasiz. Bular GitHub profilini alohida ajratib koʻrsatadi. Ularni esa GitHub profildagi README funksiyasi orqali amalga oshirish mumkin. Bu maqolada GitHub README profilni qanday yaratish mumkinligini bilib olamiz.

Maqolada quyidagilar qamrab olinadi:

  • GitHub README profil nima?

  • GitHub README profilni qanday yaratish mumkin?

  • Oʻzi haqida ijtimoiy belgilar, koʻnikma va tavsiflar qoʻshish

  • GitHub statistikasini qoʻshish

  • Oxirgi eʼlon qilingan bloglarni koʻrsatish uchun GitHub ish jarayonini yaratish

Qoʻllanmaga amal qilish uchun HTML va Markdown haqida boshlangʻich tushunchaga ega boʻlish zarur. Agar Markdownʼni yaxshiroq bilmoqchi boʻlsangiz, mana bu Markdown qoʻllanma bilan tanishib chiqing. Bundan tashqari, sizda GitHub akkaunt ham boʻlishi kerak. Agar bunday akkauntingiz boʻlmasa, GitHubʼda roʻyxatdan oʻting.

Bu qoʻllanma kodini GitHubʼdan topishingiz mumkin.

GitHub README profil oʻzi nima?

GitHub README profil bu – GitHub foydalanuvchilariga oʻzi haqida koʻnikmalar, qiziqishlar, GitHub statistikasi kabi batafsil maʼlumotlarni README nomli Markdown faylidan foydalanish va uni GitHub jamiyatiga eʼlon qilish imkonini beradigan funksiya. U GitHub bosh sahifasining yuqori qismida, qadalgan repozitoriylar tepasida koʻrinadi. Bu koʻnikmalaringiz va GitHub statistikangizni namoyish qilishning noodatiy usuli sanaladi.

Quyidagi suratda bugungi maqolada yaratiladigan GitHub profilimizning yakuniy koʻrinishi aks ettirilgan.

Biz uni bir nechta boʻlimlarga boʻlamiz va har bir boʻlimni navbat bilan toʻldirib boramiz. Fon rangi GitHub foydalanuvchisining mavzu sozlamalariga koʻra oʻzgarib turadi.

Keyingi boʻlimda biz README faylini yaratish boʻyicha bosqichlarni koʻrib chiqamiz.

GitHub README profilni yaratish

README fayli GitHub akkauntingiz foydalanuvchi nomi bilan bir xil nomlangan GitHub repozitoriyda boʻladi. Repozitoriyni yaratish uchun quyidagi amallarni bajaring:

  • GitHubʼga kiring;

  • Sahifaning yuqori oʻng burchagidagi + tugmasini bosing va yangi repozitoriy (New repository) ni tanlang.

  • Yangi repozitoriy yaratish (Create new repository) sahifasi ochiladi. Repozitoriy nomi maydoniga GitHub profilingiz foydalanuvchi nomini yozing. Foydalanuvchi nomini yozganingizdan keyin siz GitHub maxsus repozitoriyni yaratmoqchi ekaningiz haqidagi xabarni koʻrasiz.

  • GitHub README profilni GitHub profilingizga kirganlarga koʻrinadigan qilish uchun repozitoriy turi boʻlimida ommaviy (Public) degan qatorni belgilang. Agar GitHub foydalanuvchilari hali tayyor boʻlmagan Github README profilingizni koʻrishini istamasangiz, unda shaxsiy (Private) degan qatorni belgilab qoʻying. README profilingizni tayyorlashni yakunlagach, uning koʻrinishini ommaviyga oʻzgartirsangiz boʻladi.

  • README faylni qoʻshishni belgilang. Bu README.md faylni profil tarkibini qoʻshadigan joyga biriktiradi. Maydondagi qiymatlar quyidagi rasmga oʻxshash boʻlishi kerak.

  • Repozitory yaratish (Create repository) tugmasini bosing. Maxsus repozitoriy muvaffaqiyatli yaratildi. Hozirgina yaratilgan repozitoriyga oʻtsangiz, repozitoriyga qoʻshilgan README.md faylni koʻrasiz.

Keyingi bir nechta boʻlimlarda README.md faylimizni toʻldirib boramiz. Oʻzgartirishlarni yozish va oldindan koʻrish uchun GitHub fayl muharriridan foydalanamiz. Siz oʻzingizga qulay istalgan matn muharriridan foydalansangiz boʻladi.

GitHub fayl muharririni ochish uchun README.mdʼni oching va sahifaning yuqori oʻng burchagidagi shu faylni tahrirlash (Edit this file) belgisi (qalamcha belgisi) ni bosing. GitHub fayllarni tahrirlash rasmiy qoʻllanmasida batafsil oʻqisangiz boʻladi.

GitHub profil READMEʼga GIF va belgilar qoʻshish

Quyida bu boʻlimda qoʻshiladigan kontentning surati berilgan:

Mazkur boʻlimda ishlatilgan GIF tasvirni bu yerdan topsangiz boʻladi. Men bu GIF tasvirni bepul GIF fayllar joylangan Giphy manbasidan topdim.

GIF havolasiga oʻtib, avval ulashish (Share), keyin GIF havolasini nusxalash (Copy GIF link) tugmasini bosing. Bu nusxalangan havola Markdown faylda koʻrinishi uchun HTMLimg tegiga joylaymiz. Tasvir kengligini koʻrsatib bera olishi uchun imgtegidan foydalanamiz.

GitHub fayl muharririda README.md fayli tarkibini quyidagi kod bilan oʻzgartiring:

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

Atribut src avvalgi qadamda nusxalab olgan URL manzilga ishora qilmoqda. Bu boʻlimdagi barcha kontent oʻrtaga taxlangani uchun tasvirni HTML divtegiga align=“center” atributi bilan joylashtirdik.

Izoh: GitHub README Markdownʼni HTMLʼga aylantiradi va uni GitHubʼda koʻrsatadi. Oʻzgartirilgandan keyin HTML tozalanadi va xavfsizlik nuqtayi nazaridan <script>, <style> kabi HTML teg va atributlarini rad etadi. Shu tufayli biz CSS oʻrniga alignatributidan foydalandik. 

Endi oldindan koʻrish boʻlimiga oʻtamiz. Quyidagi tasvirda biz erishgan natija koʻrsatilgan.

Keyingi navbatda ijtimoiy tarmoqlar belgilarini qoʻshamiz. Belgiga bosganingizda ijtimoiy tarmoqlarning mos saytiga yoʻnaltirilasiz. Siz Instagram, Facebook, Twitter kabi veb-saytlarning ijtimoiy belgilarini qoʻshishingiz mumkin. Ushbu qoʻllanmada biz uchta tarmoq: Twitter, YouTube va LinkedIn belgilarini qoʻshamiz.

Har bir ijtimoiy tarmoq uchun mos belgini olishda foydalanuvchilarga ijtimoiy tarmoqlar belgilarini yaratish va sozlash imkonini beradigan nuqtalarni taqdim etadigan Shields.io xizmatidan foydalanamiz. https://img.shields.io/badge/ URL manzilidan foydalanib, kerakli ijtimoiy belgilarni olish uchun qoʻshimcha parametrlarni ham qoʻllaymiz.

Biz yuboradigan birinchi parametr quyidagi formatda boʻladi:

Label-Color

Yorliq (Label) bu – belgida aks ettiriladigan ijtimoiy tarmoq saytining nomi.
Rang (Color) bu – belgining rangi.

Uch ijtimoiy tarmoq uchun bu parametr quyidagicha boʻladi:

LinkedIn: LinkedIn-koʻk
Twitter: Twitter-koʻk
YouTube: Youtube-qizil

https://img.shields.io/badge/ bilan birgalikda LinkedIn uchun quyidagi URL manzil yaratiladi:

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

Yuqoridagi URL manzilni brauzerga kiritganimizda quyidagi natijani olamiz:

Eʼtibor qiling, nishon uchun belgi hali qoʻshilmagan. Uni qoʻshish uchun quyidagi formatda ikki soʻrov parametridan foydalanamiz:

logo={your social network icon name}
logoColor={color of the icon}

Har ikki parametrni quyida koʻrsatilgandek URL manzilga qoʻshamiz:

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

Shuningdek, yuqorida koʻrsatilgan URL manzilga uslub parametrini qoʻshamiz. Turli uslub variantlari haqida batafsil maʼlumotni Shields.io manzilidan topishingiz mumkin. Biz for-the-badge uslubidan foydalanamiz.

LinkedIn uchun yakuniy URL manzil quyidagicha boʻladi:

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

Bu URL manzil bilan brauzerga oʻtganimizda quyidagi natijaga ega boʻlamiz.

Boshqa belgilar uchun ham xuddi shu uslubda URL manzillar yaratamiz:

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

Har bir URL manzilni imgtegi bilan quyidagicha qadoqlaymiz:

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

Biz hamma belgilar bir qatorda joylashishi uchun rasmlarni <div> tegiga qadoqladik. Yuqorida keltirilgan kod faqat URL manzil bilan yaratilgan tasvirni koʻrsatadi. Har bir belgiga giperhavola qoʻshish uchun har bir tasvirni <a> tegiga qadoqlaymiz.

Quyida keltirilgan kodni id=“header” bilan <div> tegi ichida va GIF <img> tegidan keyin keltiring. hrefatributini ijtimoiy tarmoqlardagi profillaringizga ishora qilishi uchun, albatta, oʻzgartiring:

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

Quyidagi suratda esa biz olgan natija koʻrsatilgan.

Bu boʻlimdagi keyingi narsa profilni koʻrish hisoblagichi boʻlib, u GitHub profilingizdagi tashriflar sonini hisoblaydi. Biz profilni koʻrishlar hisoblagichi belgisini taqdim etadigan ochiq manba kodli loyihadan foydalanamiz, uning hujjatlari GitHub Profile Views Counter saytida joylashgan. Bu loyihadan ham xuddi ijtimoiy tarmoqlar belgilari kabi foydalanamiz. Quyida xuddi shunday oxirgi nuqta keltirilgan. Shu URL manzilga biroz uslubiy parametrlarni qoʻshamiz:

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

id=“badges” li <div> tegidan keyin quyidagi kodni joylang. your-github-username oʻrniga, albatta, oʻz foydalanuvchi nomingizni kiritishni unutmang:

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

Quyidagi tasvirda esa biz olgan natija koʻrsatilgan.

"Boʻlimning eng soʻnggi qismida toʻlqinli matn (:wave:) GIF mavjud. GIF Giphyʼdan olingan va uni bu yerdan topish mumkin.

Quyidagi kodni esa profil koʻrishlari hisoblagichidan keyin <img> tegi ichiga kiriting:

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

Natija esa quyidagi suratda keltirilgan.

Oʻzgarishlarni mahkamlash (Commit changes) tugmasini bosib, saqlang. Shu bilan GitHub README profilning birinchi boʻlimi yakunlanadi. Endi README.md faylimizga qoʻshimcha kontent qoʻshishni davom ettiramiz.

Banner GIF va men haqimda boʻlimlarini qoʻshish

Bu boʻlimda profil sahifamizga quyidagi narsalarni qoʻshamiz:

Bu boʻlimda GIF va bizni taʼriflaydigan bir qancha soʻzlarni qoʻshamiz. GIFʼni bu yerdan topishingiz mumkin.

GIF qoʻshish uchun <img> tegidan foydalanamiz, balandlik va kenglikni koʻrsatib, GIFʼni oʻrtaga joylashtirish uchun align=“center”dan foydalanib, uni <div> tegiga qadoqlaymiz. README.md faylingizga quyidagi kodni kiriting:

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

Kelib chiqadigan natijani esa quyida koʻrishingiz mumkin.

Endi men haqimda boʻlimi uchun material kiritamiz. Tavsif matni uchun Markdown sintaksisidan foydalanamiz, chunki bizga hech qanday maxsus joylashtirish funksiyalari kerak boʻlmaydi. Quyida keltirilgan kodni README.md fayliga kiriting:

---

### :woman_technologist: About Me :

--- bu yangi boʻlimdan oldin gorizontal chiziq oʻtkazishdir. Markdownʼdagi gorizontal chiziq boʻsh qatorlar bilan oʻralgan boʻlishi kerak. :woman_technologist: foydalanilgan emoji uchun qisqa kod. Erkak dasturchi emojisi uchun :man_technologist: ishlatiladi. Boshqalari uchun :technologist: kodidan foydalanish mumkin. Emoji va ularning qisqa kodlarini GitHub repozitoriydan topishingiz mumkin. 

Soʻng bir qatorli tanishtiruvni qoʻshib, toʻlqin (:wave:) GIFʼdan foydalanamiz. Quyidagi kodni README.mdʼga qoʻshing.

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

Endi navbat oʻzingiz haqingizdagi punktlarga. Roʻyxatni shakllantirish uchun - Markdown sintaksisidan foydalanamiz. Shuningdek, har bir qatorni emoji bilan boshlaymiz. Quyidagi kodni README.mdʼga kiriting va oʻz profilingiz maʼlumotlari bilan oʻzgartiring. Shuningdek, your-linkedin-url yozuvini oʻz profilingiz URL manziliga oʻzgartiring.

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

Diqqat qilsangiz, oxirgi qatorda, ichki ![]()sintaksis LinkedIn belgisi tasvirini koʻrsatishga moʻljallangan. Tashqi []() bu – Markdown giperhavola sintaksisi, u belgi LinkedIn profilning URL manzilini koʻrsatishni taʼminlaydi. Bu yerda LinkedIn belgisini koʻrsatish uchun Shields.ioʼdan foydalandik. Odamlar siz bilan bogʻlanishi mumkin boʻlgan istalgan havolalarni qoʻllashingiz mumkin. 

Natijani esa quyida koʻrishingiz mumkin.

Til va uskunalar qoʻshish

Quyidagi tasvirda bu boʻlimga qoʻshadigan kontent keltirilgan.

Quyidagi kodni README.mdʼga sarlavha uchun qoʻshing:

---

### :hammer_and_wrench: Languages and Tools :

Biz hozirda inson qoʻlidagi texnologiya va koʻnikmalarni aks ettiradigan suratlarni qoʻshamiz. DevIcons GitHub repozitoriysida koʻplab til va uskunalar uchun bepul logotiplarni topishingiz mumkin.

Belgilar papkasiga oʻting va reactpapkasini oching. U yerda SVG va EPS formatidagi rasmlarni topasiz. Istalgan rasmga bosib, brauzerning manzil qatoridagi URL manzilni nusxalab oling.

Biz bu URL manzilni <img> tegida ishlatamiz va mos ravishda balandlik (height) va kenglik (width) atributlarini koʻrsatamiz. Xuddi shu tarzda boshqa koʻnikmalarni izlab topib, ularni alohida <img> teglariga qoʻshishingiz mumkin.

Quyida keltirilgan kodni README.md faylga qoʻshing. Profilingizdagi kerakli koʻnikmalarni qoʻshing yoki oʻchiring.

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

Quyidagi tasvirda esa natijalar keltirilgan.

GitHub statistikani qoʻshish

Bu boʻlimda qoʻshadigan narsalar quyidagi suratda keltirilgan.

Sarlavha sifatida README.mdʼga quyidagi kodni qoʻshing:

---

### :fire: My Stats :

Biz foydalanuvchining GitHubʼdagi faolligi, masalan, kommitlar, PRʼlar soni va hokazolar toʻgʻrisidagi statistikani qoʻshamiz. GitHubʼda profil uchun statistika taklif qiladigan turli ochiq manba kodli loyihalar mavjud. Bu qoʻllanmada biz shunday loyihalardan ikkitasini ishlatishni koʻrib chiqamiz.

GitHub statistikasini taqdim qiladigan birinchi ochiq manba kodli loyiha bu – GitHub Streak Stats boʻlib, u quyidagi uch xil statistikani taqdim qiladi:

  • Foydalanuvchining umumiy hissasi

  • Foydalanuvchining eng davomiy hissalar seriyasi

  • Foydalanuvchining joriy seriya statistikasi

Bu statistikaga quyidagi URL orqali kirishingiz mumkin:

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

Biz mavzu, fon rangi kabi sozlamalarni yuqoridagi URL manzilga soʻrov parametrlarini qoʻshish orqali oʻrnatishimiz mumkin. Quyidagi kodni README.mdʼga qoʻshing. github-username oʻrniga oʻz GitHub foydalanuvchi nomingizni yozing.

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

Bu yerda itsZed0 foydalanuvchi nomi bilan oldindan koʻrish mumkin.

Biz Streak Stats veb-saytini ham URL yaratish uchun qoʻllashimiz mumkin. Buning uchun quyidagi qadamlarni bajaring:

  • Streak Stats veb-saytiga kiring. Foydalanuvchi nomi maydoniga GitHub foydalanuvchi nomingizni kiriting. Zarurat boʻlsa, boshqa maydonlarni ham oʻzgartiring.

  • Barcha maydonlarni oʻzingizga moslashtirgach, tasdiqlash (Submit) tugmasini bosing.

  • Markdown yaratilgach, vaqtinchalik xotiraga nusxalash (Copy to Clipboard) tugmasini bosing va nusxalangan Markdownʼni README.mdʼga qoʻshing.

Foydalanuvchining GitHub statistikasini taqdim qiladigan navbatdagi ochiq manba kodli loyiha — Anurag Hazra tomonidan yaratilgan GitHub README Stats hisoblanadi. Bu loyiha koʻp turdagi statistikani bera oladi, ammo qoʻllanmada faqat GitHub foydalanuvchisi ishlatadigan tillarni koʻrsatadigan turidan foydalanamiz.  Agar loyihadagi boshqa turli statistikani oʻrganish va foydalanishni istasangiz, ularning repozitoriysidagi batafsil hujjatlarni koʻrib chiqishingiz mumkin.

Quyida foydalanuvchi eng koʻp ishlatadigan tillarni aks ettiradigan Markdown keltirilgan:

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

Biz Markdownʼni boshqa rangga oʻtkazishimiz, koʻrsatiladigan tillarning maksimal soniga cheklov qoʻyishimiz mumkin. Maxsus sozlamalar uchun Github README Stats repozitoriysini koʻrib chiqing.

Quyidagi kodni README.mdʼga qoʻshing. your-github-username oʻrniga oʻz foydalanuvchi nomingizni yozing.

[![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)

Quyidagi rasmda mening itsZed0akkauntimning oldindan koʻrinishi tasvirlangan.

GitHub README profilga eng oxirgi bloglarni qoʻshish

Quyidagi rasmda bu boʻlimda nimalar qilmoqchi ekanimiz koʻrsatilgan.

Sarlavha sifatida quyidagi kodni GitHub README.md profilga qoʻshing:

---

### :writing_hand: Blog Posts :

Bu boʻlimda GitHub foydalanuvchisining turli blog platformalarida joylagan oxirgi blog postlari koʻrinadi. Buning uchun vazifalarni bajarishning avtomatlashgan jarayonidan iborat GitHub ish jarayonini yaratamiz. Bu ish jarayonidagi har bir vazifa bir yoki bir nechta amallardan iborat boʻladi. GitHub amal bu — bosqichlarga birlashtirilgan, bajariladigan buyruqlar toʻplami hisoblanadi. Biz oʻz GitHub amalimizni yaratishimiz yoki boshqa foydalanuvchi tomonidan yaratilgan amaldan foydalanishimiz mumkin.

"Blog postlarni olish uchun ikkita mavjud amallardan foydalanamiz:

  • Chek-aut: Joriy repozitoriydagi barcha fayllarni ish jarayonimiz kira olishi uchun Git ishchi muhitiga oʻtkazish uchun ishlatiladi. 

  • Blog Post ish jarayoni: foydalanuvchi tomonidan turli veb-saytlarda eʼlon qilingan eng soʻnggi blog postlarni olish uchun ishlatiladi.

"Ish jarayonini muayyan jadval yoki hodisalar triggeri bilan ishga tushirish mumkin. Bu qoʻllanmada biz ish jarayonini eng soʻnggi blog postni olish uchun har soatda bajaramiz. Siz GitHub amallar haqida rasmiy hujjatdan batafsil oʻqib olishingiz mumkin.

GitHub ish jarayonini sozlash uchun quyidagi qadamlarni bajaring:

  • Quyidagi kodni README.mdʼga qoʻshing. Ish jarayoni quyidagi izohni oxirgi blog postlar roʻyxati bilan almashtiradi:

    <!-- BLOG-POST-LIST:START -->
    <!-- BLOG-POST-LIST:END -->
  • Oʻzgarishlar bajarish (Commit changes) tugmasini bosib, hamasini saqlang. 

  • GitHub ish jarayonini sozlash YAML sintaksisidagi .yml faylida aniqlanadi. Repozitoriyingizda fayl qoʻshish (Add file) pastga ochiladigan roʻyxatidan yangi fayl yaratish (Create new file) punktini tanlaysiz.

  • Faylingizni nomlang (Name your file) maydoniga .github/workflows/blog-post-workflow.ymlʼni kiriting. GitHub ish jarayonining barcha .yml sozlamali fayllari .github/workflows katalogida joylashadi.

Quyidagi kodni yangi faylni tahrirlash (Edit new file) boʻlimiga qoʻshing:

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"

Yuqoridagi kodda biz ish jarayonini eng oxirgi blog postlar ish jarayoni (Latest blog post workflow) deb nomladik, u esa cron maydonida koʻrsatilgan jadval boʻyicha amalga oshiriladi. 0 * * * * bu – cron POSIX sintaksisi boʻlib, jadval har soatning 0-daqiqasida ishga tushishi kerakligini bildiradi.

workflow_dispatch: esa foydalanuvchiga ish jarayonini qoʻlda boshlashga imkon beradi. jobs esa ish jarayoni boshlangach bir yoki bir nechta vazifa ishga tushganini aniqlash imkonini beradi. Bizning holatimizda bitta ish bor, bu — update-readme-with-blog boʻlib, u GitHubʼga joylangan Ubuntu muhit mashinasida ishga tushadi.

steps esa amalga oshirilishi kerak boʻlgan harakat yoki buyruqlar toʻplamini aniqlab beradi. Biz qadamlarda ikki harakatni aniqladik: actions/checkout@v2 hamda gautamkrishnar/blog-post-workflow@master. Ikkinchi harakat with maydonida aniqlangan ikki kirituvchi parametrni qabul qiladi. max_post_count esa READMEʼda koʻrsatiladigan postlarning maksimal sonini aniqlaydi, feed_list esa turli blog platformalari uchun URL manzillarning vergullar bilan ajratilgan RSS kanali hisoblanadi.

Bu qoʻllanmada biz blog postlarni dev.to platformasidan oldik. Qoʻllab-quvvatlanadigan platformalar roʻyxatini ushbu hujjatdan topsa boʻladi.

GitHub ish jarayoni sintaksisi haqida koʻproq bilish uchun mana bu Workflow Syntax hujjati bilan tanishib chiqing.

feed_listʼni RSS kanallaringiz URL manzili bilan almashtiring va  yangi faylni saqlash (Commit new file) tugmasini bosing. Bu ish jarayonini muvaffaqiyatli tarzda yaratadi. U dev.toʼdan yangi blog postlarni qabul qiladi va har soatda sizning README.md faylingizga qoʻshadi.

Ish jarayonini qoʻlda boshlash uchun esa quyidagi qadamlarni bajaring:

  • Repozitoriyingizda harakatlar (Actions) boʻlimiga oʻting.

  • Barcha ish jarayonlari (All workflows) boʻlimidagi eng soʻnggi blog post ish jarayoni (Latest blog post workflow) punktini tanlang.

  • Ish jarayonini boshlash (Run workflow) pastga ochiladigan roʻyxatidan ish jarayonini boshlash tugmasini bosing. Ish jarayoni shu tariqa boshlanadi.

  • GitHub profilingiz sahifasiga oʻtsangiz blog postlar boʻlimida blog-post-workflow.yml faylida aniqlangan blog platformalaridagi barcha blog postlar roʻyxatini koʻrasiz. Quyida esa feed_list https://dev.to/feed/itszed0 uchun chiqaruvchi maʼlumotlar keltirilgan.

Eʼtibor qiling, foydalanuvchi itsZed0ʼning dev.toʼda “Test post” nomli bitta maqolasi boʻlib, uni shu yerdan topishingiz mumkin. Chunki ish jarayoni shu maqolani tortib, uni GitHub README profilda koʻrsatmoqda.

GitHub profilning yakuniy koʻrinishi quyida keltirilgan.

Xulosa

Bu qoʻllanmadan GitHub README profil nima ekani va quyidagilarni oʻrganib oldik:

  • GitHub README profilni ochish; 

  • GIF, tavsif, koʻnikmalar qoʻshish;

  • GitHub Streak Stats va GitHub README Stats qoʻshish;

  • Eng oxirgi blog postlarni olish uchun GitHub ish jarayonini yaratish.

Bu qoʻllanma sizni qoyilmaqom GitHub README profil yaratishga undaydi deb umid qilaman. Bundan tashqari, siz ushbu ochiq manba kodli loyihalar ichidan GitHub README profilingizga qoʻshsa boʻladigan bir qancha qiziqarli funksiyalarni topish imkoniga egasiz.

Haftalik dasturlash koʻrsatkichlarini aks ettirish
Eng oxirgi tinglangan Spotify qoʻshiqlarini aks ettirish
Dasturlash haqida har kuni yangi hazil koʻrsatish.

Manba: How to Create an Impressive GitHub Profile README

#github
Mohirdev Telegram

Telegram kanalimizga obuna bo’lishni unutmang

Obuna bo'lish
sitepoint

sitepoint

O'xshash maqolalar

Rezyumeni yaxshilash uchun GitHubʼdan qanday foydalanish mumkin?

2-may, 2024

Rezyumeni yaxshilash uchun GitHubʼdan qanday foydalanish mumkin?

100 milliondan ortiq foydalanuvchiga ega GitHub eng ilgʻor onlayn dasturlash muhitlaridan biri hisoblanadi. Dasturchilar har kuni loyihalar ustida hamda boshqalar bilan hamkorlik qilish maqsadida GitHubʼdan foydalanadi. Agar zamonaviy raqobatbardosh dasturchilar mehnat bozorida texnologiyaga oid ish izlayotgan boʻlsangiz, GitHub bilan ishlash koʻnikmalari bu musobaqada sizga ustunlik berishi mumkin.

Maqolani o'qish
Ilk React loyihamni boshlashda yoʻl qoʻygan 5 xatoyim
javascript
react

1-may, 2024

Ilk React loyihamni boshlashda yoʻl qoʻygan 5 xatoyim

Maqolani o'qish
Bosim ostida testdan oʻtkazish (testing): biz avtonom sinov tizimini qanday yaratdik?
testing
machine learning

9-aprel, 2024

Bosim ostida testdan oʻtkazish (testing): biz avtonom sinov tizimini qanday yaratdik?

Birmuncha vaqt avval dasturni ishchi nusxa (production instance)ga yuklashdan soʻng avtomatik  testdan oʻtkazish (testing) kerak boʻladigan loyihada ishlagandim. Avtomatlashtirilgan testdan oʻtkazish (testing) bu – toʻliq sinovdan oʻtkazilmasdan oldin dasturiy taʼminotga yaqinda qoʻshilgan yoki oʻzgartirilgan funksiyalar oʻz oʻrnida ishlayotganini tezkor tekshirish usuli. Bu usul batafsil testdan oʻtkazishdan avval asosiy funksiyalar ishlayotganiga amin boʻlishga yordam beradi va oʻz-oʻzidan sifatni taʼminlashdagi tezkor bosqich sanaladi. Testdan oʻtkazish sozlamalari reliz turiga qarab dinamik ravishda oʻzgarib turishi kerak, chunki frontend va bekend relizlar turli vaqtlarda chiqarilgan hamda turlicha testdan oʻtkazish sozlamalarini talab etgan boʻladi.

Maqolani o'qish
Pomidorlardan qutulib qolish choralari: IT-konferensiya uchun ajoyib maʼruza tayyorlash

9-aprel, 2024

Pomidorlardan qutulib qolish choralari: IT-konferensiya uchun ajoyib maʼruza tayyorlash

Konferensiyada nutq soʻzlashga tayyorgarlik — maʼruzachidan koʻp vaqt va kuch talab qiladigan murakkab jarayon. Shuning uchun nega u yerga borayotganingizni, nima soʻzlab berishni va bilishni xohlayotganingizni tushunishingiz kerak. Axir oʻrtaga siz va siz vakillik qilayotgan kompaniyaning obroʻ-eʼtibori tikilgan boʻladi. Bundan tashqari, mashhur konferensiyalar chipta narxi ozmuncha emas va hech kim bu pul behuda ketishini istamaydi.

Maqolani o'qish
Frontend yoki bekend: dasturlashning qaysi yoʻlidan borgan maʼqul?
backend
frontend

4-may, 2024

Frontend yoki bekend: dasturlashning qaysi yoʻlidan borgan maʼqul?

Boʻsh ish oʻrinlari haqidagi eʼlonlarda aynan frontend yoki bekend dasturchi kerakligi koʻp koʻrsatiladi, chunki bu qatlamlar turli tamoyillarga muvofiq va koʻpincha turli dasturlash tillarida yozadi. Keling, frontend va backend dasturlash oʻrtasidagi farqni va ular bir-biri bilan qanday munosabatda boʻlishini aniqlashtirishga harakat qilamiz.

Maqolani o'qish