前言
昨天花了点时间，美化了下的我的GitHub主页和个人网站首页，本文就跟大家分享下我的实现过程，欢迎各位感兴趣的开发者阅读本文。
在线体验
先跟大家展示下我最终实现的效果，在线体验地址：个人网站首页、GitHub主页。
效果图如下所示：
image.png
实现过程
接下来，我们来看下具体的实现过程（为了方便起见，下属过程演示用的是我的小号）
创建仓库
首先，登录你的GitHub账号：
- 登录后，创建一个和你用户名相同的仓库，如下所示。
image.png
- 填写仓库介绍、设置公开权限、添加README.md文件
image.png
- 最后点击
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端和移动端）：
image.png
image.png
代码地址
- GitHub主页代码地址
- 个人网站首页代码地址
写在最后
- 公众号无法外链，如果文中有链接，可点击下方阅读原文查看😊
