V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
djyde
V2EX  ›  分享创造

一个基于 GitHub Issue 的博客系统

  •  1
     
  •   djyde ·
    djyde · 2022-02-23 12:27:52 +08:00 · 4159 次点击
    这是一个创建于 997 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Desktop - 1 (1)

    很多人用 GitHub issue 当作自己的博客,于是我想到可以用 Next.js 通过 GitHub API 生成一个基于 GitHub issue 的博客。

    然而这样做的问题是 GitHub API 有请求 rate limit, 通过 access token 请求的 rate limit 是 5000/小时,因此对于博客网站来说,如果每次有用户访问就请求一次,当访问量上来后,很快就会达到请求上限。

    如果换一种思路,用 Next.js 的 getStaticProps 来在 build time 就把静态页面生成出来,就能解决这个问题。然后这样的结果是每次修改 issue, 都需要重新构建部署。

    还好 Next.js 有一个特殊的 data fetching 机制叫 ISR, 也就是按需重新生成静态页面。比如,如果我在获取 issue 信息的页面的 getStaticProps 中返回一个 revalidate, 就可以让部署在 Vercel 上的 Next.js 页面按照一个频率自动更新这个静态页面:

    export async function getStaticProps() {
      const res = await fetch('https://api.github.com/xxx')
      const posts = await res.json()
    
      return {
        props: {
          posts,
        },
        // Next.js will attempt to re-generate the page:
        // - When a request comes in
        // - At most once every 1 minutes
        revalidate: 60, // In seconds
      }
    }
    

    于是,基于这个机制,我写了 Sairin, 你可以通过一个按钮直接创建一个基于 GitHub issue 的博客,并部署到 Vercel:

    Deploy with Vercel

    在部署前你需要申请一个 GitHub personal access token 在创建项目时填入

    image

    输入一个项目名,和你申请的 GitHub access token, 点击 deploy, Vercel 会帮你创建一个 repo, 并部署 Sairin.

    部署完成后,就可以进入 Vercel 帮你创建的 repo, 在 issue 里写下你的第一篇博客文章:

    image

    需要注意的是,在文章的开头,你需要写入 frontmatter, 来指定这篇文章的路径:

    ---
    path: my-first-post
    ---
    
    正文内容
    

    这样就代表你可以通过 https://your-domain.com/my-first-post 访问你的这篇文章。

    完成文章后,就可以发表。发表的方式是在这篇 issue 加入一个 published 的 label:

    image

    等待一分钟,再次访问你的博客地址,就可以看到发布的文章。


    Sairin 支持 RSS 和自定义主题,详细的文档可以参考 https://github.com/djyde/sairin

    这是用 Sairin 生成的 Sairin 自己的博客 http://blog.sairinjs.com/

    16 条回复    2022-03-10 12:43:37 +08:00
    xinyana
        1
    xinyana  
       2022-02-23 14:23:51 +08:00
    有想法,够简洁
    huruji
        2
    huruji  
       2022-02-23 14:41:30 +08:00
    可以支持现有的仓库吗
    czyt
        3
    czyt  
       2022-02-23 15:02:46 +08:00
    可以支持 cloudflared pages 么
    djyde
        4
    djyde  
    OP
       2022-02-23 15:22:04 +08:00
    @czyt 可以,在环境变量里把 REPO 改成现有的仓库,例如 `user/repo`
    djyde
        5
    djyde  
    OP
       2022-02-23 16:37:14 +08:00
    > 上一条回复错了。

    @huruji #2 可以,在环境变量里把 REPO 改成现有的仓库,例如 `user/repo`
    cheung
        6
    cheung  
       2022-02-23 20:48:52 +08:00
    学习学习学习学习
    seedscoder
        7
    seedscoder  
       2022-02-24 08:46:45 +08:00
    使用 GitHub 登录,出现 `This user account is blocked. Contact [email protected] for more information.`
    czyt
        8
    czyt  
       2022-02-24 09:04:52 +08:00
    我用 cloudflare pages 托管 hugo 的了
    tsuad
        9
    tsuad  
       2022-02-24 10:29:10 +08:00
    真不错.已 Star.
    私有仓库也行吗? 希望加上评论.那就完美了
    djyde
        10
    djyde  
    OP
       2022-02-24 12:19:22 +08:00
    @tsuad #9 私有仓库也没问题。评论正在做。
    cheung
        11
    cheung  
       2022-02-24 15:45:06 +08:00
    无需部署到 vercel ,是需要注释什么吗?
    mark2014
        12
    mark2014  
       2022-02-24 17:45:39 +08:00
    博客主题很棒
    WebKit
        13
    WebKit  
       2022-02-25 09:18:13 +08:00
    path 可以根据 title 生成就好了。
    codehz
        14
    codehz  
       2022-02-25 12:40:15 +08:00 via Android
    为什么不能换个思路,检测到 issue 创建再触发文章生成呢
    twfb
        15
    twfb  
       2022-03-09 16:17:45 +08:00
    参考楼主创意 写了个脚本 根据 issue 自动生成文章
    twfb
        16
    twfb  
       2022-03-10 12:43:37 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1202 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:31 · PVG 02:31 · LAX 10:31 · JFK 13:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.