Path Meme - AI 帮我写的简洁现代的博客

goodspeed
173 阅读4分钟

之前总抱怨没有一个平台可以胡乱讲话，写在笔记软件又觉得只有自己能看到心有不甘，想分享给其他人。所以想写个app，可以顺畅的把笔记公开出去，能让别人看到。 所以就用 Cursor 生成了一个工具 —— Path Meme。

一、Path Meme 简介

Path Meme 是一个灵感来源于 Path 应用用户界面的博客系统。它充分利用了现有的技术和平台，将 GitHub Issues 作为内容管理系统，通过 Cloudflare Workers 提供 API 服务，并使用 Cloudflare Pages 进行静态网站托管。这个系统提供了时间线式的博客展示，支持 Markdown 渲染、标签分类、反应统计等功能，让你的博客既美观又实用。

项目地址: github.com/gusibi/path…

demo: momo.gusibi.mobi

image.png

二、Path Meme 的特性

  1. 使用 GitHub Issues 作为 CMS，方便管理和组织博客内容。

  2. 时间线式的博客展示，让读者能够清晰地看到文章的发布时间顺序。

  3. Markdown 内容渲染，让你可以轻松地编写格式丰富的博客文章。

  4. 标签分类系统，帮助读者快速找到感兴趣的主题。

  5. GitHub 反应（Reactions）统计，了解了解读者对文章的反馈。

  6. 夜间模式，保护眼睛，提供舒适的阅读体验。

  7. 响应式设计，适应各种设备屏幕，随时随地都能阅读你的博客。

三、如何使用 Path Meme

  1. 前提条件：

    • GitHub 账号。
    • Cloudflare 账号。
    • 基本的命令行操作知识。

  2. 详细步骤：

    • Fork 此项目：登录你的 GitHub 账号，点击右上角的 “fork” 图标。

    • 设置 Cloudflare Worker：

      • 登录 Cloudflare 账号，进入 “Workers” 页面。
      • 点击 “Create a Worker”，可以起名叫 path-momo-api。
      • 将 worker/index.js 中的代码粘贴到编辑器中。
      • 点击 “Save and Deploy”。此时，你的 worker 已经创建成功，并且会自动生成一个 worker 的 url，记下这个 url，后面会用到。访问这个 api 会报错，因为关键的变量还没有配置。格式类似与 https://{your-worker-path}.workers.dev/api/blog-posts。

    • 配置 GitHub Personal Access Token：

      • 在 GitHub 中，进入 Settings > Developer settings > Personal access tokens。
      • 点击 “Generate new token”。
      • 给 token 一个描述性的名称。
      • 选择 “repo” 范围。
      • 点击 “Generate token”。
      • 复制生成的 token。

    • 更新 Cloudflare Worker：

      • 回到刚才创建的 worker，进入设置页面 > 选择变量，添加以下变量：

        • GITHUB_TOKEN，值为你刚刚生成的 GitHub Personal Access Token。
        • GITHUB_OWNER，值为你 GitHub 用户名。
        • GITHUB_REPOGIT，值为你需要使用的 repo。

      • 点击 “部署”。部署完成后，第二步不能访问的 api 就可以访问了。

    • 克隆仓库到本地：打开终端，运行以下命令：

      • git clone https://github.com/你的用户名/path-style-blog.git
      • cd path-style-blog

    • 更新前端代码中的中的 API URL：在 public/script.js 中，将 fetch 请求的 URL 更新为你的 Cloudflare Worker 的 URL。

    • 提交并推送更改：

      • git add.
      • git commit -m "update api url"
      • git push origin main

    • 设置 Cloudflare Pages：

      • 在 Cloudflare 中，进入 “Pages” 页面。
      • 点击 “Create a project”。
      • 选择 “Connect to Git”。
      • 选择你的 GitHub 仓库。
      • 在构建设置中，将构建命令留空，将构建输出目录设置为 “public”。
      • 点击 “Save and Deploy”。

    • 创建博客文章：

      • 在你第四步选择的 GitHub 仓库中，进入 “Issues” 标签页。
      • 点击 “New issue”。
      • 使用 Markdown 格式编写你的博客文章。
      • 添加标签（可选）。
      • 点击 “Submit new issue”。

    • 访问你的博客：打开 Cloudflare Pages 为你的项目提供的 URL，你应该能看到你的博客了。

四、自定义 Path Meme

  1. Banner 图片：将你的 banner 图片添加到 public 文件夹，并在 index.html 中更新图片路径。

  2. 头像：同样，将你的头像图片添加到 public 文件夹，并在 index.html 中更新图片路径。

  3. 样式：你可以通过修改 styles.css 来自定义博客的外观。

  4. 功能：如果你想添加新功能，可以修改 script.js 和 Cloudflare Worker 中的 index.js。

五、故障排除

  1. 如果博客文章没有显示，检查 Cloudflare Worker 的日志以确保 API 请求成功。

  2. 确保你的 GitHub Personal Access Token 有正确的权限并且没有过期。

  3. 如果样式没有应用，检查 Cloudflare Pages 的部署日志，确保所有文件都被正确上传。

六、贡献

欢迎提交 Pull Requests 来改进这个项目。对于重大更改，请先开一个 issue 讨论你想要改变的内容。

avatar
文章
阅读
粉丝