我们大多数人都有作品集。作为开发者，我们想展示自己的项目，这些项目大多存储在我们的GitHub个人主页上的项目中。

但在我们的作品集网站上，我们该如何展示这些作品呢？

之前，我有一个 ts 文件，里面存放了 GitHub 仓库的链接和卡片的相关信息。

    export const data = [
      {
        id: Math.random(),
        subtitle:
          "一个基于OpenAI的简历生成器，可以从提供的数据生成简历。支持使用Supabase上传文件。",
        title: "基于OpenAI的简历生成器",
        github: "https://github.com/shricodev/resume-builder-openai",
        noLive: true, // 表示无实时链接
      },
      {
        id: Math.random(),
        title: "PDFWhisper - OpenAI",
        subtitle: "一个基于OpenAI的PDF聊天机器人。它可以回答基于PDF中的内容提出的问题。",
        github: "https://github.com/shricodev/pdfwhisper-openai",
        liveUrl: "https://pdfwhisper-openai.vercel.app/",
      },
      // ...其余项目详情
    ];

全屏 开启 全屏 关闭

Alternatively, 你也可以用 json 文件来存类似的信息内容。

这种做法的问题

真正的问题是这个过程完全是手工操作。你也不能在README文件中查看项目内容。当你新建一个项目时，你需要手动编辑文件，提交修改，然后推送到仓库。哎，这样的工作真的让人头疼 😮‍💨。

为什么不自动化这个，或者也可以用 Markdown 显示 README 呢？

此处省略内容

我对这个过程感到非常沮丧，总是觉得我的作品集网站因此而显得过时了。我马上想到的是：我们能否使用 GitHub Actions 来自动化它？

答案是肯定的，但怎么做到的呢？

有几个方法可以解决这个问题。你可以用专门与 GitHub API 交互的 JavaScript 库，GitHub 推荐 Octokit.js，或者找其他替代方案。

当我阅读文档时，提到需要生成个人访问令牌，感觉这有点多余，因为我只需要从公开仓库获取数据就没必要。毕竟，GitHub 有一个公共 API（https://api.github.com），有宽松的速率限制，非常适合用来获取仓库信息，无需生成令牌。

所以我决定不使用库了，转而使用一些Bash的小技巧。🪄🧙

使用 curl 拿数据

通过一个简单的 curl 命令，我获取了所有仓库名称。

下面的命令可以从shricodev的GitHub页面获取公开的非fork仓库名称（最多300个）并去重。
curl -s "https://api.github.com/users/shricodev/repos?per_page=300" | jq -r '.[] | select(.private == false and .fork == false) | .name' | uniq

进入全屏 切换回正常模式

这条命令会获取指定用户的全部仓库名称。它利用 jq 过滤掉所有分叉仓库（毕竟，你肯定不想在你的作品集中显示任何分叉仓库），然后再根据唯一性筛选项目（以防万一，以确保更安全）。

🤔 但我们如何过滤特定仓库在我们网站上显示呢？

为此目的，我们将为想展示的仓库添加一个独特的标签，例如 showcase，你可以按照你喜欢的方式命名。并将这个独特的标签添加到你希望在个人展示中展示的所有仓库中。

我们现在需要做的是修改上述的 jq 过滤命令，检查主题 showcase 是否存在于仓库中，如果是，则就获取该仓库的所有元数据和相关信息。

    curl -s "https://api.github.com/users/shricodev/repos?per_page=300" | jq -r '.[] | select(.private == false and .fork == false and (.topics | index("showcase") != null)) | .name' | uniq

注：以上命令为英文，可以直接执行。

进入全屏，退出全屏

接下来，我从GitHub开发者页面的设置生成了一个个人访问令牌（Personal Access Token，PAT），并将其添加到仓库的密钥和变量 -> 操作部分。

这就对了：

编写 GitHub 操作 ✍️

以下是：如下所示的使用 curl 命令的完整 GitHub Actions 工作流配置：

name: 获取公共仓库的README

on:
  schedule:
    # 每天零点运行。
    - cron: '0 0 * * *'
  workflow_dispatch:

