github 和 gitlab 之自定义首页样式

个性首页

• 相信很多小伙伴在逛 github 和 gitlab 的时候
• 会发现很多开发者的首页异常的炫酷，如 https://github.com/tinygeeker

制作步骤

• 是不是立马想拥有一个属于自己的高大上主页了
• 从上图中我们可以看出，其实它展示的一个 readme 里面的内容而已
• 而这个 readme 的前面路径，你会发现是跟你帐号名称是一样的
• 步骤 右上角+号 ► New repository ► 设置仓库信息
• 这个仓库名称一定要跟你的帐号名一模一样
• 仓库必须公开
• 仓库里面必须有一个 readme 文件

修改内容

• 接下来，我们只需要通过命令 git clone 仓库地址 拉到本地修改 readme 中的内容即可
• 可以看到首页右边有个统计自己仓库的图表
• 这是国外一个大神开发的，我们只需要引入，将其中的 username 改成自己的即可
• 更多设置，可以参考我的个人主页设置 https://github.com/tinygeeker

  
  Hi there! I'm tinygeeker~ 
  



  

    
  




* Read more about my [CSDN](https://tinygeeker.blog.csdn.net/)
* Follow me on [Twitter](https://twitter.com/tinygeeker), [掘金](https://juejin.cn/user/2858385963749223) or [知乎](https://www.zhihu.com/people/tinygeeker)



![Typing SVG](https://readme-typing-svg.herokuapp.com?font=DynaPuff&size=20&pause=1000&color=9999FF¢er=true&vCenter=true&width=500&height=22&lines=A+passionate+web+developer+based+in+Nanjing.++%F0%9F%91%8B)



![](https://img.shields.io/badge/-Nodejs-43853d?style=flat-square&logo=Node.js&logoColor=white) ![](https://img.shields.io/badge/-WebRTC-008000?style=flat-square&logo=WebRTC&labelColor=90EE90&color=fff) ![](https://img.shields.io/badge/-JavaScript-e5cd0c?style=flat-square&logo=JavaScript&labelColor=f7df1e&logoColor=000) ![](https://img.shields.io/badge/-TypeScript-3178C6?style=flat-square&logo=TypeScript&logoColor=white&color=blue) ![](https://img.shields.io/badge/-Vue.js-29beb0?style=flat-square&logo=vue.js&labelColor=ffffff&color=4FC08D) ![](https://img.shields.io/badge/-React-29beb0?style=flat-square&logo=React&labelColor=ffffff&color=61DAFB) ![](https://img.shields.io/badge/-WebPack-1C78C0?style=flat-square&logo=WebPack&logoColor=white) ![](https://img.shields.io/badge/-Electron-white?style=flat-square&logo=electron&logoColor=white&color=47848F) ![](https://img.shields.io/badge/-Three.js-000000?style=flat-square&logo=Three.js) ![](https://img.shields.io/badge/-MiniProgram-008000?style=flat-square&logo=WeChat&labelColor=fff&color=07C160) ![](https://img.shields.io/badge/-NPM-CB3837?style=flat-square&logo=npm&logoColor=white) ![](https://img.shields.io/badge/-Github_Actions-2088FF?style=flat-square&logo=github-actions&logoColor=white) [![](https://img.shields.io/badge/-Gist-black?style=flat-square&logo=GitHub&labelColor=blue&color=fff&logoColor=fff)](https://gist.github.com/tinygeeker) ![](https://img.shields.io/badge/-Tampermonkey-black?style=flat-square&logo=Tampermonkey&labelColor=black&color=00485B) ![](https://img.shields.io/badge/-KaliLinux-white?style=flat-square&logo=KaliLinux&logoColor=white&color=blue) ![](https://img.shields.io/badge/-MySQL-white?style=flat-square&logo=MySQL&logoColor=white&color=fff&labelColor=4479A1) ![](https://img.shields.io/badge/-CodePen-white?style=flat-square&logo=CodePen&logoColor=white&color=000) ![](https://img.shields.io/badge/-Jenkins-white?style=flat-square&logo=Jenkins&labelColor=D24939&color=white&logoColor=white) ![](https://img.shields.io/badge/-Docker-white?style=flat-square&logo=Docker&labelColor=2496ED&color=2496ED&logoColor=white) ![](https://img.shields.io/badge/-Bilibili-white?style=flat-square&logo=Bilibili&labelColor=00A1D6&logoColor=white)



##### GitHub status

![](https://github-readme-activity-graph.cyclic.app/graph?username=tinygeeker&theme=github)