Chào mừng các bạn trở lại với blog đầy bụi của mình.
Github gần đây mới cho ra mắt một tính năng dùng để hiển thị file README ở trên cùng của trang cá nhân. Với chức năng này, các bạn sẽ được tự do quyết định các thông tin hiển thị trong trang cá nhân của mình thông qua một file README.md, hoặc các bạn viết hẳn CV của mình lên đó cũng được.
À cho bạn nào chưa biết thì đây là profile Github của mình https://github.com/codeaholicguy. Còn đối với bạn nào chưa biết Github là gì thì có thể tham khảo lại bài viết này của mình.
Về file README.md, file này dùng chuẩn Markdown của Github, các bạn có thể tìm hiểu thêm ở link này.
Sau khi tính năng này được ra mắt, cùng với sự sáng tạo không giới hạn của cộng đồng developer trên Github, vô vàn kiểu profile đã được tạo ra. Thậm chí có bạn còn tạo ra cả một repo mang tên awesome-github-profile-readme, để tổng hợp lại mấy profile hay ho, và được nhận tới 2700 star 🤯.
Có gì mới đâu?
Với GitHub Profile README, các bạn có thể viết nhiều nội dung hơn là phần bio. Với định dạng Markdown, các bạn có thể thoải mái thêm nội dung hình ảnh, hình động, đường link, etc.
Ngoài ra, với việc profile này là một repo, các bạn có thể dùng đủ loại automation để làm cho nội dung phong phú, ví dụ như profile của mình mỗi ngày sẽ hiện một câu quote (những câu nói ý nghĩa) khác nhau. Bạn nào không tin nhớ quay lại xem profile của mình vào ngày mai nhé.
Nội dung chính của bài viết này cũng là hướng dẫn các bạn cách để tạo profile giống mình.
Cách tạo profile giống mình
Profile giống mình có nghĩa là phần README hiển thị một câu quote và tên tác giả, câu quote và tên tác giả sẽ được thay đổi mỗi ngày.
Để bắt đầu thì điều kiện tiên quyết là các bạn phải có tài khoản Github.
Trong hướng dẫn này mình sẽ sử dụng Github Action, đây là một công cụ của Github giúp tự động hóa workflow, hay dân trong nghề còn có thể gọi là CI/CD tool.
Nói một các đơn giản, nếu setup Github Action thì khi action được chạy Github sẽ tạo một máy ảo để chạy theo kịch bản mà các bạn đã khai báo. Trong quá trình hướng dẫn mình sẽ nói thêm về các cách khác không dùng Github Action.
Đầu tiên, các bạn tạo một repo với tên chính là tên account của các bạn. Nếu các bạn làm đúng, Github sẽ gợi ý cho các bạn tạo luôn file README.md với sẵn một số nội dung mặc định. Nếu các bạn không tạo file README.md cũng không sao, tạo repo xong thì các bạn tạo file README.md cũng được.
Sau khi đã có repo mình sẽ bắt đầu code.
Mình sử dụng API https://quotes.rest/qod?language=en để lấy nội dung câu quote dưới dạng JSON.
Để hiển thị trên trang cá nhân, đòi hỏi nội dung câu quote và tên tác giả sẽ phải được ghi vào trong file README.md. Như vậy mình sẽ phải tìm các sửa file README.md và push lên repo sau khi lấy được data quote. Mình sẽ viết một đoạn code ngắn bằng JavaScript để thực hiện việc này, các bạn có thể thoải mái sử dụng các ngôn ngữ mà các bạn thành thạo.
| const axios = require("axios"); | |
| const fs = require("fs"); | |
| const getQuote = async () => { | |
| try { | |
| const { data } = await axios.get("https://quotes.rest/qod?language=en"); | |
| const quote = data.contents.quotes[0].quote; | |
| const author = data.contents.quotes[0].author; | |
| console.log("new quote", `"${quote}"`); | |
| return { | |
| quote, | |
| author, | |
| }; | |
| } catch (err) { | |
| console.error(err.message); | |
| return {}; | |
| } | |
| }; | |
| const generate = async () => { | |
| const { quote, author } = await getQuote(); | |
| if (!quote) return; | |
| fs.writeFileSync("README.md", `_**${quote}**_\n\n${author}`); | |
| }; | |
| generate(); |
Tiếp theo mình sẽ tạo một workflow bằng Github Action. Trong repo của các bạn, chọn tab Actions, sau đó chọn set up a workflow yourself.
Các bạn có thể đặt tên workflow là gì tùy ý. File workflow sử dụng định dạng là YAML. Trong file này các bạn khai báo như sau.
| name: main | |
| on: | |
| # Cho phép chạy bằng tay từ giao diện Github | |
| workflow_dispatch: | |
| # Lên lịch chạy hàng ngày vào lúc 00:00 UTC | |
| schedule: | |
| - cron: "0 0 * * *" | |
| jobs: | |
| build: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/checkout@v2 | |
| - uses: actions/setup-node@v1 | |
| # Khởi tạo môi trường NodeJS | |
| with: | |
| node-version: 12.16.1 | |
| - run: npm ci | |
| - name: Generate quote | |
| # Chạy script để gọi API lấy quote sau đó sửa file README.md | |
| run: npm run generate | |
| - name: Update README.md | |
| # Push file README.md đã được thay đổi lên github | |
| run: | | |
| git config --global user.email "john@example.com" | |
| git config --global user.name "example" | |
| git add . | |
| git commit -m "Updated README.md" || echo "No changes to commit" | |
| git push |
Đối với đoạn chạy script để update file README.md, các bạn hoàn toàn có thể sử dụng ngôn ngữ khác. Đối với các bạn có kiến thức về shell script, các bạn hoàn toàn có thể viết shell script ngay bên trong file workflow mà ko cần viết thêm code NodeJS như mình. Mình sử dụng NodeJS là để trình bày cho các bạn thấy workflow hoạt động với các ngôn ngữ như thế nào.
Nếu không sử dụng Github Action, có 1 số cách các bạn có thể dùng như:
- Dùng một CI/CD tool khác
- Tạo một server và setup crontab trên server đó
- Tự update hàng ngày bằng tay từ máy tính của các bạn
Hy vọng qua bài viết này, các bạn sẽ có một số gợi ý để nghịch cho vui sau những giờ làm việc căng thẳng.
Một số profile thú vị
Đây là một số profile khác mà mình thấy khá thú vị
Một số link tham khảo
Codeaholicguy 
Bài viết hay ho, mình sẽ làm thử, cám ơn nha!