permissions:
  contents: write

jobs:
  fetch-readmes:
    runs-on: ubuntu-latest

    steps:
      - name: 检出代码库
        uses: actions/checkout@v4

      - name: 获取并处理公共仓库列表及README元数据
        env:
          TARGET_USER: <username>
          TARGET_FOLDER: '<path_to_the_folder_to_store_readme(s)>'
        run: |
          mkdir -p "$TARGET_FOLDER"

          # 获取公共仓库列表
          repos=$(curl -s "https://api.github.com/users/$TARGET_USER/repos?per_page=300" | jq -r '.[] | select(.private == false and .fork == false and (.topics | index("showcase") != null)) | .name' | uniq)

          for repo in $repos; do
            readme_file="$TARGET_FOLDER/${repo}_README.mdx"

            if [[ -f "$readme_file" ]]; then
              echo "该README已存在，跳过..."
              continue
            fi

            repo_metadata=$(curl -s "https://api.github.com/repos/$TARGET_USER/$repo")
            title=$(echo "$repo_metadata" | jq -r '.name')
            description=$(echo "$repo_metadata" | jq -r '.description // ""')
            clone_url=$(echo "$repo_metadata" | jq -r '.clone_url')
            language=$(echo "$repo_metadata" | jq -r '.language // ""')
            homepage=$(echo "$repo_metadata" | jq -r '.homepage // ""')
            topics=$(echo "$repo_metadata" | jq -r '.topics | join(", ")')
            created_at=$(echo "$repo_metadata" | jq -r '.created_at')
            updated_at=$(echo "$repo_metadata" | jq -r '.updated_at')

            status_code=$(curl -o /dev/null -s -w "%{http_code}" https://raw.githubusercontent.com/$TARGET_USER/$repo/main/README.md)

            if [ "$status_code" -eq 200 ]; then
              readme_content=$(curl -s https://raw.githubusercontent.com/$TARGET_USER/$repo/main/README.md)

              {
                echo "---"
                echo "title: "\"$title\"\""
                echo "description: "\"$description\"\""
                echo "clone_url: \"$clone_url\""
                echo "language: \"$language\""
                echo "homepage: \"$homepage\""
                echo "topics:"
                for topic in $(echo "$topics" | tr ',' '\n'); do
                  echo " - \"$topic\""
                done
                echo "created_at: \"$created_at\""
                echo "updated_at: \"$updated_at\""
                echo "---"
                echo ""
                echo "$readme_content"
              } > "$readme_file"
            else
              echo "$repo 没有 README，跳过..."
            fi
          done

      - name: 提交变更
        run: |
          git config --global user.name "github-actions[bot]"
          git config --global user.email "github-actions[bot]@users.noreply.github.com"

          git add -A

          # 如果有更改则提交
          if ! git diff --cached --quiet; then
            git commit -m "更新公共仓库README和其元数据"
            git push https://x-access-token:${{ secrets.<secret_name> }}@github.com/<username>/<repository_name>.git HEAD:<branch_name>
          else
            echo "没有需要提交的更改。"
          fi

进入全屏，退出全屏

GitHub Actions 工作流每天都会运行，获取所有用户的所有仓库，写入它们的元数据以及 README 内容（如果有），并将它们分别保存为 <repository_name>_README.mdx 文件。

通过在 cron 定时器下方添加 workflow_dispatch:，我们可以启用手动触发工作流，以便在需要时手动触发。

如果你跟着教程做，确保用实际名字替换占位符文本。

现在，有了所有的元数据以及仓库README内容，我们可以用任何Markdown解析器来解析这些mdx内容，并在我们的网站上显示它。

如果你想看看下面的页面👇

https://techwithshrijal.com/projects

通过这个简单的 GitHub Actions，你的个人网站将始终与你的 GitHub 项目保持同步更新。通过使用基本的命令行脚本，我们把这个过程自动化了，这样就无需依赖第三方库。

你可以在这里找到整个代码库：https://github.com/shricodev/portfolio.git

可以在这里查看我的作品集：https://techwithshrijal.com，欢迎来看看！

谢谢大家的阅读！🎉