4

如何将个人的GitHub主页配置的优雅好看

 2 years ago
source link: https://wiki.eryajf.net/pages/d195b4/#%E5%8D%9A%E5%AE%A2%E6%9C%80%E8%BF%91%E6%9B%B4%E6%96%B0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

我很早注意到，GitHub当中，你创建一个与自己账号同名的仓库，然后这个仓库的内容会展示在个人主页，换言之，你可以通过装扮这个仓库，来实现个人主页的装扮。

曾经也做过一些装扮的事情，只是很多内容还停留在表面，以至于主页看起来比较简单，最近对主页进行了整体的改造，过程中也遇到不少好的经验，这篇文章就是对这些内容的总结整理，看完之后，你也可以快速构建一个美观简洁的个人主页，这是一张重要的个人名片，快装扮起来吧。

我的个人主页：https://github.com/eryajf (opens new window)

题外话：在折腾主页的过程中，我发现一个现象，国内的程序员折腾个人主页的比例要远远小于国外，也许，正是因为国内程序员都被困在996当中而失去了生活的情趣罢，再一次，旗帜鲜明地反对996。

# 展示

b67354a1cd3df47e.png

# 参考

我们制作个人主页的第一步，在没有思路的时候，首先可以做的，就是参考别人的做法，先从模仿开始，然后再从模仿的过程中，逐渐摸索出能够展示自己个性的一套主页。

# 折腾

接下来我讲下个人主页的内容是如何制作的，以给想要参考的同学一个思路。

# 开头的动图

效果如下：

68747470733a2f2f726561646d652d747970696e672d7376672e6865726f6b756170702e636f6d3f666f6e743d48616e646c65652663656e7465723d74727565267643656e7465723d747275652677696474683d353030266865696768743d3630266c696e65733d5468652b74726176656c65722b6f6674656e2b617272697665732532432b616e642b7468652b646f65722b6f6674656e2b73756363656564732e

此功能基于如下项目构建：

你可以在在线工具中制作个人想要展示的内容。

# 内容与构图

前边内容就不多说了，每个人根据自己的实际想法撰写即可，图片也是基于HTML的右置语法实现。如下：

image_20220626_200153.gif?raw=true

# 欢迎来访部分

此处内容分两部分，一个是访问次数计数，一个是其他图标内容的展示。

访问次数功能基于如下项目构建：

后边的图标内容根据如下网站提供能力构建：

# 语言工具

语言工具部分配置也比较简单，不过想要搜集齐自己的语言工具包，也是需要耗费一番功夫的。

其中图标功能基于如下项目配置：

如果有图标在里边搜索不到，可以自己去对应语言或者工具的官网寻找icon图标。

# 状态汇总统计

状态汇总建议你不必过多纠结，直接参照我的配置，将owner名字替换就OK了：

![二丫讲梵's github stats](https://github-readme-stats.vercel.app/api?username=eryajf&hide_title=false&hide_border=true&show_icons=true&include_all_commits=true&line_height=20&bg_color=0,EC6C6C,FFD479,FFFC79,73FA79&theme=graywhite&locale=cn)![主要使用语言](https://github-readme-stats.vercel.app/api/top-langs/?username=eryajf&hide_title=false&hide_border=true&layout=compact&bg_color=0,73FA79,73FDFF,D783FF&theme=graywhite&locale=cn)

![profile](https://github-profile-trophy.vercel.app/?username=eryajf&theme=algolia&column=8)

其中状态汇总基于如下项目构建：

奖杯功能基于如下项目构建：

# 动态贪吃蛇

首先看配置内容：

![snake](./assets/github-contribution-grid-snake.svg)

引用了仓库本地的一个svg文件，此文件借助一个GitHub Actinos每天自动生成一次。

配置如下：

name: Generate Snake
on:
  schedule:
    - cron: "0 0 * * *"
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/[email protected]
      - name: Generate Snake
        uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: ${{ github.repository_owner }}
          gif_out_path: ./assets/github-contribution-grid-snake.gif
          svg_out_path: ./assets/github-contribution-grid-snake.svg
      - name: Push to GitHub
        uses: EndBug/[email protected]
        with:
          branch: master
          message: "Generate Contribution Snake"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

此功能基于如下项目构建：

# 提交动态折线图

配置内容如下：

![](https://activity-graph.herokuapp.com/graph?username=eryajf&theme=github)

如果你觉得我用的样式可以，那么直接替换username就可以生成你自己的。

此功能基于如下项目构建：

# 类似GitHub Pinned的功能

GitHub Pinned 是一个能够将项目钉在个人主页的功能，效果如下：

f11bfc8899f98c6e.png

但有一个问题，此功能只允许我们添加6个项目钉在这里。

通过如下配置，我们可以将更多自己想要钉住的项目钉在个人主页：

[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=eryajf&repo=ldapctl&show_owner=true&&theme=cobalt)](https://github.com/eryajf/ldapctl)

此功能基于如下项目构建：

# 博客最近更新

此处功能是基于GitHub Actions实现，每个小时运行一次，通过订阅博客的RSS将博客最近更新的几篇文章列举在此：

GitHub Actions配置如下：

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 * * * *'
  workflow_dispatch:
jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Pull in eryajf posts
        uses: gautamkrishnar/blog-post-workflow@v1
        with:
          max_post_count: 6
          committer_username: "eryajf"
          committer_email: "[email protected]"
          feed_list: "https://wiki.eryajf.net/rss.xml"
          template: "$newline- $randomEmoji(💯,🔥,💫,🚀,🌮,📝,🥳,💻,🧰,🏊,🥰,🧐,🤓,😎,🥸,🤩,🤗,🤔,🫣,🤭,🤠,👹,👺,🤡,🤖,🎃,😺,🫶,👍,💪,💄,👀,🧠,🧑‍🏫,👨‍🏫,💂,🧑‍💻,🥷,💃,🕴,💼,🎓,🐻,🐵,🙉,🦄,🦆,🦅,🦍,🦣,🐘,🦒,🦏,🐎,🦩,🐲,🌝,🌜,🌏,🌈,🌊,🎬,🎭,🚀,🚦,⛽️,🗽,🎡,🌋,🌁,💡,🕯,🪜,🧰,⚗️,🔭,🪄,🎊,🎉,) [$title]($url) $newline"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

此功能基于如下项目构建：

以上就是我个人主页配置的全部内容了。

最后有以下几点内容想表达：

  • 几乎每个功能都依赖于开源项目的实现，开源的魅力，正在于，我用你的开源，你用我的开源！

  • 我想，个人主页的一大乐趣，正在于折腾，折腾之乐，无穷尽也！

  • 也但愿国内开发者的个人主页早日遍地开花，百家争鸣起来！！


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK