如何用 GitHub Issues 搭建一个轻博客系统：Path Meme 项目实战

如何用 GitHub Issues 搭建一个现代化博客系统：Path Meme 项目实战

一直想随便写点什么东西，但是不想发朋友圈和微博，也没那么多的内容可以写一篇长文章，还想让内容有自主性，不担心随便说话被删，前几天正好试用了一下 Cursor，正好用它按自己的想法写一个可以随便说话的轻博客系统。 Path Meme —— 一个利用 GitHub Issues 作为 CMS 的现代化博客系统。今天，我和大家分享如何从零开始搭建这样一个博客系统。

因为是基于 github issue 的系统，实际上你可以输入任意的github repo地址通过 path meme 访问，比如头图这里就是查看的 ruanyf 的weekly 仓库。

为什么开发 Path Meme？

在开始动手之前，让我先解释为什么 Path Meme 可能是你的理想选择：

1. 极简管理：你已经熟悉 GitHub 了吗？那么恭喜你，你已经掌握了 Path Meme 的核心操作。发布新文章就像创建一个 Issue 一样简单。
2. 零数据库维护：通过使用 GitHub Issues 作为 CMS，你不需要管理数据库，所有内容都安全地存储在 GitHub 上。
3. 零成本启动：借助 Cloudflare 的免费套餐，你可以完全免费地运行你的博客。
4. 现代化设计：受 Path 应用启发的时间线设计，让你的博客既美观又易于阅读。

开始之前先贴一下项目地址：

项目链接：

• 代码仓库：https://github.com/gusibi/path-momo-web
• 在线演示：https://momo.gusibi.mobi

准备工作

在开始之前，让我们确保你已经准备好了所有必需的账号和工具：

1. GitHub 账号：如果还没有，前往 GitHub 注册一个
2. Cloudflare 账号：访问 Cloudflare 创建免费账号
3. Supabase 账号：在 Supabase 注册账号（用于用户认证）
4. Node.js：确保你的电脑已安装 Node.js（推荐 v16 或更高版本）

详细搭建步骤

第一步：获取项目代码

首先，我们需要 Fork 项目到你的 GitHub 账号下：

1. 访问 Path Meme 项目
2. 点击右上角的 "Fork" 按钮
3. 等待 Fork 完成后，项目就会出现在你的仓库列表中

第二步：配置 Cloudflare Pages

Cloudflare Pages 将为我们提供免费的静态网站托管服务。以下是详细配置步骤：

1. 登录你的 Cloudflare 账号
2. 在左侧菜单找到 "Workers & Pages"
3. 点击 "Create application"
4. 选择 "Pages" 项目类型
5. 点击 "Connect to Git"，授权并选择你刚才 Fork 的项目
6. 在部署配置中：
   • 设置项目名称（这将成为你的默认域名的一部分）
   • 构建命令设置为：npm run build
   • 构建输出目录设置为：.output/public

💡 提示：选择合适的项目名称很重要，因为它会成为你的默认域名的一部分（格式为：your-project.pages.dev）

点击部署，后会发现访问页面报错，是因为这个服务使用了 supabase 授权登录，所以需要配置 supabase.

第三步：配置 Supabase

Supabase 将为我们提供用户认证服务：

1. 登录 Supabase 控制台 https://supabase.com/dashboard/projects
2. 创建新项目：
3. 选择一个项目名称
4. 选择离你最近的数据中心
5. 设置一个安全的数据库密码
6. 配置 GitHub 认证：

添加描述

- 在左侧菜单找到 "Authentication"
- 点击 "Providers"
- 启用 GitHub 提供商
- 记下 OAuth 回调 URL

复制

添加描述

第四步：配置 GitHub OAuth

现在我们需要设置 GitHub OAuth 应用：

1. 访问 GitHub 开发者设置
2. 点击 "New OAuth App"
3. 填写应用信息：
4. Application name: 你的博客名称
5. Homepage URL: 你的 Cloudflare Pages URL
6. Authorization callback URL: 从 Supabase 复制的回调 URL

1. Github OAuth App 创建后 可以拿到 Client ID，点击 Generate a new client secret 会生成一个 github client secret

添加描述

1. 将生成的 client id 和 client secret 填入 Supabase Github 设置的位置,此时 github 登录配置完成

第五步：环境变量配置

在 Cloudflare Pages 中设置必要的环境变量：

1. 进入你的 Pages 项目设置
2. 找到 "Environment variables" 部分
3. 添加以下变量：

SUPABASE_URL=你的 Supabase 项目 URL SUPABASE_KEY=你的 Supabase 公钥

环境变量取值位置如下图所示：

再次重新部署后，页面就可以正常访问了。

项目支持一些自定义参数配置

博客的日常使用

完成设置后，使用 Path Meme 创建内容非常简单：

发布新文章：

1. 在你的 GitHub 仓库创建新的 Issue
2. 使用 Markdown 编写内容
3. 添加标签进行分类

管理评论：

1. 所有 Issue 评论自动同步为博客评论
2. 可以直接在 GitHub 上管理评论

自定义外观：

1. 修改 nuxt.config.ts 中的站点标题和描述
2. 调整主题色彩和布局

常见问题解决

在使用过程中，你可能会遇到以下情况：

文章不显示？

1. 检查 Issue 是否已发布（不是草稿状态，不是close 状态）
2. 确认环境变量配置正确

评论同步失败？

1. 检查 GitHub OAuth 配置
2. 确认 Supabase 连接正常

样式显示异常？

1. 清除浏览器缓存
2. 检查 Cloudflare Pages 构建日志

结语

Path Meme 的设计理念是简单、优雅且易于维护，自己掌握自己的数据。通过利用 GitHub Issues 这个熟悉的工具，我们可以专注于创作内容，而不是被技术细节所困扰。

如果你在使用过程中遇到任何问题，欢迎在 GitHub 上提交 Issue 或贡献代码。让我们一起把 Path Meme 打造得更好！

关于作者：

我是一名热爱技术和分享的开发者，创建 Path Meme 的目的是为了让每个人都能轻松拥有一个独特的博客空间。如果你觉得这个项目有帮助，别忘了在 GitHub 上给它一个星标！