如何制作 GitHub 个人主页

2023-09-01 09:32:41 浏览数 (1)

人们在网上首先发现你的地方是哪里？也许你的社交媒体是人们搜索你时首先发现的东西，亦也许是你为自己创建的投资组合网站。然而，如果你使用GitHub来分享你的代码并参与开源项目，那么你的GitHub个人主页可能是人们为了了解你而去的第一个地方。

你希望你的GitHub个人主页说些什么？你希望如何以简明易读的方式向访客表达对你的重要性以及你是谁？无论他们是未来的雇主还是开源项目的潜在合作伙伴，你都必须拥有一个引人注目的个人主页。

使用GitHub Actions，你可以把一个静态的markdown文档变成一个动态的、保持对你最新信息更新的良好体验。那么如何做到这一点呢？

我将向你展示一个例子，告诉你如何在不费吹灰之力的情况下迅速做到这一点。在这个例子中，你将学习如何抓取一个网站并使用这些数据来动态更新你的GitHub个人主页。我们将在Ruby中展示这个例子，但你也可以用JavaScript、TypeScript、Python或其他语言来做。

GitHub个人主页如何运作

你的GitHub个人主页可以通过在网页浏览器中访问github.com/[你的用户名]找到。那么该页面的内容来自哪里？

它存在于你账户中一个特殊的仓库中，名称为你的账户用户名。如果你还没有这个仓库，当你访问github.com/[你的用户名]时，你不会看到任何特殊的内容，所以第一步是确保你已经创建了这个仓库，如果你还没有，就去创建它。

探索仓库中的文件

仓库中唯一需要的文件是README.md文件，它是你的个人主页页面的来源。

代码语言：javascript复制
./
├── README.md

继续在这个文件中添加一些内容并保存，刷新你的用户名主页，你会看到这些内容反映在那里。

为动态内容添加正确的文件夹

在我们创建代码以使我们的个人主页动态化之前，让我们先添加文件夹结构。

在顶层添加一个名为.github的新文件夹，在.github内部添加两个新的子文件夹：scripts/和workflows/。

你的文件结构现在应该是这样的：

代码语言：javascript复制
./
├── .github/
│   ├── scripts/
│   └── workflows/
└── README.md

制作一个动态个人主页

对于这个例子，我们需要做三件事：

  • 在README中定义一个放置动态内容的地方
  • 在scripts/中添加一个脚本，用来完成爬取工作
  • 在workflows/中为GitHub Actions添加一个工作流，按计划运行该脚本

现在让我们逐步实现。

更新README

我们需要在README中增加一个部分，可以用正则来抓取脚本进行修改。它可以是你的具体使用情况所需要的任何内容。在这个例子中，我们将在README中添加一个最近博客文章的部分。

在代码编辑器中打开README.md文件，添加以下内容：

代码语言：javascript复制
### Recent blog posts

现在我们有了一个供脚本查找的区域。

创建脚本

我们正在构建的示例脚本是用Ruby编写的，使用GitHub gem octokit与你的仓库进行交互，使用nokogiri gem爬取网站，并使用httparty gem进行HTTP请求。

在下面这个例子中，要爬取的元素已经被确定了。在你自己的用例中，你需要明确你想爬取的网站上的元素的路径，毫无疑问它将不同于下面显示的在 posts 变量中定义的，以及每个post的每个title和link。

下面是示例代码，将其放在scripts/文件夹中：

代码语言：javascript复制
require 'httparty'
require 'nokogiri'
require 'octokit'

# Scrape blog posts from the website
url = "<https://www.bengreenberg.dev/blog/>"
response = HTTParty.get(url)
parsed_page = Nokogiri::HTML(response.body)
posts = parsed_page.css('.flex.flex-col.rounded-lg.shadow-lg.overflow-hidden')

# Generate the updated blog posts list (top 5)
posts_list = ["n### Recent Blog Postsnn"]
posts.first(5).each do |post|
  title = post.css('p.text-xl.font-semibold.text-gray-900').text.strip
  link = "<https://www.bengreenberg.dev#{post.at_css('a')[:href]}>"
  posts_list << "* [#{title}](#{link})"
end

# Update the README.md file
client = Octokit::Client.new(access_token: ENV['GITHUB_TOKEN'])
repo = ENV['GITHUB_REPOSITORY']
readme = client.readme(repo)
readme_content = Base64.decode64(readme[:content]).force_encoding('UTF-8')

# Replace the existing blog posts section
posts_regex = /### Recent Blog Postsnn[sS]*?(?=</td>)/m
updated_content = readme_content.sub(posts_regex, "#{posts_list.join("n")}n")

