สอนทำ Github Profile ให้สวยงามตั้งแต่เริ่มต้น

หลาย ๆ คนคงจะสงสัยว่าเราจะทำหน้า Github Profile ยังไงให้สวยงาม?

content นี้มีคำตอบจ้า ทำตามได้เลยเพราะอัพเดตมาแล้ว

แล้วมีอะไรบ้าง ไปดูกัน?

ส่วนโค้ดอยู่ใต้เม้น

-

⭐️ วิธีสร้าง Github Profile ของเรา

สร้าง repository ใหม่ ที่มีชื่อเหมือน github account ของเรา เช่นของเราชื่อ mikkipastel ก็ตั้งชื่อ mikkipastel เหมือนกัน

พอสร้าง repository ใหม่เสร็จแล้ว ให้สร้างไฟล์ README.md ซึ่งไฟล์นี้มันจะไปแสดงที่หน้า github account ของเรานั่นเอง

ข้อดีคือทำไว้คนมาเปิด github ดูจะได้รู้ว่าเราเป็นใคร ถนัดด้านไหน

-

⭐️ Cover Image

สร้างไฟล์ 1000 x 300 px ทำจากแอพไหนก็ได้ ไม่ว่าจะเป็น Canva, Photoshop และอื่น ๆ อาจจะเป็นชื่อของเรา หรือเป็น abstract design ได้หมดตามใจชอบ

-

⭐️ About me

หลายคนอาจจะนึกไม่ออก ว่าจะใส่อะไรดีน้า หลาย ๆ คนอาจจะใช้ AI เขียนให้ หรือใช้สิ่งอำนวยความสะดวก มี developer หลาย ๆ คนทำเว็บ Github Profile README Generator พวกนี้ให้เราแล้ว นอกจากคิดคำแล้ว ยังใส่ตัวอื่น ๆ อย่างพวก website, social link, tech stack และอื่น ๆ ให้เราอีกด้วย ตามแต่ platform

Github Profile README Generator: เราใส่ Github username ของเรา มันจะดึง data ของเรามาแสดง และสามารถใส่ลิ้งต่าง ๆ ทั้งเว็บไซต์ของเรา social network ช่องทางต่าง ๆ แล้วก็พวก your technical skill แล้วมันจะ generate มาให้เรา

GPRM: เริ่มที่ใส่ Github username ของเรา แล้วเราจะได้ github stat มา แล้วก็ใส่พวกลิ้งต่าง ๆ skill ต่าง ๆ เหมือนกัน แล้วใส่พวกช่องทาง donate ได้ด้วย รวมถึงมี github trophies, visitors count, top contributed repo list มาให้เรา

-

⭐️ ติด Badge แสดง Social และ Tech Stack

หลาย ๆ คนอาจจะเขียนเป็น text อาจจะดูอ่านง่าย แต่ badge ช่วยคุณได้

ดังนั้นเราสามารถเลือก badge จาก markdown-badges ไปใส่ใน readme ของเราได้ หรือจะ custom จาก shields.io ก็ได้เช่นกัน

-

⭐️ Github Stat

เริ่มจะเป็น dynamic dashboard ตามชื่อ session แล้ว

ย้อนความกันก่อน ทำไมเราถึงใส่ใน Github Profile กันนะ? เพราะว่ามันแสดง stat ของเราในการ contribute ของเราบน Github ล่ะสิ

ข้อดี คือ ดูความขยันของตัวเอง และมีภาษาที่เราใช้บ่อยที่สุด นอกจากเป็นการ check ตัวเองแล้ว บวกกับถ้าเราเอา Github ของเราไปสมัครงานงี้ ก็จะเห็นภาพคร่าวๆแล้วหล่ะว่าเราถนัดอะไร ทำอะไรมาบ้าง ทำให้ดูได้ง่าย ๆ โดยไม่ต้องเปิดไปดูทีละ repo

เราใช้ github-readme-stats ซึ่งตอนแรกเอาไปแปะได้เลยไม่มีอะไร แต่แล้วเกิดปัญหาไม่สามารถแสดง Github Stat ได้เหมือนเมื่อก่อน และตัวหน้าเว็บของเขาจะเจอว่า "503 Service Unavailable”

