写点什么

完成 GitHub 个人主页设计,只需要这三步

发布于: 13 分钟前
完成GitHub个人主页设计,只需要这三步

以下文章来源于技术传播那些事儿 ,作者 Lilian Lee


如果你用过或经常使用 GitHub,可能已经发现有些人的 GitHub 主页长得有点儿不一样。


默认情况下,GitHub 个人主页默认从上到下依次展示 repositories、contributions、contribution activity。而有些人的主页在最上方展示的是自定义的内容,例如个人简介、贡献统计、常用编程语言等。


我也对自己的 GitHub 个人主页进行了一些自定义的内容设计,本文分享一下具体步骤,操作起来很简单。



如果你也想让自己的 GitHub 主页稍微那么与众不同一点点儿,不妨也试一试😎


假如你还没有 GitHub 账号,但想拥有 GitHub 个人主页,那么需要先去注册一个账号,再熟悉一下 Markdown 基本语法,然后就可以按照以下步骤开始啦!


本文结构 & 具体步骤如下:


  1. 新建一个以个人 GitHub ID 命名的仓库

  2. 编辑 README.md 文件,自定义内容

  3. 提交对 README.md 的修改,搞定


1 新建一个以个人 GitHub ID 命名的仓库


  1. 打开 GitHub 个人主页,例如我的主页是:https://github.com/lilin90

  2. 点击 Repositories > New,进入新建仓库页面。



  1. 设置仓库基本信息。


1)在 Repository name 处填写自己的 GitHub ID(例如我的是 lilin90)。GitHub 还会提醒你这是一个 special 的仓库🤓


2)按需填写仓库描述、勾选仓库访问权限、初始文件,我基本采用的默认选项。如果你想等自己编辑好内容再公开可见,也可以先选择 Private。


3)点击 Create repository,即完成仓库创建。



2 编辑 README.md 文件,自定义内容


根据自己的需求、想法、创意,自由发挥,编辑 README.md 文件。


可以直接在网页上编辑,也可以在本地编辑再 push 上去。我是直接在网页上编辑的,也方便 Preview changes 随时预览显示效果。


你会看到,初始的 README.md 里已经有了一些内容,给了一些可选的内容建议,你可以选择采用或不采用。


 1Here are some ideas to get you started: 2 3- 🔭 I’m currently working on ... 4- 🌱 I’m currently learning ... 5- 👯 I’m looking to collaborate on ... 6- 🤔 I’m looking for help with ... 7- 💬 Ask me about ... 8- 📫 How to reach me: ... 9- 😄 Pronouns: ...10- ⚡ Fun fact: ...
复制代码


接下来,分享下我都加了些什么内容:


  • 个人简介

  • GitHub 个人贡献数据统计

  • My side projects

  • Get in touch


怎么加呢?


普通的文字描述与链接,使用简单的 Markdown 语法即可。如果不了解 Markdown,搜一下,几分钟基本即可掌握其语法。


如果要插入 GitHub 个人贡献数据统计、常用编程语言、Pin 住某个仓库等,可参考 github-readme-stats 这个开源项目,有简洁明了的使用说明:


https://github.com/anuraghazra/github-readme-stats

▲ 截图自 github-readme-stats 项目


github-readme-stats 项目提供了很多主题,可根据个人喜好选择:


https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md


部分主题示例:


▲ 截图自 github-readme-stats 项目


如果要插入各种社交平台的联系方式或者个人博客等,可借助 Shields.io,用于展示 quality metadata badges for open source projects,链接如下:


https://shields.io/


▲ 截图自 shields.io


我在 Get in touch 部分插入的各种联系方式都用了 shields.io 链接,这样可以展示出 icon,好看一些,辨识度也高一些。


以下是我的 lilin90 仓库 README.md 文件的源代码,供参考:


1### Hi there 👋 2 3🤓 I'm Lilian Lee 李琳, a Content Strategist | Senior Technical Writer. 4 5I love photography 📷, traveling ✈️, cooking and enjoying delicious food 🥘 ([a Lv7 VIP at Dianping 大众点评](https://m.dianping.com/userprofile/121632876)). 6 7And I love fruit very much. 🍎 🍓 🥭 🥝 8 9![Lilian's GitHub stats](https://github-readme-stats.vercel.app/api?username=lilin90&show_icons=true&theme=tokyonight)101112### My side projects13141. Collecting and sharing awesome resources about technical communication (tech comm):1516    [![Awesome Technical Communication](https://github-readme-stats.vercel.app/api/pin?username=lilin90&repo=awesome-technical-communication&theme=radical)](https://github.com/lilin90/awesome-technical-communication)1718    > **Note:** Currently, this project includes tech comm resources in both English and Chinese.19202. Keep writing and publishing articles about tech comm (technical writing, stories, self-improvement, etc.) in Chinese:2122    - [知乎专栏:技术传播那些事儿](https://www.zhihu.com/column/tc-fun)23    - [微信公众号:技术传播那些事儿](https://res.cloudinary.com/lilian-photos/image/upload/v1585391408/cover/wechat-qrcode-scan-to-follow.jpg)242526### Get in touch2728[![lilianlee.me](https://img.shields.io/badge/lilianlee.me-orange)](https://lilianlee.me/)29[![GitHub](https://img.shields.io/badge/GitHub-grey?logo=github)](https://github.com/lilin90)30[![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?logo=linkedin)](https://www.linkedin.com/in/lilian-lee-54305777/)31[![Twitter](https://img.shields.io/badge/Twitter-white?logo=twitter)](https://twitter.com/lilianlee90/)32[![Instagram](https://img.shields.io/badge/Instagram-white?logo=instagram)](https://www.instagram.com/lilianlee.me/)33[![Pixabay](https://img.shields.io/badge/Pixabay-white?logo=pixabay)](https://pixabay.com/zh/users/lilian90-1322641/)3435[![知乎](https://img.shields.io/badge/知乎-white?logo=zhihu)](https://www.zhihu.com/people/liliansd)36[![微信公众号](https://img.shields.io/badge/微信公众号-white?logo=wechat)](https://res.cloudinary.com/lilian-photos/image/upload/v1585391408/cover/wechat-qrcode-scan-to-follow.jpg)37
复制代码

▲ 可左右滑动


编辑完成,可点击 Preview changes 预览下显示效果。不满意可以继续修改,直到满意为止。



3 提交对 README.md 的修改,搞定


如果对预览的显示效果比较满意了,接下来写一个 commit message,点击 Commit changes 提交即可。



提交成功后,就搞定啦。此时,再打开你的 GitHub 主页,就会显示你自定义的内容了🥳


我的 GitHub 主页自定义的内容显示效果如下:



是不是很简单的操作?感兴趣的小伙伴可以行动起来了😉


文章看完,还不过瘾?

更多精彩内容欢迎关注百度开发者中心公众号


发布于: 13 分钟前阅读数: 4
用户头像

关注百度开发者中心,收获一手技术干货。 2018.11.12 加入

汇聚百度所有对外开放技术、平台和服务资源,提供全方位支持,助力开发者加速成功,实现开发者、消费者和百度三方共赢。https://developer.baidu.com/

评论

发布
暂无评论
完成GitHub个人主页设计,只需要这三步