定制你的GitHub主页

前言

昨天花了点时间，美化了下的个人GitHub主页和我的网站首页，本文就跟你们分享下个人实现过程，欢迎各位感兴趣的开发者阅读本文。

在线体验

先跟你们展现下我最终实现的效果，在线体验地址：我的网站首页、GitHub主页。

效果图以下所示：

实现过程

接下来，咱们来看下具体的实现过程（为了方便起见，下属过程演示用的是个人小号）

建立仓库

首先，登陆你的GitHub帐号：

• 登陆后，建立一个和你用户名相同的仓库，以下所示。

• 填写仓库介绍、设置公开权限、添加README.md文件

• 最后点击 Create repository按钮，便可完成仓库建立。

界面美化

咱们建立完仓库后，进入本身的我的主页，即：github.com/你的用户名。

咱们能看到的页面以下所示，红框圈起来的部分就是咱们刚才建立仓库的README.md文件里的内容。

建立仓库时，默认在README.md文件里添加了：Hi there 👋。

所以，咱们只须要修改咱们刚才建立的仓库中的README.md文件中的内容，咱们的主页内容就会跟着更新。

• md文件中是支持html语法的，所以咱们能够按照本身的想法去设计页面。

• 因为考虑到读者程序员居多，设计灵感并非丰富，社区中有个开源仓库整理了一些比较好看的md主页设计，你们能够参考这些内容CV过来，修改修改就是本身的了，仓库地址：awesome-github-profile-readme。

• 个人主页设计中用到了项目展现卡片，这个也是个开源仓库提供的，仓库地址：github-readme-stats。

• 个人主页设计中还包含了内容收缩效果，这里用的是HTML5的<details><summary><summary/></details>标签。

• 社区粉丝展现模块，这里我想实现的效果须要写一些css样式，可是GitHub不支持，所以这里就只放了一张图片。

提取美化完的界面

当我把本身的GitHub主页美化完成后，我还想把这些效果搬到个人我的网站首页去。一开始想着，找个markdown转html的工具应该就行了，因而试了几个在线转换的，转出来的效果都不理想。

我看了看美化后的整个GitHub主页，越看越温馨，有了一个念头，我直接把整个主页扒下来，改一改，这样就完美的拿到了我须要的东西了🤓。

那么，如何把这个网站的内容扒下来，我想你们应该都有本身的一套方法，这里我说下个人方法吧：

• 右键 ---> 查看网页源代码
• 将源代码复制到编辑器里
• 把代码中的外链所有下载下来，放到项目文件夹里
• 替换外链为项目文件夹引入
• 因为扒下来的东西是html文件，所以能够写css样式，粉丝列表也就能够完美展示了。

最后，跟你们看下个人我的网站首页界面（PC端和移动端）：

代码地址

• GitHub主页代码地址
• 我的网站首页代码地址

写在最后

• 文中若有错误，欢迎在评论区指正，若是这篇文章帮到了你，欢迎点赞和关注😊
• 本文首发于掘金，未经许可禁止转载💌