GitHub教程-自定义个人页制作

GitHub是全球最大的代码托管平台,除了存放代码,它还允许用户个性化定制自己的主页,展示个人特色、技能和项目。本教程旨在向GitHub用户展示如何制作个性化主页,同时,介绍了GitHub Actions的应用,可以自动化更新主页内容。通过本教程,GitHub用户将学会如何打造独具个性的GitHub个人主页,吸引更多关注和合作机会。具体代码请参阅文末。

一、自定义GitHub个人页

自定义个人页面如下:

readme001 1024x573 - GitHub教程-自定义个人页制作

实现方式很简单,我们创建一个和自己账户同名的仓库即可。
如下图:

readme002 1024x541 - GitHub教程-自定义个人页制作

  • .github/workflows路径下有一些yml文件,在yml文件里编写定时任务的逻辑代码,我们主要借助这些定时任务完成对github-metrics里图片的更新(因为里面的图片都是根据GitHub账户的当天数据生成的,所以需要用定时任务每天更新)
  • assets/images里是静态图片,主要是一些样式(比如分割线)
  • 再下面github-metrics和profile-snake-contrib都是存储由定时任务不断更新的数据图片。
  • readme.md就是我们的个人页的前端页面。

readme003 1 1024x617 - GitHub教程-自定义个人页制作

图中标注的模块对应我们的个人信息图片,只需要在readme.md里用图片标签引用就可以展示。因为我们每天都会操作GitHub,因此这些数据会经常变化,我们下面就需要写一个定时任务自动去获取最新的数据,更新这个个人信息的图片。


二、自动更新个人页内容

为了避免手动更新我们的个人页数据,我们使用GitHub的Action组件来实现定时任务自动更新我们个人页里的图片数据。

1、编写定时任务yml文件

yml文件里编写我们定时任务的代码,逻辑通常都是定时调用API,获取最新的图片并下载保存,替换我们原先的图片。

readme004 1 1024x667 - GitHub教程-自定义个人页制作

以更新个人信息图片代码为例:
(具体代码在文末,需要复制的可以跳转到文末查看)

readme005 1 - GitHub教程-自定义个人页制作

这里,我们看到有一个secret.METRICS_TOKEN的密钥,这个密钥需要预先去设置。是从我们仓库的设置里读取的,它。

2、生成个人权限码<access_token(classic)>

我们在GitHub账户的设置里进入[开发者设置],然后选择个人权限码下面的Tokens(classic),点击生成,生成的token只有在刚生成时可以看到,请本地保存好,一会要用到。

readme006 1 1024x446 - GitHub教程-自定义个人页制作

3、项目内配置权限码

在自定义个人页的同名项目仓库里,点击设置>安全>Actions,创建新的仓库密钥,将我们刚刚生成的密钥粘入。注意,我们在这里创建的仓库密钥的命名要和我们在yml文件里写的相同。

readme007 1 1024x690 - GitHub教程-自定义个人页制作

4、运行测试

配置好token之后,开发工作就完成了,下面我们可以去Actions的All workflows里测试一下。

readme008 1 1024x397 - GitHub教程-自定义个人页制作

如图,测试成功!

readme009 1 1024x485 - GitHub教程-自定义个人页制作

我们的自定义个人页的个人信息模块至此也便制作完成了。


三、常用的个人页组件

1、贪吃蛇

根据提交图生成的动画模块,小蛇会根据提交次数的从小到大吃掉所有有色方块。

image - GitHub教程-自定义个人页制作

代码如下(注意把用户名换成自己的):

① readme.md
​<!-- Snake Code Contribution Map 贪吃蛇代码贡献图 -->
<picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/Damon-Liu-code/Damon-Liu-code/profile-snake-contrib/github-contribution-grid-snake-dark.svg" /><source media="(prefers-color-scheme: light)" srcset="https://cdn.jsdelivr.net/gh/Damon-Liu-code/Damon-Liu-code/profile-snake-contrib/github-contribution-grid-snake.svg" /><img alt="github-snake" src="https://cdn.jsdelivr.net/gh/Damon-Liu-code/Damon-Liu-code/profile-snake-contrib/github-contribution-grid-snake-dark.svg" />
</picture>
② .github/workflows/snake.yml
name: Snake Contribon:schedule:- cron: "0 0 * * *"# allows to manually run the job at any timeworkflow_dispatch:jobs:generate:runs-on: ubuntu-latesttimeout-minutes: 10steps:- name: generate github-contribution-grid-snake.svguses: aelassas/snk/svg-only@mainwith:github_user_name: ${{ github.repository_owner }}outputs: |dist/profile-snake-contrib/github-contribution-grid-snake.svgdist/profile-snake-contrib/github-contribution-grid-snake-dark.svg?palette=github-dark- name: push github-contribution-grid-snake.svg to the output branchuses: crazy-max/ghaction-github-pages@v3.1.0with:target_branch: mainbuild_dir: distkeep_history: trueenv:GITHUB_TOKEN: ${{ secrets.METRICS_TOKEN }}
③ 创建保存图片的文件夹

