如何制作 GitHub 個(gè)人主頁

人們在網(wǎng)上首先發(fā)現(xiàn)你的地方是哪里？也許你的社交媒體是人們搜索你時(shí)首先發(fā)現(xiàn)的東西，亦也許是你為自己創(chuàng)建的投資組合網(wǎng)站。然而，如果你使用GitHub來分享你的代碼并參與開源項(xiàng)目，那么你的GitHub個(gè)人主頁可能是人們?yōu)榱肆私饽愣サ牡谝粋€(gè)地方。

你希望你的GitHub個(gè)人主頁說些什么？你希望如何以簡明易讀的方式向訪客表達(dá)對你的重要性以及你是誰？無論他們是未來的雇主還是開源項(xiàng)目的潛在合作伙伴，你都必須擁有一個(gè)引人注目的個(gè)人主頁。

使用GitHub Actions，你可以把一個(gè)靜態(tài)的markdown文檔變成一個(gè)動(dòng)態(tài)的、保持對你最新信息更新的良好體驗(yàn)。那么如何做到這一點(diǎn)呢？

我將向你展示一個(gè)例子，告訴你如何在不費(fèi)吹灰之力的情況下迅速做到這一點(diǎn)。在這個(gè)例子中，你將學(xué)習(xí)如何抓取一個(gè)網(wǎng)站并使用這些數(shù)據(jù)來動(dòng)態(tài)更新你的GitHub個(gè)人主頁。我們將在Ruby中展示這個(gè)例子，但你也可以用JavaScript、TypeScript、Python或其他語言來做。

GitHub個(gè)人主頁如何運(yùn)作

你的GitHub個(gè)人主頁可以通過在網(wǎng)頁瀏覽器中訪問github.com/[你的用戶名]找到。那么該頁面的內(nèi)容來自哪里？

它存在于你賬戶中一個(gè)特殊的倉庫中，名稱為你的賬戶用戶名。如果你還沒有這個(gè)倉庫，當(dāng)你訪問github.com/[你的用戶名]時(shí)，你不會(huì)看到任何特殊的內(nèi)容，所以第一步是確保你已經(jīng)創(chuàng)建了這個(gè)倉庫，如果你還沒有，就去創(chuàng)建它。

探索倉庫中的文件

倉庫中唯一需要的文件是README.md文件，它是你的個(gè)人主頁頁面的來源。

./
├── README.md

繼續(xù)在這個(gè)文件中添加一些內(nèi)容并保存，刷新你的用戶名主頁，你會(huì)看到這些內(nèi)容反映在那里。

為動(dòng)態(tài)內(nèi)容添加正確的文件夾

在我們創(chuàng)建代碼以使我們的個(gè)人主頁動(dòng)態(tài)化之前，讓我們先添加文件夾結(jié)構(gòu)。

在頂層添加一個(gè)名為.github的新文件夾，在.github內(nèi)部添加兩個(gè)新的子文件夾：scripts/和workflows/。

你的文件結(jié)構(gòu)現(xiàn)在應(yīng)該是這樣的：

./
├── .github/
│   ├── scripts/
│   └── workflows/
└── README.md

制作一個(gè)動(dòng)態(tài)個(gè)人主頁

對于這個(gè)例子，我們需要做三件事：

• 在README中定義一個(gè)放置動(dòng)態(tài)內(nèi)容的地方
• 在scripts/中添加一個(gè)腳本，用來完成爬取工作
• 在workflows/中為GitHub Actions添加一個(gè)工作流，按計(jì)劃運(yùn)行該腳本

現(xiàn)在讓我們逐步實(shí)現(xiàn)。

更新README

我們需要在README中增加一個(gè)部分，可以用正則來抓取腳本進(jìn)行修改。它可以是你的具體使用情況所需要的任何內(nèi)容。在這個(gè)例子中，我們將在README中添加一個(gè)最近博客文章的部分。

在代碼編輯器中打開README.md文件，添加以下內(nèi)容：

### Recent blog posts

現(xiàn)在我們有了一個(gè)供腳本查找的區(qū)域。

創(chuàng)建腳本

我們正在構(gòu)建的示例腳本是用Ruby編寫的，使用GitHub gem octokit與你的倉庫進(jìn)行交互，使用nokogiri gem爬取網(wǎng)站，并使用httparty gem進(jìn)行HTTP請求。

在下面這個(gè)例子中，要爬取的元素已經(jīng)被確定了。在你自己的用例中，你需要明確你想爬取的網(wǎng)站上的元素的路徑，毫無疑問它將不同于下面顯示的在 posts 變量中定義的，以及每個(gè)post的每個(gè)title和link。

下面是示例代碼，將其放在scripts/文件夾中：

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 Posts\n\n"]
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 Posts\n\n[\s\S]*?(?=<\/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)