client.update_contents(repo, 'README.md', 'Update recent blog posts', readme[:sha], updated_content)

正如你所看到的，首先向网站发出一个HTTP请求，然后收集有博客文章的部分，并将数据分配给一个posts变量。然后，脚本在posts变量中遍历博客文章，并收集其中的前5个。你可能想根据自己的需要改变这个数字。每循环一次博文，就有一篇博文被添加到post_list的数组中，其中有该博文的标题和URL。

最后，README文件被更新，首先使用octokit gem找到它，然后在README中找到要更新的地方，并使用一些正则： posts_regex = /### Recent Blog Postsnn[sS]*?(?=</td>)/m。

这个脚本将完成工作，但实际上没有任何东西在调用这个脚本。它是如何被运行的呢？这就轮到GitHub Actions出场了！

创建Action工作流

现在我们已经有了脚本，我们需要一种方法来按计划自动运行它。GitHub Actions 提供了一种强大的方式来自动化各种任务，包括运行脚本。在这种情况下，我们将创建一个GitHub Actions工作流，每周在周日午夜运行一次该脚本。

工作流文件应该放在.github/workflows/目录下，可以命名为update_blog_posts.yml之类的。以下是工作流文件的内容：

代码语言：javascript复制
name: Update Recent Blog Posts

on:
  schedule:
    - cron: '0 0 * * 0' # Run once a week at 00:00 (midnight) on Sunday
  workflow_dispatch:

jobs:
  update_posts:
    runs-on: ubuntu-latest

    steps:
    - name: Check out repository
      uses: actions/checkout@v2

    - name: Set up Ruby
      uses: ruby/setup-ruby@v1
      with:
        ruby-version: 3.1

    - name: Install dependencies
      run: gem install httparty nokogiri octokit

    - name: Scrape posts and update README
      run: ruby ./.github/scripts/update_posts.rb
      env:
        GITHUB_TOKEN: $
        GITHUB_REPOSITORY: $

这个工作流是根据cron语法定义的时间表触发的，该时间表指定它应该在每个星期天的00:00（午夜）运行。此外，还可以使用workflow_dispatch事件来手动触发该工作流。

update_posts工作由几个步骤组成：

  • 使用 actions/checkout@v2操作来签出仓库。
  • 使用 ruby/setup-ruby@v1 操作来设置 Ruby，指定的 Ruby 版本为 3.1。
  • 使用 gem install 命令安装所需的 Ruby 依赖（httparty、nokogiri 和 octokit）。
  • 运行位于.github/scripts/目录下的脚本 update_posts.rb。GITHUB_TOKEN和GITHUB_REPOSITORY环境变量被提供给脚本，使其能够与仓库进行交互。

有了这个工作流程，你的脚本就会每周自动运行，抓取博客文章并更新README文件。GitHub Actions负责所有的调度和执行工作，使整个过程无缝且高效。

将所有的东西放在一起

如今，你的网络形象往往是人们与你联系的第一个接触点--无论他们是潜在的雇主、合作者，还是开源项目的贡献者。尤其是你的GitHub个人主页，是一个展示你的技能、项目和兴趣的宝贵平台。那么，如何确保你的GitHub个人主页是最新的、相关的，并能真正反映出你是谁？

通过利用 GitHub Actions 的力量，我们展示了如何将你的 GitHub 配置文件从一个静态的 Markdown 文档转变为一个动态的、不断变化关于你是谁的例子。通过本指南提供的例子，你已经学会了如何从网站上抓取数据，并利用它来动态更新你的 GitHub个人主页。虽然我们的例子是用Ruby实现的，但同样的原则也可以用JavaScript、TypeScript、Python或你选择的任何其他语言来应用。

回顾一下，我们完成了创建一个Ruby脚本的过程，该脚本可以从网站上抓取博客文章，提取相关信息，并更新你的README.md文件中的"最近博客文章"部分。然后，我们使用GitHub Actions设置了一个工作流，定期运行该脚本，确保你的个人主页中保持最新的内容。

但我们的旅程并没有就此结束。本指南中分享的技术和方法可以作为进一步探索和创造的基础。无论是从其他来源拉取数据，与API集成，还是尝试不同的内容格式，都有无限的可能性。

因此，行动起来让你的 GitHub 个人主页成为你自己的一个充满活力的扩展。让它讲述你的故事，突出你的成就，并邀请你与他人合作。

  • 本文译自：https://www.bengreenberg.dev/posts/2023-04-09-github-profile-dynamic-content/

以上就是本文的全部内容，如果对你有所启发，欢迎点赞、收藏、转发~

github 网站 博客 工作流 脚本

0 人点赞