最简单的Github 首页美化教程 | 个性化定制你的 GitHub 首页

最新推荐文章于 2024-09-28 10:30:29 发布

残风UP

最新推荐文章于 2024-09-28 10:30:29 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： github html html5 javascript

本文链接：https://blog.youkuaiyun.com/HHHHHHHHII/article/details/131078430

这篇教程介绍了如何通过添加动画、统计徽章和社交媒体链接等元素来美化Github首页，使其更具个性化和吸引力。用户可以创建一个与自己用户名相同的仓库并编辑README.md文件，展示个人项目和统计数据，以吸引更多开发者和用户的关注。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、省流

导语：作为全球最大的代码托管平台之一，Github 的首页是展示开源项目的窗口。在这篇教程中，我们将向您展示如何美化您的Github 首页，使其更具个性化和吸引力。通过简单的操作，您可以让您的开源项目脱颖而出，吸引更多的开发者和用户的关注。让我们开始吧！

以下是我自己的github主页,没有花里胡哨的东西👇

二、获取组件 (以下是我主页的全部代码)

<h1 align="center"> <a href="https://sunguoqi.com/"> <img src="https://readme-typing-svg.herokuapp.com/?lines=console.log(%22Hello%2C%20World!%22);残风同学祝您今天愉快!&center=true&size=27"> </a> </h1>
<a href="https://github.com/HIM198/computer-vision-in-action">
    <img align="right" src="https://komarev.com/ghpvc/?username=HIM198&label=Visitors&color=red&style=flat&logo=github" alt="gtihub-visitors" />
</a>

## Hi, 👋  I'm <a href="http://welcome.voup.cn">Voup (残风)</a>

<img align="right" alt="GIF" src="https://media.giphy.com/media/LnQjpWaON8nhr21vNW/giphy.gif" width="84" title="Say HI"> <details><summary>(Click to expand) <em><b>I love connecting with different people</b> so if you want to <a href="https://voup.cn" >say <b>"hi" </b></a>, <b>I'll be happy to meet you more!</b> : )</em></summary>

<!--my introduction start-->
    
- 🔭 empty
- 🌱 empty
- 🤔 Only two things make me moved. 
  1. empty
  2. empty
