[{"data":1,"prerenderedAt":267},["ShallowReactive",2],{"article-1":3},{"id":4,"title":5,"body":6,"create":255,"description":256,"extension":109,"labels":257,"locked":259,"meta":260,"navigation":261,"path":262,"seo":263,"stem":264,"update":265,"__hash__":266},"articles/article/1.md","结合 GitHub Issues 与 VitePress 写博客",{"type":7,"value":8,"toc":238},"minimark",[9,33,37,51,55,76,79,90,94,101,104,123,127,136,139,148,158,162,183,189,192,212,220,223,226,232,235],[10,11,12,13,20,21,26,27,32],"p",{},"前一阵子一直在捣鼓 VitePress，想着之前看到有人用 Github Issues\n来做静态页面的评论系统，于是就去了解了一下，目前这类项目有 ",[14,15,19],"a",{"href":16,"rel":17},"https://github.com/gitalk/gitalk",[18],"nofollow","gitalk","、",[14,22,25],{"href":23,"rel":24},"https://github.com/imsun/gitment",[18],"gitment","\n以及 ",[14,28,31],{"href":29,"rel":30},"https://vssue.js.org/zh/",[18],"vssue","。在这个过程中发现很早之前就有人开始用 Github Issues 来写博客。本人比较懒，我想着能不能把它和\nVitePress 结合起来再通过 GitHub Pages 实现嫖上加嫖，后经过搜索也确实有人这么干。",[34,35,36],"h2",{"id":36},"仓库设置",[10,38,39,40,44,45,50],{},"首先，新建一个仓库，由于是用到 GitHub Pages，就将仓库名设置为 ",[41,42,43],"code",{},"\u003Cyourname>.github.io","，当然也可以随便命名，只是后面在\nvitepress ",[14,46,49],{"href":47,"rel":48},"https://vitepress.dev/guide/deploy#github-pages",[18],"部署"," 的时候会有所不同。",[52,53,54],"h3",{"id":54},"设置密钥",[10,56,57,58,63,64,67,68,71,72,75],{},"首先申请 ",[14,59,62],{"href":60,"rel":61},"https://docs.github.com/zh/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token",[18],"Personal access token"," ，\n",[41,65,66],{},"左上角头像 ->Settings-> 下拉找到 Developer settings->Personal access tokens->Generate new token"," 我这里申请的都是带有\n",[41,69,70],{},"classic"," 标识的 token，权限建议全选，时间设置无限制。点击 Generate token 之后页面中会出现一个 ghp_开头的字符串，复制保存好。\n然后将 token 写入仓库密钥中，就在我们刚刚创建的仓库主页\n",[41,73,74],{},"左边 Settings->Secrets and variables->Actions->New repository secret"," 这里 name 自己设置，value 填写刚刚复制的字符串之后点击\nAdd secrets 就可以了。",[52,77,78],{"id":78},"设置变量",[10,80,81,82,85,86,89],{},"这边设置的变量主要是方便工作流中的判断，在刚刚创建仓库密钥的页面有个 ",[41,83,84],{},"variables"," 选项卡点击 New repository variable，name\n自定义，value 就写你 github 的用户名，比如我的就是 ",[41,87,88],{},"ttdly","，填好后点击 Add variable 就行。",[52,91,93],{"id":92},"pages","Pages",[10,95,96,97,100],{},"由于后面会用到 GitHub Actions 进行 Pages 的发布，所以在仓库 ",[41,98,99],{},"Settings->Pages->Build and deployment->source"," 选择 Github\nActions。",[52,102,103],{"id":103},"新建分支",[10,105,106,107,110,111,114,115,118,119,122],{},"创建一个分支，存储 md 文件，我这里就以 ",[41,108,109],{},"md"," 命名了，然后删除 ",[41,112,113],{},"main"," 分支中的文件，也就是说这个分支里什么文件都不要留，当然.git\n文件夹不要删。清空之后，新建 ",[41,116,117],{},"posts"," 文件夹里面新建一个 ",[41,120,121],{},"placeholder"," 文件，什么都不要写。（主要是懒得做文件夹是否存在这个判断）最后将分支同步到\ngithub 仓库里。",[34,124,126],{"id":125},"处理-issues","处理 Issues",[10,128,129,130,135],{},"把仓库设置好后，就可以开始编写 ",[14,131,134],{"href":132,"rel":133},"https://docs.github.com/zh/actions/using-workflows/about-workflows",[18],"工作流程"," 以及代码来把你写好的\nIssue 写入到 md 文档中然后上传回仓库了。",[52,137,138],{"id":138},"初始化",[10,140,141,142,144,145],{},"在 ",[41,143,113],{}," 分支中，新建 ",[41,146,147],{},".github/workflows/copyissue.yml",[149,150,156],"pre",{"className":151,"code":153,"language":154,"meta":155},[152],"language-yaml","name: cpoyIssues\n# 在新建、更新、重新开启、关闭 issues 的时候触发工作流程\non:\n  issues:\n    types:\n      - \"opened\"\n      - \"edited\"\n      - \"reopened\"\n      - \"closed\"\n# 给予所有写权限，这个在后面上传文件的时候会用到。\npermissions: write-all\n","yaml","",[41,157,153],{"__ignoreMap":155},[52,159,161],{"id":160},"过滤-issues","过滤 issues",[10,163,164,165,170,171,176,177,182],{},"由于 Issues 谁都能来写，这又是个人博客，所以第一步就需要把不是自己开的 Issues\n给过滤掉。而 ",[14,166,169],{"href":167,"rel":168},"https://docs.github.com/en/rest?apiVersion=2022-11-28",[18],"Github REST API"," 提供了许多的接口，其中就有对 Issues\n操作的接口，这里会用到 ",[14,172,175],{"href":173,"rel":174},"https://docs.github.com/en/rest/issues/issues?apiVersion=2022-11-28#update-an-issue",[18],"issues update","\n和 ",[14,178,181],{"href":179,"rel":180},"https://docs.github.com/en/rest/issues/issues?apiVersion=2022-11-28#lock-an-issue",[18],"issues lock","。因为 GitHub Action\n能够直接执行命令，所以过滤 issues 直接用 curl 调用接口：",[149,184,187],{"className":185,"code":186,"language":154,"meta":155},[152],"# .github/workflows/copyissue.yml\njobs:\n  lockissue:\n    runs-on: ubuntu-latest\n    # vars.OWNER 中的 OWNER 是前面设置变量一节中设置的变量名\n    if: ${{ github.event.action == 'opened' && github.actor != vars.OWNER }}\n    steps:\n      - name: Close and Lock Issues\n        run: |\n          curl -L \\\n            -X PATCH \\\n            -H \"Accept: application/vnd.github+json\" \\\n            -H \"Authorization: Bearer ${{secrets.TOKEN}}\"\\\n            -H \"X-GitHub-Api-Version: 2022-11-28\" \\\n            https://api.github.com/repos/${{github.repository}}/issues/${{github.event.issue.number}} \\\n            -d '{\"state\":\"close\",\"state_reason\":\"not_planned\"}'\n          curl -L \\\n            -X PUT \\\n            -H \"Accept: application/vnd.github+json\" \\\n            -H \"Authorization: Bearer ${{secrets.TOKEN}}\"\\\n            -H \"X-GitHub-Api-Version: 2022-11-28\" \\\n            https://api.github.com/repos/${{github.repository}}/issues/${{github.event.issue.number}}/lock \\\n            -d '{\"lock_reason\":\"off-topic\"}'\n",[41,188,186],{"__ignoreMap":155},[52,190,191],{"id":191},"编写转换脚本",[10,193,194,195,197,198,203,204,207,208,211],{},"这一步的转换脚本用啥语言写都行，只要能正常请求网络接口，我这里用 js 演示。\n首先切换到 ",[41,196,109],{}," 分支，",[14,199,202],{"href":200,"rel":201},"https://vitepress.dev/guide/getting-started#installation",[18],"安装"," vitepress，在 ",[41,205,206],{},"package.json"," 中的\nscripts 加上一行 ",[41,209,210],{},"\"write\": \"node ./\u003Cname>.js\"","，在 ** 根目录 ** 新建 js 文件，名字随意，但是 wirte 好像不行。",[149,213,218],{"className":214,"code":216,"language":217,"meta":155},[215],"language-js","// \u003Cname>.js\nconst fs = require('fs');\n// 获取命令行传递的参数\nconst repo = process.argv [2],\n    number = process.argv [3],\n    token = process.argv [4];\n\nconst wirteD = function (response) {\n// 把 labels 转成我想要的形式，不需要可以不写\n    let tags = 'tags: [\"';\n    let labels = response.labels;\n    let text;\n    if (labels.length !== 0) {\n        labels = labels.map(ele => ele.name);\n        tags += labels.join('\",\"');\n        tags += '\"]\\n';\n    } else {\n        tags = '';\n    }\n// 拼接 frontmatter\n    text = `---\\ntitle: ${response.title}\\ndate: ${response.created_at}\\n${tags}---\\n${response.body}`\n\n    fs.writeFile(`./posts/${response.number}.md`, text, (err) => {\n        if (err) {\n            console.log(\"posts:\", err);\n            return\n        }\n        console.log(\"写入 posts 成功\")\n    });\n    fs.writeFile(`./index.md`, text, (err) => {\n        if (err) {\n            console.log(\"index:\", err);\n            return\n        }\n        console.log(\"写入 index 成功\")\n    });\n\n}\n// 获取 issue 信息\nconst url = `https://api.github.com/repos/${repo}/issues/${number}`;\nconst headers = new Headers({\n    'Accept': 'application/vnd.github+json',\n    'X-GitHub-Api-Version': '2022-11-28',\n    'Authorization': \"Bearer\" + token\n});\nfetch(url, {method: 'GET', headers}).then(res => res.json())\n    .catch(error => console.error('Error:', error))\n    .then(response => {\n// 这里就是调用写入的函数了，你可以打印获取到的信息，决定怎么写这个文件\n        wirteD(response);\n    });\n","js",[41,219,216],{"__ignoreMap":155},[52,221,222],{"id":222},"自动上传并且发布",[10,224,225],{},"这一步就要用到一些别人写好的 actions 了",[149,227,230],{"className":228,"code":229,"language":154,"meta":155},[152],"# .github/workflows/copyissue.yml\n# 这是 jobs 中的一个 job，注意缩进\nissue2page:\n  runs-on: ubuntu-latest\n  if: ${{ github.actor == vars.OWNER && github.event.action != 'closed' }}\n  steps:\n    # ref:\u003Cname > 填写你存放 md 文件的分支\n    - name: Checkout md\n      uses: actions/checkout@v3\n      with:\n        ref: md\n        fetch-depth: 0\n    # 用的是 pnpm，这里安装 pnpm 但不安装依赖\n    - uses: pnpm/action-setup@v2\n      name: Install pnpm\n      id: pnpm-install\n      with:\n        version: 7.27.0\n        run_install: false\n    # 获取 pnpm cache 存储路径\n    - name: Get pnpm store directory\n      id: pnpm-cache\n      shell: bash\n      run: |\n        echo \"STORE_PATH=$(pnpm store path)\" >> $GITHUB_OUTPUT\n    # 查找是否存在 cache，并且把 cache 还原，这个主要是加快依赖安装\n    - uses: actions/cache@v3\n      name: Setup pnpm cache\n      with:\n        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}\n        key: ${{ runner.os }}-pnpm-store-${{ hashFiles ('**/pnpm-lock.yaml') }}\n        restore-keys: |\n          ${{ runner.os }}-pnpm-store-\n    # 安装依赖\n    - name: Install dependencies\n      run: pnpm install\n    # 执行写入脚本\n    - name: Run Issue to Md Script\n      run: pnpm run write ${{github.repository}} ${{github.event.issue.number}} ${{secrets.GITHUB_TOKEN}}\n    # 存储修改\n    - name: Commit files\n      run: |\n        git config --local user.email \"github-actions [bot]@users.noreply.github.com\"\n        git config --local user.name \"github-actions [bot]\"\n        git add .\n        git commit -m \"auto copy /posts/${{github.event.issue.number}}.md\"\n    # branch 是要上传 md 文件的分支\n    - name: Push changes\n      uses: ad-m/github-push-action@master\n      with:\n        branch: md\n        github_token: ${{secrets.GITHUB_TOKEN}}\n\n    - name: Build\n      run: pnpm run build\n    # 发布 GitHub Pages，VitePress 官方提供的方案\n    - uses: actions/configure-pages@v2\n    - uses: actions/upload-pages-artifact@v1\n      with:\n        path: ./.vitepress/dist\n    - name: Deploy\n      id: deployment\n      uses: actions/deploy-pages@v1\n",[41,231,229],{"__ignoreMap":155},[34,233,234],{"id":234},"完成",[10,236,237],{},"到这里不出意外，不管是新建 issue 还是修改 issue 都会自动更新文件，上传分支。想要在关闭 issues 的时候删除文件，可以自己尝试一下，我现在还没写，然后\npages 页面也会更新。",{"title":155,"searchDepth":239,"depth":239,"links":240},2,[241,248,254],{"id":36,"depth":239,"text":36,"children":242},[243,245,246,247],{"id":54,"depth":244,"text":54},3,{"id":78,"depth":244,"text":78},{"id":92,"depth":244,"text":93},{"id":103,"depth":244,"text":103},{"id":125,"depth":239,"text":126,"children":249},[250,251,252,253],{"id":138,"depth":244,"text":138},{"id":160,"depth":244,"text":161},{"id":191,"depth":244,"text":191},{"id":222,"depth":244,"text":222},{"id":234,"depth":239,"text":234},"2023-03-21T06:36:16.000Z","前一阵子一直在捣鼓 VitePress，想着之前看到有人用 Github Issues\n来做静态页面的评论系统，于是就去了解了一下，目前这类项目有 gitalk、gitment\n以及 vssue。在这个过程中发现很早之前就有人开始用 Github Issues 来写博客。本人比较懒，我想着能不能把它和\nVitePress 结合起来再通过 GitHub Pages 实现嫖上加嫖，后经过搜索也确实有人这么干。",[258],"github",false,{},true,"/article/1",{"title":5,"description":256},"article/1",null,"MEYkWsCUb4kazWGQUFZAgauckL54WGkX4-NI1zGXiCA",1755235549205]