image 1 - GitHub教程-自定义个人页制作

2、基础资料

① readme.md
​<!-- metrics 基础资料 -->
<img src="https://cdn.jsdelivr.net/gh/Damon-Liu-code/Damon-Liu-code/github-metrics/base.svg" />
② .github/workflows/metrics.yml
# 此开源项目地址 https://github.com/lowlighter/metricsname: GitHub Metricson:schedule:- cron: "0 0 * * *"# https://docs.github.com/zh/actions/using-workflows/events-that-trigger-workflows#scheduleworkflow_dispatch:jobs:github-metrics:runs-on: ubuntu-lateststeps:# 基础信息(顺带了几个小插件)- name: baseuses: lowlighter/metrics@latestwith:filename: github-metrics/base.svg# Your GitHub tokentoken: ${{ secrets.METRICS_TOKEN }}# Optionsuser: Damon-Liu-codetemplate: classicconfig_timezone: Asia/Shanghaibase: "header, activity, community, repositories"# 此插件为文档中的 <img draggable="false" role="img" class="emoji" alt="🧮" src="https://s.w.org/images/core/emoji/14.0.0/svg/1f9ee.svg"> Repositories trafficplugin_traffic: yes# 此插件为文档中的 <img draggable="false" role="img" class="emoji" alt="👨‍💻" src="https://s.w.org/images/core/emoji/14.0.0/svg/1f468-200d-1f4bb.svg"> Lines of code changedplugin_lines: yes# 此插件为文档中的 <img draggable="false" role="img" class="emoji" alt="🙋" src="https://s.w.org/images/core/emoji/14.0.0/svg/1f64b.svg"> Introductionplugin_introduction: yes# 此插件为文档中的 <img draggable="false" role="img" class="emoji" alt="🎫" src="https://s.w.org/images/core/emoji/14.0.0/svg/1f3ab.svg"> Gistsplugin_gists: yes# 此插件为文档中的 <img draggable="false" role="img" class="emoji" alt="💫" src="https://s.w.org/images/core/emoji/14.0.0/svg/1f4ab.svg"> Star listsplugin_starlists: yesplugin_starlists_limit_repositories: 2plugin_starlists_languages: yesplugin_starlists_limit_languages: 8plugin_starlists_only: Awesome
③ 创建保存图片的文件夹

image 2 - GitHub教程-自定义个人页制作

四、比较优秀的自定义个人页(长期更新)

小孙同学:我在学习这快的时候很大程度参考了孙大佬的代码,这里致谢!
Damon:我自己的小破站。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/226526.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker 使用详解看了挺开悟的

使用docker ps命令可以查看所有正在运行中的容器列表&#xff0c; 使用docker inspect命令我们可以查看更详细的关于某一个容器的信息。 $ docker inspect 容器id/image[{"Id": "b57ee6bbf1f4f62a5aba6a73acd53b0f9b8ec542e1f9fa9213159ffd3828c7b4",&q…

[Angular] 笔记 8:list/detail 页面以及@Input

1. list 页面 list/detail 是重要的 UI 设计模式。 vscode terminal 运行如下命令生成 detail 组件&#xff1a; PS D:\Angular\my-app> ng generate component pokemon-base/pokemon-detail --modulepokemon-base/pokemon-base.module.ts CREATE src/app/pokemon-base/p…

Mybatis行为配置之Ⅲ—其他行为配置项说明

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL Mybatis配置入门 Mybatis行为配置之Ⅰ—缓存 Mybatis行为配置…

ChatGPT在地学、GIS、气象、农业、生态、环境等领域中的高级应用

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

华为云服务器yum无更新问题解决

买了一个华为云服务器&#xff0c;系统是银河麒麟v10&#xff0c;cpu选择的事华为的坤鹏。 买了一段时间后&#xff0c;使用yum更新&#xff0c;发现没有任何更新包。 又过了一段时间&#xff0c;还是没有更新包。 通过漏扫设备&#xff0c;发现系统内存在较多存在漏洞的软件…

tsconfig.app.json文件报红:Option ‘importsNotUsedAsValues‘ is deprecated...

在创建vue3 vite ts项目时的 tsconfig.json&#xff08;或者tsconfig.app.json&#xff09; 配置文件经常会报一个这样的错误&#xff1a; 爆红&#xff1a; Option ‘importsNotUsedAsValues’ is deprecated and will stop functioning in TypeScript 5.5. Specify compi…

gin框架使用系列之四——json和protobuf的渲染

系列目录 《gin框架使用系列之一——快速启动和url分组》《gin框架使用系列之二——uri占位符和占位符变量的获取》《gin框架使用系列之三——获取表单数据》 上篇我们介绍了如何获取数据&#xff0c;本篇我们介绍一下如何返回固定格式的数据。 一、返回JSON数据 在web开发中…

