使用 dev.to 上的帖子自动更新您的 GitHub Pages 网站

重要提示

完全免费。我们的目标是在不花一分钱的情况下获得一个可行的解决方案。

介绍

我很久以前创建个人网站的时候就谈到过 GitHub Pages 了。

后来，为了方便，我换用了另一个当时免费的工具，之后就再也没碰过我的网站。我就不说是哪个工具了，因为从大约两年前到现在，当我决定重新开始写点东西的时候，那个工具已经彻底崩溃，根本用不了了。我得付费才能让它按我想要的方式运行，而我想要的功能基本上是：

• 一个极其简单的静态网站，上面列出了我在 dev.to 上发布的文章。

原因如下：我的网站不赚钱，只是用来记录一些我喜欢谈论的事情；而且，我很容易忘记事情，将来肯定需要参考这些内容。

直入主题

1. 建立你的个人网站

我不会在这里浪费时间，GitHub 上有很多相关信息……而且我还有一篇关于如何将其与 Google Domains 结合使用的文章（顺便说一句，Google Domains 最近已经结束了 Beta 测试阶段）。

2. 创建一个脚本来获取帖子

Dev.to 的API 非常好用，最重要的是，GET 请求是免费的！所以我们可以创建一个非常简单的脚本来获取你的帖子，然后——关键就在这里——将它们保存到一个你的 GitHub Pages 网站可以识别的文件中！以下是脚本：

#!/bin/bash

#### Thing to notice 1 ####
POSTS_FILE=./_data/devPosts.json

# Clear the posts file
echo -n "" >$POSTS_FILE

#### Thing to notice 2 ####
POSTS_JSON=$(curl https://dev.to/api/articles?username=brunodrugowick&?per_page=1000)

#### Thing to notice 3 ####
echo "$POSTS_JSON" | jq >>$POSTS_FILE
date >last_updated_date

需要注意的事项 1

请注意，此变量指向该_data目录下的一个文件。这是一个专门用于 GitHub Actions 的目录，GitHub Actions 由 Jekyll 提供支持。

此目录中的文件可用作构建静态网站的数据。稍后您将看到它的用途。

需要注意的事项 2

脚本的这一部分是对 dev.to API 的请求。请注意参数：

• username=brunodrugowick它正在获取我用户的帖子。你应该把它改成你的用户名。
• per_page=1000这是要检索的帖子数量。我觉得我永远也达不到这个数量，但如果真的达到了，我会写一个循环来处理分页。=)

需要注意的事项 3

脚本的这一部分会将上述请求的结果写入我们之前提到的数据文件。管道符（|）jq用于格式化，可能并非必需。

3. 列出您网站上的帖子

现在，您可以在本地环境中使用此脚本来填充数据文件，然后将该文件用于您的 GitHub Pages 网站。那么，让我们开始吧。

将此代码放入您的index.md页面中（您也可以.html将此代码放在网站上的任何位置）：

{% for devPost in site.data.devPosts %}
## {{ devPost.title }}

{{ devPost.readable_publish_date }}

{{ devPost.description }} [continue to read]({{ devPost.url }})

{% endfor %}

这是一个简单的循环，它会遍历你使用我们之前创建的脚本for保存到文件中的所有帖子。devPosts

该指令site.data.devPosts指的是该文件。我们针对特定帖子访问的所有内容，例如 `<post>`devPost.description或 ` devPost.url<post>`，都指的是 dev.to API 返回的字段。

4. 实现网站更新任务自动化

我们目前拥有的功能已经足够好了，对吧？每次你在 dev.to 上编写代码时，你都可以访问你的个人网站代码仓库，运行脚本并推送一个 commit，让 GitHub 为你构建并发布你的网站。

但我们可以更进一步，使用 GitHub Actions 实现整个过程的自动化！我们将创建一个名为“更新文章”的工作流。请在您的仓库.github/workflows/update-articles.yml中创建一个文件，内容如下：

name: Update Articles

#### Thing to notice 1 ####
on:
  schedule:
    - cron:  '30 23 * * *'
  workflow_dispatch:

jobs:
  run-script:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Run script to get articles from dev.to
        #### Thing to notice 2 ####
        run: |
          ./scripts/post_files_from_GET_json.sh

      - name: Commit to the repo
        run: |
          git config --global user.name 'Bruno Drugowick'
          git config --global user.email 'brunodrugowick@users.noreply.github.com'
          git add .
          git commit -am "Update articles list"
          git push

需要注意的事项 1

此部分确保您的工作流可以按时运行schedule（例如每天晚上 11:30），也可以通过您指定的任何时间运行workflow_dispatch。以下是稍后在您的代码库中的显示效果：

需要注意的事项 2

本部分只是指示 GitHub Actions 在上一步检出的存储库的本地副本上运行您的工作流。

脚本的其余部分会将更改提交到代码仓库。这个简化版本确保我们提交任何内容，即使实际上没有提交任何内容，但我们可以在决定是否将更改推送到代码仓库之前先验证是否存在更改。

结论

好了，现在你在 dev.to 上写的任何东西都会同步到你的个人网站上。

如果您知道解决这个“问题”的其他方法，请在评论区告诉我。