先看一下成品
贴一个github上一个男人的主页
下面这个是我的
果然大佬的主页就是简洁又不缺乏内容🐶
下面看一下具体怎么做吧👇
具体步骤
1、新建github代码仓库
- 登录 GitHub ,并创建与github用户名同名的代码仓库,网页会自动提示这是一个special仓库,用来创建 profile。
- 勾选 Add a README file,如下图
- 点击 “Create Repository”
2、美化主页
2.1、直接在github页面编辑 README.md
- 默认带有的注释的内容 markdown 文件通过
进行注释
- 预览效果
github 提供了一些api用来统计信息,以svg的形式展示数据信息,数据是实时更新的。这让我想起来以前工作中跟阿里国际站对接,需要调用阿里的接口生成商家信保名片,跟这个类似,不过当时阿里没有这样做,忘记了是出于什么考虑了,采用的是服务器截图的方式,非动态的。下面看一下效果,以及怎么设置👇
2.2、仓库状态统计
设置方式形如:

下面展示仓库状态统计的设置,需要把username
修改成自己的GitHub名字。通过给url
增加参数的形式,可以给svg设置theme,也可以采用默认的(白底);通过layout
设置外观布局

类似的,继续设置如下内容👇
2.3、主页访问量统计

3.4、常用语言占比统计

也可以采用另一种形式展示GitHub相关的数据
https://badgen.net/badge/:subject/:status/:color?icon=github ──┬── ───┬─── ──┬─── ──┬── ────┬────── │ │ │ │ └─ Options (label, list, icon, color) │ │ │ │ │ TEXT TEXT RGB / COLOR_NAME ( optional ) │ "badge" - default (static) badge generator eg: https://badgen.net/badge/Swift/4.2/orange
2.5、添加徽章
看下下面这哥们的主页,有很多icon一样的技能标志,感觉挺酷,也想安排一下,继续往下看吧
我用的是 shields.io制作的
输入 label、message、color,点击 make badge 即可制作完成(label不是必须的)
如:
https://img.shields.io/badge/Lang-JavaScript-yellowgreen
还可以往badge里面增加logo
, 配置背景色,logo颜色等等,如下:
https://img.shields.io/badge/JavaScript-000000?logo=JavaScript&logoColor=FFCA28
👉 推荐:Awesome Badges,里面有各种想要的配置,logo图片等等
看到此处,相信你已经懂得怎么美化自己的GitHub主页了。
其实,还可以通过在线的自动化配置生成 README.md , 感兴趣的来这里 profilinator
最后
后面有时间了结合GitHub Action继续完善。