大创项目推荐 深度学习OCR中文识别 - opencv python

文章目录 0 前言1 课题背景2 实现效果3 文本区域检测网络-CTPN4 文本识别网络-CRNN5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习OCR中文识别系统 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;…

红队打靶练习:DIGITALWORLD.LOCAL: FALL

目录 信息收集 1、arp 2、netdiscover 3、nmap 4、nikto 5、whatweb 6、小结 目录探测 1、gobuster 2、dirsearch WEB 80端口 /test.php 文件包含漏洞 SSH登录 提权 get root and flag 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interfa…

Qt/C++音视频开发61-多屏渲染/一个解码渲染到多个窗口/画面实时同步

一、前言 多屏渲染就是一个解码线程对应多个渲染界面&#xff0c;通过addrender这种方式添加多个绘制窗体&#xff0c;我们经常可以在展会或者卖电视机的地方可以看到很多电视播放的同一个画面&#xff0c;原理应该类似&#xff0c;一个地方负责打开解码播放&#xff0c;将画面…

Android下载gradle失败解决方法

1、在gradle-wrapper.properties文件中查看自己需要下载gradle什么版本的包和zip路径&#xff08;wrapper/dists&#xff09;。 2、在setting中查看Gradle的保存路径&#xff0c;如下图&#xff1a;C:/Users/Administrator/.gradle&#xff0c;加上第一步的zip路径得到下载grad…

SQL Server 存储过程 触发器 事务处理

CSDN 成就一亿技术人&#xff01; 难度指数&#xff1a;* * CSDN 成就一亿技术人&#xff01; 目录 1. 存储过程的作用 创建存储过程 2. 触发器 触发器的种类 insert触发器 update触发器 delete触发器 测试 3. 事务 开始事务 提交事务 回滚事务 举个实例 在 SQ…

分享好用的chatgpt

1.在vscode中&#xff0c;点击这个&#xff1a; 2.搜索&#xff1a;ChatGPT - 中文版&#xff0c;个人觉得这个更好用&#xff1a; 3.下载完成之后&#xff0c;左侧会多出来这个&#xff1a; 点击这个图标就能进入chatgpt界面了 4.如果想使用tizi访问国外的chatgpt&#xf…

.Net FrameWork总结

.Net FrameWork总结 介绍.Net公共语言运行库CLI的组成.NET Framework的主要组成.NET Framework的优点CLR在运行期管理程序的执行&#xff0c;包括以下内容CLR提供的服务FCL的组成 或 服务&#xff08;这个其实就是我们编码时常用到的类库&#xff09;&#xff1a;&#xff08;下…

使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果

1.首先安装echarts 安装命令&#xff1a;npm install echarts --save 2.页面引入 echarts import * as echarts from echarts; 3.代码 <template> <div id"main" :style"{ width: 400px, height: 500px }"></div> </template> …

认识数据的规范化

关系模型满足的确定约束条件称为范式&#xff0c;根据满足约束条件的级别不同&#xff0c;范式由低到高分为 1NF&#xff08;第一范式&#xff09;、2NF&#xff08;第二范式&#xff09;、3NF&#xff08;第三范式&#xff09;、BCNF&#xff08;BC 范式&#xff09;、4NF&…

Vue使用Element table表格格式化GMT时间为Shanghai时间

Vue使用Element表格格式化GMT时间为Shanghai时间 说明 阿里巴巴java开发规范规定&#xff0c;数据库必备gmt_create、gmt_modified字段&#xff0c;使用的是GMT时间&#xff0c;在中国使用必然要转换我中国时间。 在阿里巴巴的Java开发规范中&#xff0c;要求每个表都必备三…

T-Dongle-S3开发笔记——创建工程

创建Hello world工程 打开命令面板 方法1&#xff1a;查看->命令面板 方法2&#xff1a;按F1 选择ESP-IDF:展示示例项目 创建helloworld 选择串口 选择芯片 至此可以编译下载运行了 运行后打印的信息显示flash只有2M。但是板子上电flash是W25Q32 4MB的吗 16M-bit

B3842 起动电流小,工作频率 可达500kHz的Dc-Dc开关电源芯片

B3842/43/44是专为脱线和Dc-Dc开关电源应用设计的恒频电流型Pwd控制器内部包含温度补偿精密基准、供精密占空比调节用的可调振荡器、高增益混放大器、电流传感比较器和适合作功率MOST驱动用的大电流推挽输出颇以及单周期徊滞式限流欠压锁定、死区可调、单脉冲计数拴锁等保护电路…

BDD - Python Behave 配置文件 behave.ini

BDD - Python Behave 配置文件 behave.ini 引言behave.ini配置参数的类型配置项 behave.ini 应用feature 文件step 文件创建 behave.ini执行 Behave查看配置默认值 behave -v 引言 前面文章 《BDD - Python Behave Runner Script》就是为了每次执行 Behave 时不用手动敲一长串…