github怎么建立静态网站（教你如何三步完成GitHub个人主页设计）

谁哒偲 2023-06-13 20:54:53

收藏赞分享

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

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

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

github怎么建立静态网站（教你如何三步完成GitHub个人主页设计）(1)

温馨提醒：点击文中配图可放大查看清晰大图。

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

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

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

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

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

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

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

打开 GitHub 个人主页，例如我的主页是：

https://github.com/lilin90

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

github怎么建立静态网站（教你如何三步完成GitHub个人主页设计）(2)

3. 设置仓库基本信息。

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

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

3）点击 Create repository ，即完成仓库创建。

github怎么建立静态网站（教你如何三步完成GitHub个人主页设计）(3)

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

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

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

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

1Here are some ideas to get you started: 2 3- :telescope: I’m currently working on ... 4- :seedling: I’m currently learning ... 5- :dancers: I’m looking to collaborate on ... 6- I’m looking for help with ... 7- :speech_balloon: Ask me about ... 8- :mailbox: How to reach me: ... 9- :smile: Pronouns: ... 10- :zap: Fun fact: ...

接下来，分享下我都加了些什么内容：

个人简介
GitHub 个人贡献数据统计
My side projects
Get in touch

怎么加呢？

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

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

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

github怎么建立静态网站（教你如何三步完成GitHub个人主页设计）(4)

▲ 截图自 github-readme-stats 项目

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

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

部分主题示例：

github怎么建立静态网站（教你如何三步完成GitHub个人主页设计）(5)

▲ 截图自 github-readme-stats 项目

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

https://shields.io/

github怎么建立静态网站（教你如何三步完成GitHub个人主页设计）(6)

▲ 截图自 shields.io

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

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

1### Hi there :wave: 2 3 I'm Lilian Lee 李琳, a Content Strategist | Senior Technical Writer. 4 5I love photography :camera:, traveling :airplane:, cooking and enjoying delicious food ([a Lv7 VIP at Dianping 大众点评](https://m.dianping.com/userprofile/121632876)). 6 7And I love fruit very much. :apple: :strawberry: 8 9![Lilian's GitHub stats](https://github-readme-stats.vercel.app/api?username=lilin90&show_icons=true&theme=tokyonight) 10 11 12### My side projects 13 141. Collecting and sharing awesome resources about technical communication (tech comm): 15 16 [![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) 17 18 > **Note:** Currently, this project includes tech comm resources in both English and Chinese. 19 202. Keep writing and publishing articles about tech comm (technical writing, stories, self-improvement, etc.) in Chinese: 21 22 - [知乎专栏：技术传播那些事儿](https://www.zhihu.com/column/tc-fun) 23 - [技术传播那些事儿](https://res.cloudinary.com/lilian-photos/image/upload/v1585391408/cover/wechat-qrcode-scan-to-follow.jpg) 24 25 26### Get in touch 27 28[![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/) 34 35[![知乎](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 预览下显示效果。不满意可以继续修改，直到满意为止。

github怎么建立静态网站（教你如何三步完成GitHub个人主页设计）(7)