Daily dev

前言

某次闲逛Github,发现优弧的主页上有一个面板,很感兴趣,研究了下,遂记录

想要优弧Github主页同款DevCard?看看这个!

想要优弧Github主页同款DevCard?看看这个!

正文

Daily dev介绍

Daily.dev是一个编程新闻网站,主要提供最新的编程相关新闻、技能教程、开发者工具、开源项目和社区资源。它涵盖了多种编程语言和领域,如前端开发、后端开发、数据科学、人工智能和游戏开发等。

DevCard是Daily.dev提供的一个API,依照官方的说法:”DevCard is your developer ID. It showcases your achievements to the world.“,翻译过来是:DevCard是你的开发者ID。它向国际展现了你的成果。

教程

前置准备

注册

1.进入Daily.dev(点击链接可进入:daily.dev | The Homepage Developers Deserve)

想要优弧Github主页同款DevCard?看看这个!

2.点击左下角的rank图标

想要优弧Github主页同款DevCard?看看这个!

3.(可选)点击sign up,假如没有注册能够先注册,有账号的话再点击sign up后点击下方的Log in进行登录,这儿不进行演示

想要优弧Github主页同款DevCard?看看这个!

想要优弧Github主页同款DevCard?看看这个!

生成面板

在登陆网站后,返回主页,再次点击左下角的rank图标,这时弹出的窗口中Generate图标应该能够点击了,依照图片顺次点击:Generate ——> Generate Now 即可生成专归于你的DevCard

想要优弧Github主页同款DevCard?看看这个!

想要优弧Github主页同款DevCard?看看这个!

想要优弧Github主页同款DevCard?看看这个!

正文

打开GitHub的主页,登录你的账号,新建一个以你的姓名命名的库房(有的话则不必新建)

如图:

想要优弧Github主页同款DevCard?看看这个!

右边有个小提示框,提示咱们能够修正咱们的README.md,修正的内容会展现在Github的个人主页

想要优弧Github主页同款DevCard?看看这个!

返回生成DevCrad的网站,点击Copy code,随后返回刚刚咱们创立的库房,点击Edit README,并依照下面图片的提示输入并提交

想要优弧Github主页同款DevCard?看看这个!

想要优弧Github主页同款DevCard?看看这个!

回到你的GitHub个人主页,你应该能看到dev daily的卡片了。(我的主页之前就有一些内容,所以你的主页看起来可能和我的不一样)

想要优弧Github主页同款DevCard?看看这个!
假如你想要自动更新卡片的内容,能够继续看接下来的内容

进阶:Github Action

这儿咱们会用到Github Action

GitHub Actions 是 GitHub 提供的一种在云端执行工作流程的服务,能够在事情触发时自动执行任务。这些任务能够是编译代码、运转测验、发布应用程序等。GitHub Actions 能够让你轻松地在不同渠道和环境中构建、测验和部署代码。

在这儿,咱们会用到GitHub Action来自动更新和下载DevCard到咱们的库房

第一步:创立workflow

打开前文创立好的库房,顺次点击Action ——> New workflow ——> set up a workflow yourself

想要优弧Github主页同款DevCard?看看这个!

想要优弧Github主页同款DevCard?看看这个!

第二步:编写workflow代码

根据图片填写相关内容,文件名建议填写devcard便利以后查找修正,文件内容能够参考我在下面给出的代码进行修正,修正完成后能够点击Start commit提交修正:

想要优弧Github主页同款DevCard?看看这个!

name: DevCard
permissions:
  contents: write
on:
  workflow_dispatch:
  push:
    branches:
      - main
  schedule:
    - cron: "0 0 * * *"
jobs:
  devcard:
    runs-on: ubuntu-latest
    steps:
      - name: devcard
        uses: dailydotdev/action-devcard@2.0.2
        with:
          devcard_id: ${{ secrets.DEVCARD_ID }}

Tips 这儿不能直接张贴代码,你需要检查并修正代码中的branches的值是否为你的库房的主分支,这个值能够在你的主页的分支处看到,假如是main则无需修正代码

想要优弧Github主页同款DevCard?看看这个!
另外,代码中默许是每天0点执行,假如你想要修正执行时间,能够合作在线Cron表达式生成器修正cron字段,这儿不做演示。

第三步:添加Sercert

回到devcard的生成页面,复制图中蓝色部分的值(就是png图片的姓名)

想要优弧Github主页同款DevCard?看看这个!

回到你的主页库房,依照下图顺次点击:

想要优弧Github主页同款DevCard?看看这个!

Name字段填入DEVCARD_ID,Secret填入你刚刚复制的值,填入后点击Add Secret

想要优弧Github主页同款DevCard?看看这个!

你能够把下面的代码刺进到库房的README.md,替换掉之前的代码

<a href="https://app.daily.dev/DailyDevTips"><img src="https://github.com/okatu-loli/okatu-loli/blob/master/devcard.svg" width="400" alt="QianShi's Dev Card"/></a>

你有必要修正href、okatu-loli/okatu-loli和alt部分,使其成为你的库房称号。

现在你的GitHub个人资料上有一个自动更新的DevCard。

最终

创造不易,假如你觉得本文对你有帮助,能够点赞、谈论、保藏,你的支持是我最大的动力,下次更新会更快!

想要优弧Github主页同款DevCard?看看这个!
想要优弧Github主页同款DevCard?看看这个!
想要优弧Github主页同款DevCard?看看这个!

最终,祝我们兔年高兴!