GitHub 主页美化 & 显示掘金最近发布文章 Top10 🔥

引言

你是不是经常在逛 GitHub 时会发现别人的主页特别的好看, 但是对于如何配置确一直是一知半解呢? 我自己也一直是如此, 只是大概如何配置, 但是一直没仔细研究过, 刚好趁着周末有空好好研究一番, 顺便把自己的 GitHub 主页好好美化美化, 下面 👇🏻 是本次折腾过程记录 📝

一、添加自述文件(创建同名仓库)

进入个人主页, 默认主页内容相对来说还是比较简单的, 只能设置指定仓库、个人贡献热力图

但实际上不知道从什么时候开始, GitHub 是允许用户在个人主页的顶部显示 自述文件

那么这个 自述文件 又是如何添加的呢? 其实这个自述文件是来自, 个人同名仓库下 README.md, 所以我们这里只需要创建一个和 GitHub 用户名同名的仓库, 并编写 README.md, 该 README 的内容就会在个人主页顶部区域进行展示

按上图 👆🏻 创建完仓库, 我们尝试开始编写 README.md

如下图 👇🏻 可以看到, 创建仓库时, 其实 GitHub 默认就给我们设置了模板, 只是主体内容被注释了而已

下面我们尝试将注释去掉, 并进行保存; 回到个人主页就会看到在顶部新增了一块区域, 展示了同名仓库 README.md 的内容

更多细节部分可参考官方文档

二、标题 & 描述 & 标签

在开始的第一趴, 希望设置一个标题, 然后则是简单的个人描述以及技术栈标签, 故修改内容如下:

<!-- 标题 + 个人描述, emoji 取自: http://emojihomepage.com -->
<p align="center">
  <h1 height="200px" align="center">
 God dag <img src="https://cdn.jsdelivr.net/gh/MaleWeb/picture/images/techblog/hi.gif" width="25">, I'm MoYuanJun </h1> <p align="center">A Sometimes passion ✨ and sometimes idle 🥋 frontend developer from China 👨‍💻</p> </p> 
<!-- 
  技术栈标签, 小标签来自: https://shields.io/
 1. shields 链接格式: https://img.shields.io/badge/-{标签文本}-{标签背景色}?style={标签类型}&logo={标签前面 Logo}&logoColor={Logo 颜色}
 2. shields 可选 Logo 列表参考: https://github.com/simple-icons/simple-icons/blob/develop/slugs.md
-->
<div align="center">
  <img src="https://img.shields.io/badge/-JavaScript-f6da1c?style=flat&logo=javascript&logoColor=white">
  <img src="https://img.shields.io/badge/-TypeScript-2b6dbf?style=flat&logo=typescript&logoColor=white">
  <img src="https://img.shields.io/badge/-React-00b4ce?style=flat&logo=react&logoColor=white">
  <img src="https://img.shields.io/badge/-Node.js-3C873A?style=flat&logo=Node.js&logoColor=white">
  <img src="https://img.shields.io/badge/-Koa-33333D?style=flat&logo=koa&logoColor=white">
  <img src="https://img.shields.io/badge/-Less-bf608e?style=flat&logo=less&logoColor=white">
  <img src="https://img.shields.io/badge/-Sass-b37feb?style=flat&logo=sass&logoColor=white">
  <img src="https://img.shields.io/badge/-Graphql-cf1322?style=flat&logo=graphql&logoColor=white">
</div>
<div align="center">
  <img src="https://img.shields.io/badge/-Git-ee462c?style=flat&logo=git&logoColor=white">
  <img src="https://img.shields.io/badge/-Docker-218bea?style=flat&logo=docker&logoColor=white">
  <img src="https://img.shields.io/badge/-Github-black?style=flat&logo=github">
  <img src="https://img.shields.io/badge/-Webpack-%232C3A42?style=flat-square&logo=webpack">
  <img src="https://img.shields.io/badge/-ESLint-%234B32C3?style=flat-square&logo=eslint">
</div>
复制代码

上面 👆🏻 预览结果如下:

这里的标签来自 Shields.io、Emoji 取自 Emojihomepage、颜色则取自 Ant.design

三、关于我

第二趴, 希望能够对自己的有个简单的介绍, 添加内容如下:

<!-- 背景图 -->
<br />
<br />
<img align="right" alt="GIF" src="./assets/bg.png" width="400"/>

<!-- 关于我 -->
<h2 height="200px" align="center">🎉 About Me</h2>
<br />