- ❤️ I like eating 🍉, raising 🐓, playing 🏓, sleeping in 🛌 and 📺 [ACGN]
- 💬 Be free to ask me about anything [here](https://github.com/HIM198/HIM198/issues).

---
</details>
  
  ✨ 站主目前为江西财经大学大三生，东幻梦想工作室成员，小破站万粉UP主，喜欢编程，动画和剪辑。该站存放本人的一些代码程序，顺便记录自己的随想心得。欢迎大家来和我讨论技术上的问题


<!--my introduction end -->

<br>

<p align="center">
  <a href="https://github.com/HIM198" class="rich-diff-level-one">
    <img src="https://github-readme-stats.vercel.app/api?username=HIM198&title_color=333&text_color=777" alt="HIM198's Stats" >
    <!-- &hide=issues
    <img src="https://github-readme-stats.vercel.app/api?username=HIM198&hide=issues&title_color=333&text_color=777" alt="HIM198's Stats" >
    -->
  </a>
</p>

<p align="center">
  <a href= "https://voup.cn/wp-content/uploads/2023/06/voup-weixing.jpg" target="_blank" alt="WeChat" title="WeChat">
    <img src="https://img.icons8.com/ios-filled/50/000000/weixing.png" width="28px"/>
  </a>
  &emsp;
 
  <a href="https://space.bilibili.com/275728029" target="_blank" alt="Bilibili" title="Bilibili">
    <img src="https://user-images.githubusercontent.com/29084184/166415345-91925d37-c66f-448f-8d75-c8355fe0b692.png" width="30px"/>
  </a>
  &emsp;
  <a href= "https://voup.cn" target="_blank" alt="Instagram" title="Instagram">
    <img src="https://voup.cn/wp-content/uploads/2023/06/icons8-log-cabin-32.png" width="28px"/>
  </a>
  &emsp;
      <a href="https://blog.youkuaiyun.com/HHHHHHHHII" target="_blank" alt="优快云" title="优快云">
    <img src="https://img.icons8.com/material/48/000000/csdn.png" width="30px"/>
  </a>
  &emsp;
     <a href="https://www.zhihu.com/people/mei-yi-tian-wei-ming-tian-33-52" target="_blank" alt="Zhihu" title="Zhihu">
    <img src="https://img.icons8.com/material-two-tone/50/000000/zhihu.png" width="28px"/>
  </a>
  &emsp;
  <br><br>
  <strong>Check out my work below!</strong>
  <br><br>
  <a href="https://github.com/HIM198">
    <img src="https://badges.strrl.dev/visits/HIM198/HIM198?style=flat-square&color=black&logo=github">
  </a>
  <a href="https://github.com/HIM198">
    <img src="https://badges.strrl.dev/years/HIM198?style=flat-square&color=black&logo=github">
  </a>
  <a href="https://github.com/HIM198?tab=repositories">
    <img src="https://badges.strrl.dev/repos/HIM198?style=flat-square&color=black&logo=github">
  </a>
  <a href="https://gist.github.com/HIM198">
    <img src="https://badges.strrl.dev/gists/HIM198?style=flat-square&color=black&logo=github">
  </a>
  <a href="https://github.com/HIM198">
    <img src="https://badges.strrl.dev/commits/monthly/HIM198?style=flat-square&color=black&logo=github">
  </a>
</p>

<h2></h2>

<img align="right" alt="GIF" src="OctoCharmve/code.gif" width="343" height="220" title="Do what you like, and do it best!"> &nbsp;&nbsp;&nbsp;&nbsp;

### 🧠 Web and code

<img align="right" width="250" src="https://cdn.jsdelivr.net/gh/sun0225SUN/sun0225SUN/assets/images/hi.gif" />

<!-- START_SECTION:brain -->
* <a href='http://welcome.voup.cn' target='_blank'>empty</a> - 2023-05-21
* <a href='http://welcome.voup.cn' target='_blank'>empty</a> - 2023-05-21
* <a href='http://welcome.voup.cn' target='_blank'>empty</a> - 2023-05-21
* <a href='http://welcome.voup.c' target='_blank'>empty</a> - 2023-05-21
* <a href='http://welcome.voup.c' target='_blank'>empty</a> - 2023-05-20
<!-- END_SECTION:brain -->

</td></tr>

<tr><td>

### 🤾‍♂️ Funny Soul

<img align="right" width="250" src="https://cdn.jsdelivr.net/gh/sun0225SUN/sun0225SUN/assets/images/hi.gif" />

<!-- START_SECTION:douban -->
* <a href='https://www.bing.com/search?q=%E8%80%83%E7%A0%94%E8%AF%8D%E6%B1%87%E9%97%AA%E8%BF%87' target='_blank'>最近在学考研词汇闪过</a> 🌟🌟🌟🌟🌟 力荐- 2023-06-6
* <a href='https://www.bing.com/search?q=%E5%BC%A0%E5%AE%87%E8%80%83%E7%A0%94%E6%95%B0%E5%AD%A6&qs=n&form=QBRE&sp=-1&lq=0&pq=%E5%BC%A0%E5%AE%87%E8%80%83%E7%A0%94%E6%95%B0%E5%AD%A6&sc=10-6&sk=&cvid=69AADEED0BDA40CEAEA6681A39320017&ghsh=0&ghacc=0&ghpl=' target='_blank'>最近在学张宇考研数学</a> 🌟🌟🌟🌟🌟 力荐- 2023-03-07
* <a href='https://search.bilibili.com/all?keyword=%E7%8E%8B%E9%81%93%E8%80%83%E7%A0%94' target='_blank'>最近在学王道考研</a> 🌟🌟🌟🌟🌟 力荐- 2023-03-07
* <a href='http://movie.douban.com/subject/1292052/' target='_blank'>看完肖申克的救赎</a> 🌟🌟🌟🌟🌟 力荐- 2023-02-07


<!-- END_SECTION:douban -->

</td></tr>

<tr><td>

三、个性化你的 GitHub 首页

其实DIY Github 的首页很简单，我们只需要新建一个仓库名和自己 Github 用户名相同的仓库并且添加一个 README.md自述文件即可。

理论存在，实践开始。（新建一个同名仓库，并添加一个自述文件后确认）

进入仓库主页,添加一个新仓库

新建一个仓库名和自己 Github 用户名相同的仓库(此处我的文件已经存在,所以报错了)

四、最后

把上面的代码复制到README.file文件中,就可以看到初步的效果了

把HIM198修改为你自己的名字即可

例如下面代码中的HIM198

 <img src="https://github-readme-stats.vercel.app/api?username=HIM198&hide=issues&title_color=333&text_color=777" alt="HIM198's Stats" >