Nhập môn Github Actions thông qua việc trang trí Github cá nhân

Xin chào các bạn. Mặc dù MU đã có cúp "Cô Đơn" cũng lâu rồi, cơ mà giờ mình mới ra khỏi hang, còn nhiều điều bỡ ngỡ. Rất mong nhận được comment hỏi han của anh chị em trong group.

Ra khỏi hang xong thì mình sẽ khởi động tí bằng bài post chơi chơi này. Rất mong nó giúp ích được cho các bạn.

Vấn đề

Rồi, đây là phần mình sẽ nhận rất nhiều gạch đá. Mình có 1 lô cái badge ở trên Credly như ở trong ảnh

Screenshot 2024-07-24 at 17.51.47.png

Ngoài ra thì còn có Ruby Silver và Ruby Gold:

Xuất phát từ mong muốn cá nhân show hết được và tổng hợp được ở Github cá nhân, mình mong muốn tìm được 1 cách nào đó để tổng hợp được chỗ kia 1 cách tự động, update to latest. List cũng phải đẹp, có thể bao quát hết mọi thứ trong 1 khoảng diện tích ngắn nhất vì như ở ảnh 1, mình có tận 32 cái. Tổng 2 bên Credly và Credential.net của mình là 34 cái.

Và từ đó, mình nghĩ đến Github Actions.

Lý thuyết

Tổng quan về CI/CD

CI/CD được viết tắt của Continuous Integration / Continuous Deployment. Đó là quá trình tự động hoá việc kiểm tra ( test ) mã nguồn, xây dựng ( build ) và triển khai ( deploy ) ứng dụng của mình lên các môi trường như Dev, Staging hoặc Production

Flow của CI/CD:

Để tóm tắt thì đầu tiên, source code được commit lên sẽ trigger CI, CI chạy confirm không gặp vấn đề sẽ chuyển cho CD deploy code mới lên sản phẩm.

Github Actions

Github Actions là 1 nền tảng CI/CD cho phép các bạn tạo 1 luồng tự động build, test và deploy.

Để tạo ra 1 cái Github Actions workflow, 1 các cách làm là tạo 1 folder .github/workflows/, sau đó tạo 1 file .yml

Xét ví dụ bên dưới:

name: hello-world
on: push
jobs:
  my-job:
    runs-on: ubuntu-latest
    steps:
      - name: my-step
        run: echo "Hello World!"

Trong đó:

name là tên của workflow
on là cơ chế trigger workflow. Ví dụ như push, pull_request, create,...
- Trong repo dành cho trang Github lần này, mình sẽ dùng cơ chế push
- Hơi bên ngoài tí thì với việc check rubocop cho các project Ruby thì mình dùng trigger pull_request
jobs: các công việc sẽ chạy ở trong workflow
my-job hay tên nào cũng được: tên của job trong định nghĩa jobs bên trên
runs-on: chỉ định môi trường của job. Thường sẽ là các OS hệ Linux(mình chưa thấy quả nào là Win cả. Nếu có thì chắc là sẽ mất tiền phí license)
steps lần lượt là các bước. Mỗi step sẽ là 1 gạch đầu dòng gồm tên của step và câu lệnh command line step đó chạy.

Thực hành

Khởi tạo

Để có được trang Github, thì như mọi người biết, tại Github cá nhân, khởi tạo 1 repo đặc biệt với tên repo chính là tên username Github. Ví du: https://github.com/BlazingRockStorm/BlazingRockStorm

Sau đó bạn chỉnh sửa file README tuỳ ý để có 1 cái profile sơ bộ

Chọn Github Action

Ở đây thì mình sẽ chọn pemtajo/badge-readme. Đây là Github Action có thể lấy toàn bộ badge từ Credly theo thứ tự thời gian.

Viết Github Action workflow

Đây là workflow mình viết

name: Update badges

on:
  schedule:
    # Runs at 2am UTC
    - cron: "0 2 * * *"
jobs:
  update-readme:
    name: Update Readme with badges
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Badges - Readme
        uses: pemtajo/badge-readme@main
        with:
          CREDLY_USER: duc-quan-hoang
          CREDLY_SORT: RECENT
          BADGE_SIZE: 110

Ở đây mình trigger theo kiểu hẹn giờ nên sẽ là schedule với cron job

Phần step ở đây thì mình có mỗi step gọi đến action bên trên. Và theo setup thì mình gọi đến username Credly của mình, sắp xếp theo thứ tự thời gian và size của badge là 110.

Sau đó thì ở file README.md, mình thêm đoạn code "magic comment" như sau:

<!--START_SECTION:badges-->
<!--END_SECTION:badges-->

(Magic comment là những đoạn comment được compile ở code chứ không bị ignore như thường, nhằm mục đích xử lý 1 đoạn code nào đó được đánh magic comment)

Và kết quả thì như ở đây

Cơ mà mình vẫn còn 2 badge ở credentials.net. Vì vậy mình vào README vạch thêm các badge được cách nhau như nào:

[![AWS Industry Quest: Healthcare](https://images.credly.com/size/110x110/images/370b5eab-6853-4deb-89a3-4a717edcba4d/image.png)](http://www.credly.com/badges/8ae1b9c5-8d6a-40d6-8aff-c25b3b52c951 "AWS Industry Quest: Healthcare")
[![AWS Industry Quest: Financial Services](https://images.credly.com/size/110x110/images/ac4918fd-87d6-4283-b896-52314f703327/image.png)](http://www.credly.com/badges/b55ffd5f-b377-4724-aca7-d94bd8f267e5 "AWS Industry Quest: Financial Services")

Ứng dụng tương tự với 2 badge Ruby mình download sẵn, ta có:

[<img src="https://badges.images.credential.net/1495071229333.png" width="110">](https://www.credential.net/d6b90bcc-0a14-4039-94ba-5443ea9dd343 "Ruby Certified Ruby Examination Silver")
[<img src="https://templates.images.credential.net/16599277022875216138354534652590.png" width="110">](https://www.credential.net/3c8a0b29-cc9d-4249-a148-ddf1800e53d9 "Ruby Certified Ruby Examination Gold Ver 3")