- 🔭 I’m currently working on [DXY](https://dxy.com/)~
- 🏋 I'm passionate about fitness, and it pays off ~
- 👨‍💻 I'm passionate about coding and have been developing my skill ~
- 👻 I love to share, and currently share technical articles at [juejin](https://juejin.cn/user/4459274891717223)
- ⛺️ I have a private site: [kunlunxu](https://kunlunxu.cc), you're welcome to come! ~
- 📨 My email address is `moyuanjun@kunlunxu.cc` Welcome to contact me 👏🏻 ~
复制代码

上面 👆🏻 预览结果如下:

四、贡献图贪吃蛇动画

在别人的 GitHub 个人主页上你也许会看到下面这么一个贪吃蛇动画

klx.pro.debf5771a7d8032c485a4bc3c7634264.gif

这里其实是通过 Platane/snk 实现的, 实现原理其实也简单, 就是通过 GitHub Actions 创建工作流, 工作流中设置了定时任务, 任务中使用 Platane/snk 拉取用户的贡献图生成一个 svg 的动图;

这里我们先设置下仓库的 Actions 配置, 因为工作流需要生成图片并将图片提交到我们的仓库, 但是默认情况下工作流是没有读写权限的, 这里我们需要在 setting -> Actions -> General -> Workflow permissions 选择 Read and write permissions 选项并保存

接下来我们开始创建 GitHub Actions 工作流, 具体流程如下:

Actions 配置如下:

# 创建 Snake, see: https://github.com/Platane/snk

# 工作流名称
name: Generate Snake

# 工作流触发时机, see: https://docs.github.com/zh/actions/using-workflows/triggering-a-workflow
# 触发条件修改为: 当 main 分支有 push 操作 || 每天 0 点
on:
  push:
    branches: 
      - main  
  
  schedule:
    - cron:  "0 0 * * *" 

# 作业, see: https://docs.github.com/zh/actions/using-jobs/using-jobs-in-a-workflow
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      # 使用 actions/checkout, see: https://github.com/actions/checkout
      - name: Checkout
        uses: actions/checkout@v3

      # 使用 Platane/snk 生成图片, see: https://github.com/Platane/snk
      - name: Generate Snake
        uses: Platane/snk@v2
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: | assets/github-snake.svg assets/github-snake-dark.svg?palette=github-dark assets/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9 
      # 使用 EndBug/add-and-commit 提交代码, see: https://github.com/EndBug/add-and-commit
      - name: Push to GitHub
        uses: EndBug/add-and-commit@v9
        with:
          branch: main
          default_author: github_actions
          message: 'Generate Contribution Snake'
复制代码

完成上面工作流的创建, 因为会提交 commit 存在 push 操作所以将会触发工作流

工作流执行完毕, 会发现项目下会生成 assets 目录并生成 3 张贪吃蛇动图

接下来我们要做的就是在自述文件中, 引用我们生成的动图:

<!-- 贪吃蛇 - 图片有 actions/Generate Snake 定时生成 -->
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./assets/github-snake-dark.svg" />
  <source media="(prefers-color-scheme: light)" srcset="./assets/github-snake.svg" />
  <img width="100%" alt="github-snake" src="./assets/github-snake.svg" />
</picture>
复制代码

添加贪吃蛇后效果如下:

五、统计卡片

在很多地方可能会看到如下统计卡片, 该统计的实现可以参考 github-readme-stats

github-readme-stats 使用起来比较简单, 只需要将图片地址设为 https://github-readme-stats.vercel.app/api?username={用户名}&{卡片样式配置} 即可, 具体使用可查看仓库文档

在统计部分除了使用 github-readme-stats之外, 这里还想使用了 lowlighter/metrics, 该功能的实现和贪吃蛇的原理一致, 需要通过工作流来生成统计图, 之所以要使用 lowlighter/metrics 是因为它可以生成更多各种花里胡哨的图片

更多案例以及文档可参考仓库文档, 接下来我们将引入 lowlighter/metrics 下面我们来调整我们的工作流:

+ name: Generate
jobs:
+ # 生成统计图, see: https://github.com/lowlighter/metrics
+ github-metrics:
+ runs-on: ubuntu-latest
+ steps:
+ - name: metrics-Half-year-calendar
+ uses: lowlighter/metrics@latest
+ with:
+ base: ""
+ filename: assets/metrics.plugin.isocalendar.svg
+ token: ${{ github.token }}
+ plugin_isocalendar: yes
+ 
  github-Snake:
    runs-on: ubuntu-latest
  ....
复制代码

修改完工作流, 将会重新执行工作流, 执行后会在项目下 assets 目录中生成 metrics.plugin.isocalendar.svg, 然后我们就可以在自述文件中引用生成的图片以及 github-readme-stats 统计图:

<!-- 统计卡片, see: https://github.com/anuraghazra/github-readme-stats -->
<table align="center">
  <tr>
 <td align="center"> <div><b><em><spam>Statistics</spam></em></b></div> <img align="left" src="./assets/metrics.plugin.isocalendar.svg" /> </td> <td align="left"> <img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&hide_border=true&show_icons=true&theme=dark&bg_color=00000000"/> </td> </tr> </table> 复制代码

上面 👆🏻 预览结果如下:

六、掘金最近发布文章展示

这里还有个灵感, 是否可以利用工作流定时拉取 掘金 个人主页发布的文章, 然后再在自述文件中进行展示呢?

说搞就搞, 我们这里我们使用 node 来创建一个脚本来拉取数据, 首先先将仓库拉取下来, 然后初始化我们的项目:

npm init -y
echo '\nnode_modules' >> .gitignore
复制代码

安装 jsdom 下面脚本需要该依赖来处理 html

npm i jsdom
复制代码

下面创建根文件 renderPosts.mjs, 来编写我们的脚本, 脚本内容如下, 脚本详细介绍可直接看注释:

import fs from 'fs';
import util from 'util'
import process from 'child_process'

import { JSDOM } from 'jsdom'

const exec = util.promisify(process.exec)

const USER_ID = '4459274891717223' // 掘金用户 ID

// 1. 拉取页面: 使用 cur 拿到 html内容
const { stdout: body } = await exec(`curl https://juejin.cn/user/${USER_ID}/posts`)

// 2. 使用 jsdom 解析 HTML
const dom = await new JSDOM(body)

// 3. 生成 html
const appendHtmlText = [...dom.window.document.querySelectorAll('.detail-list .post-list-box .entry-list .entry')]
  .reduce((total, ele) => {
    const data = ele.querySelector('.meta-container .date')?.textContent 
    const link = ele.querySelector('.content-wrapper .title-row a.title')
    return `${total}\n<li>[${data}] <a href="https://juejin.cn${link?.getAttribute('href')}">${link?.textContent}</a></li>`
  }, '')

// 4. 读取 README, 并在 <!-- posts start --> 和 <!-- posts end --> 中间插入生成的 html
const README_PATH = new URL('./README.md', import.meta.url)
const res = fs.readFileSync(README_PATH, 'utf-8')
  .replace(/(?<=\<\!-- posts start --\>)[.\s\S]*?(?=\<\!-- posts end --\>)/, `\n<ul>${appendHtmlText}\n</ul>\n`)
  
// 5. 修改 README
fs.writeFileSync(README_PATH, res)
复制代码

下面我们修改 README.md: 添加标志位

<!-- posts start -->
生成的文章列表将会在这里展示
<!-- posts end -->
复制代码

执行脚本

node renderPosts.mjs
复制代码

执行完脚本, 在 README.md 中会发现, 在标志位  和  中间插入了一段 html

接下来我们就来调整我们的工作流, 调整内容如下:

...
jobs:
+ juejin-posts:
+ runs-on: ubuntu-latest
+ steps: # 工作流步骤
+ # step 1. 获取源码
+ - name: Chekcout 🛎️ # 步骤名
+ uses: actions/checkout@master # 使用插件名 => https://github.com/actions/checkout
+
+ # step 2. 生成列表、并插入到 README
+ - name: Append Juejin Posts List 🔧
+ run: |
+ npm install
+ node ./renderPosts.mjs
+
+ # step 3. 使用 EndBug/add-and-commit 提交代码, see: https://github.com/EndBug/add-and-commit
+ - name: Push to GitHub
+ uses: EndBug/add-and-commit@v9
+ with:
+ branch: main
+ default_author: github_actions
+ message: 'render renderPosts'
+ 
  github-metrics:
    ....
复制代码

修改完工作流, 将会重新执行工作流, 执行后将插入掘金最新发布的 10 篇文章, 其预览结果如下:

补充补充补充: 上面的逻辑目前已经抽离成独立的仓库, 大家如果也想插入掘金文章列表, 无需自己手撸一遍代码, 可以直接在工作流中直接使用, 使用方式如下:

jobs:
  juejin-posts:
    runs-on: ubuntu-latest
    steps:
      # 使用 actions/checkout 拉取仓库, see: https://github.com/actions/checkout
      - name: Checkout
        uses: actions/checkout@v3
        
      # 使用 KunLunXu-CC/juejin-posts-action 生成文章列表, 
      # see: https://github.com/KunLunXu-CC/juejin-posts-action
      - name: Append Juejin Posts List 🔧
        uses: KunLunXu-CC/juejin-posts-action@main
        with: 
          user_id: "4459274891717223"
  
      # 使用 EndBug/add-and-commit 提交代码, see: https://github.com/EndBug/add-and-commit
      - name: Push to GitHub
        uses: EndBug/add-and-commit@v9
        with:
          branch: main
          default_author: github_actions
          message: 'juejin-posts'
复制代码

七、总结

到此, 一顿折腾到此也基本差不多咯, 后面的工作基本就是对自述文件进行微调, 如果各位看官对最后的效果比较好奇欢迎 👏🏻 到我的 GitHub 一游, 如果你对生成掘金列表的 Action 好奇, 也可以点击 juejin-posts-action 查看

八、参考

本文正在参加「金石计划」

GitHub 主页美化 & 显示掘金最近发布文章 Top10 🔥

引言

一、添加自述文件(创建同名仓库)

二、标题 & 描述 & 标签

三、关于我

四、 贡献图贪吃蛇动画

五、统计卡片

六、掘金最近发布文章展示

七、总结

八、参考

评论

四、贡献图贪吃蛇动画