สาเหตุเกิดจากเรื่อง "Maximum retries exceeded" เนื่องจากใช้ PAT (persoanl access token) เกิน limit เขาเลยแนะนำว่าให้เราไป deploy เองได้เลย ด้วย Github Action, Vercel หรืออื่น ๆ

วิธีที่ง่ายที่สุด ก็สร้าง workflow ใหม่ใน Github Action ไปเลยแล้วกัน โดยใช้ตัว "Github Readme Stats Action" ที่อยู่ใน marketplace มาช่วย

วิธีการทำ สร้าง workflow ขึ้นมาใหม่ ใน folder .github/workflows เราตั้งชื่อว่า stat.yaml ก็แล้วกัน

ตั้งเวลาให้ workflow นี้ทำงานทุกวัน โดยให้ checkout repo ออกมา จากนั้น generate stat card และ top language card ออกมา พอได้รูปมาแล้วให้ push ขึ้นไป

ในส่วน generate stat จริง ๆ ที่หน้า marketplace มีตัวอย่างการใช้งานแล้ว

- card: ในที่นี้ใช้ stats กับ top-lang

- option: หน้าตาการแสดงผล อิงจาก github-readme-stats ได้เลย

- path: เก็บรูปที่ได้ที่ไหน เพื่อดึงมาแสดงผลที่ README.md

- token: เราใช้ GITHUB_TOKEN ซึ่งลืมวิธีสร้างไปแล้ว ฮือออ

แล้วก็ไปใส่รูปที่ได้ที่ README.md

จากนั้นรอเวลา แน่นอนรอไม่ไหว สั่งให้ start workflow นี้เพื่อ check ดูได้ว่าเรียบร้อยไหม

-

⭐️ ดึงบล็อกล่าสุดในบล็อกของเรามาแสดง

อันนี้ค้นหาใน Google เลย ก็เลยเจอบทความนี้ ใช้ Github Action ในการสร้าง workflow ตัวนึงขึ้นมา ในการไปเอาบล็อกล่าสุดมา 5 อัน มาแสดงใน Github Profile

เพิ่มส่วน content ล่าสุด ใน README.md ถ้ามันทำงานแล้ว จะมี content ของเราอยู่ข้างใน

สร้าง workflow ขึ้นมาใหม่ ใน folder .github/workflows ตั้งชื่อว่า blogfeed.yaml

โดยตั้งเวลาให้ workflow นี้ทำงานทุกวัน เพื่อ checkout repo ดึง content ล่าสุด

- comment_tag_name: ชื่อแท็กที่ตรงกับใน README.md เพื่อเอาไปอัพเดตได้ถูกที่

- feed_list: ใส่ตัว RSS ลงไป

- commit_message

- gh_token: ใส่ GITHUB_TOKEN

แล้วลองสั่ง start workflow นี้เพื่อ check ดูได้ว่าเรียบร้อยไหม

-

⭐️ Donate / Support

ในยุคที่ใคร ๆ ก็หาค่าขนมเพิ่ม ของเรามีทั้ง Ko-fi และ Buy me a coffee เขามีสิ่งอำนวยความสะดวกให้เราแล้ว

สำหรับ Ko-fi เป็นช่องทางที่ชาว developer ใช้กันเยอะ รวมถึง content creator สายอื่น ๆ ด้วย สามารถเอาปุ่มมาไว้ที่ README.md ได้โดยเข้าไปที่เว็บ Ko-fi แล้วก็ “Buttons & widgets” กด “Github Donate Button” copy code มาแปะได้เลย

หรือถ้าใครมี Buy Me a Coffee เข้าที่เว็บเขา แล้วไปที่ “Button & Graphic” กดปุ่ม “Generate” ตรงส่วน Website buttons จะมี popup ขึ้นมา แล้วกดปุ่ม “Generate button” → “Copy image code” แล้วมาแปะที่ README.md ของเราได้เลย

แล้วก็เพื่อน ๆ เป็นยังไง ทิ้งลิ้ง github ไว้ได้น้าาา

#รวมเรื่องไอที #แชร์ทริคไอที #lemon8ฮาวทู #programmer #developer