正如你所看到的，首先向網(wǎng)站發(fā)出一個(gè)HTTP請求，然后收集有博客文章的部分，并將數(shù)據(jù)分配給一個(gè)posts變量。然后，腳本在posts變量中遍歷博客文章，并收集其中的前5個(gè)。你可能想根據(jù)自己的需要改變這個(gè)數(shù)字。每循環(huán)一次博文，就有一篇博文被添加到post_list的數(shù)組中，其中有該博文的標(biāo)題和URL。

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

這個(gè)腳本將完成工作，但實(shí)際上沒有任何東西在調(diào)用這個(gè)腳本。它是如何被運(yùn)行的呢？這就輪到GitHub Actions出場了！

創(chuàng)建Action工作流

現(xiàn)在我們已經(jīng)有了腳本，我們需要一種方法來按計(jì)劃自動(dòng)運(yùn)行它。GitHub Actions 提供了一種強(qiáng)大的方式來自動(dòng)化各種任務(wù)，包括運(yùn)行腳本。在這種情況下，我們將創(chuàng)建一個(gè)GitHub Actions工作流，每周在周日午夜運(yùn)行一次該腳本。

工作流文件應(yīng)該放在.github/workflows/目錄下，可以命名為update_blog_posts.yml之類的。以下是工作流文件的內(nèi)容：

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: $

這個(gè)工作流是根據(jù)cron語法定義的時(shí)間表觸發(fā)的，該時(shí)間表指定它應(yīng)該在每個(gè)星期天的00:00（午夜）運(yùn)行。此外，還可以使用workflow_dispatch事件來手動(dòng)觸發(fā)該工作流。

update_posts工作由幾個(gè)步驟組成：

• 使用 actions/checkout@v2操作來簽出倉庫。
• 使用 ruby/setup-ruby@v1 操作來設(shè)置 Ruby，指定的 Ruby 版本為 3.1。
• 使用 gem install 命令安裝所需的 Ruby 依賴（httparty、nokogiri 和 octokit）。
• 運(yùn)行位于.github/scripts/目錄下的腳本 update_posts.rb。GITHUB_TOKEN和GITHUB_REPOSITORY環(huán)境變量被提供給腳本，使其能夠與倉庫進(jìn)行交互。

有了這個(gè)工作流程，你的腳本就會(huì)每周自動(dòng)運(yùn)行，抓取博客文章并更新README文件。GitHub Actions負(fù)責(zé)所有的調(diào)度和執(zhí)行工作，使整個(gè)過程無縫且高效。

將所有的東西放在一起

如今，你的網(wǎng)絡(luò)形象往往是人們與你聯(lián)系的第一個(gè)接觸點(diǎn)--無論他們是潛在的雇主、合作者，還是開源項(xiàng)目的貢獻(xiàn)者。尤其是你的GitHub個(gè)人主頁，是一個(gè)展示你的技能、項(xiàng)目和興趣的寶貴平臺(tái)。那么，如何確保你的GitHub個(gè)人主頁是最新的、相關(guān)的，并能真正反映出你是誰？

通過利用 GitHub Actions 的力量，我們展示了如何將你的 GitHub 配置文件從一個(gè)靜態(tài)的 Markdown 文檔轉(zhuǎn)變?yōu)橐粋€(gè)動(dòng)態(tài)的、不斷變化關(guān)于你是誰的例子。通過本指南提供的例子，你已經(jīng)學(xué)會(huì)了如何從網(wǎng)站上抓取數(shù)據(jù)，并利用它來動(dòng)態(tài)更新你的 GitHub個(gè)人主頁。雖然我們的例子是用Ruby實(shí)現(xiàn)的，但同樣的原則也可以用JavaScript、TypeScript、Python或你選擇的任何其他語言來應(yīng)用。

回顧一下，我們完成了創(chuàng)建一個(gè)Ruby腳本的過程，該腳本可以從網(wǎng)站上抓取博客文章，提取相關(guān)信息，并更新你的README.md文件中的"最近博客文章"部分。然后，我們使用GitHub Actions設(shè)置了一個(gè)工作流，定期運(yùn)行該腳本，確保你的個(gè)人主頁中保持最新的內(nèi)容。

但我們的旅程并沒有就此結(jié)束。本指南中分享的技術(shù)和方法可以作為進(jìn)一步探索和創(chuàng)造的基礎(chǔ)。無論是從其他來源拉取數(shù)據(jù)，與API集成，還是嘗試不同的內(nèi)容格式，都有無限的可能性。

因此，行動(dòng)起來讓你的 GitHub 個(gè)人主頁成為你自己的一個(gè)充滿活力的擴(kuò)展。讓它講述你的故事，突出你的成就，并邀請你與他人合作。

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

以上就是本文的全部內(nèi)容，如果對你有所啟發(fā)，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)~