基于GitHub Pages的宝可梦角色推文提交与自动化发布方案咨询

1. 用Staticman实现朋友自助提交帖子到Jekyll #

完全可以用Staticman搞定，步骤如下：

• 先给你的GitHub仓库开启Staticman：访问Staticman的官方部署实例，授权它访问你的仓库，仓库要开启Issues权限（Staticman需要用Issues处理提交请求）。
• 在Jekyll的_config.yml里添加Staticman配置，指定提交字段对应Markdown前置元数据：

  staticman:
    branch: "main" # 替换成你的仓库分支
    endpoint: "https://staticman3.herokuapp.com/v3/entry/github/你的用户名/你的仓库名/main" # 替换成你的仓库信息
    fields:
      author:
        type: "string"
        label: "训练家昵称"
        required: true
      content:
        type: "string"
        label: "推文内容"
        required: true
        widget: "textarea"
      # 可按需添加更多字段，比如推文时间、宝可梦名称等
  

• 写一个HTML表单放在站点页面，表单action指向上面的Staticman endpoint，method设为POST，输入框name对应配置里的字段名：

  <form action="https://staticman3.herokuapp.com/v3/entry/github/你的用户名/你的仓库名/main" method="POST">
    <label>训练家昵称：<input type="text" name="fields[author]" required></label>
    <label>推文内容：<textarea name="fields[content]" rows="5" required></textarea></label>
    <!-- 自动生成帖子文件名的slug -->
    <input type="hidden" name="options[slug]" value="{{ fields.author | slugify }}-{{ site.time | date: '%Y%m%d%H%M' }}">
    <button type="submit">提交训练家推文</button>
  </form>
  

• 提交后Staticman会自动在仓库_posts目录生成带前置元数据的Markdown文件，你可以在配置里设置直接合并到分支，或者先开PR让你审核（通过options[mergeStrategy]调整）。

2. 将格式化后的推文渲染为图片 #

不用自己搭服务器，用GitHub Actions+Puppeteer就能自动生成，步骤如下：

• 在仓库新建Node.js脚本screenshot.js，用Puppeteer打开推文页面截取指定元素：

  const puppeteer = require('puppeteer');
  const fs = require('fs');
  
  (async () => {
    const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
    const page = await browser.newPage();
    // 替换成最新帖子的页面URL，比如Jekyll生成的单篇帖子地址
    await page.goto('https://你的用户名.github.io/你的站点/posts/最新帖子slug/');
    // 设置视口大小匹配你的推文样式
    await page.setViewport({ width: 620, height: 0 });
    // 选择你用HTML/CSS写的推文容器类名
    const tweetElement = await page.$('.tweet-card');
    if (tweetElement) {
      // 截图保存到仓库的images目录
      await tweetElement.screenshot({ path: './images/latest-tweet.png', fullPage: true });
    }
    await browser.close();
  })();
  

• 在仓库根目录创建.github/workflows/screenshot.yml，配置GitHub Actions在新帖子提交时自动运行脚本：

  name: Generate Tweet Image
  on:
    push:
      paths:
        - "_posts/**" # 当_posts目录有新文件时触发
  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
        - uses: actions/setup-node@v4
          with:
            node-version: '20'
        - run: npm install puppeteer
        - run: node screenshot.js
        - run: |
            git config --global user.name "GitHub Actions"
            git config --global user.email "actions@github.com"
            git add ./images/latest-tweet.png
            git commit -m "Auto-generate tweet screenshot"
            git push
  

• 每次有新帖子提交，Actions会自动生成推文截图并推回仓库，你可以在站点直接引用这个图片。

3. 将图片帖子发布到Discord频道 #

两种简单方案，不用复杂开发：

• 方案一：RSS+Discord机器人
  Jekyll默认会生成RSS feed（一般在/feed.xml），找个Discord RSS机器人（比如RSS Bot）添加到频道，订阅这个feed。设置机器人当有新条目时，自动推送包含图片的消息，可自定义消息格式（比如包含训练家昵称、图片链接）。
• 方案二：GitHub Actions+Discord Webhook
  在Discord频道创建Webhook并复制URL，把URL存到仓库的Secrets（命名为DISCORD_WEBHOOK_URL）。修改之前的screenshot.yml，在最后加一步推送消息：

  - name: Send to Discord
    uses: tsickert/discord-webhook@v5.3.0
    with:
      webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
      content: "新的训练家推文已发布！"
      embeds: |
        [
          {
            "image": {
              "url": "https://你的用户名.github.io/你的站点/images/latest-tweet.png"
            }
          }
        ]
  

  这样图片生成后会自动推送到Discord频道。

内容的提问来源于stack exchange，提问作者user32846318