首页 >web前端 >js教程 >每周 GitHub 项目:NewsNow - 优雅地阅读实时趋势新闻

每周 GitHub 项目:NewsNow - 优雅地阅读实时趋势新闻

Barbara Streisand
Barbara Streisand原创
2024-10-27 06:13:30476浏览

*每周 GitHub 项目:NewsNow - 优雅地阅读实时趋势 *

项目介绍

本周,我们将推出NewsNow,一个新闻聚合平台,可让您优雅地阅读实时热门新闻。 NewsNow快速聚合多个数据源的实时新闻,提供流畅的阅读体验,帮助用户轻松获取最新的热点资讯。本项目支持GitHub OAuth登录,并使用Cloudflare D1数据库来管理和存储数据。

在本指南中,我将引导您逐步完成在 Cloudflare Pages 上部署此开源项目的过程。您将学习如何设置 GitHub OAuth 登录、配置 Cloudflare D1 数据库以及成功部署项目。

部署指南

1.准备工作

1.1 所需帐户

  • GitHub 帐户:fork 和管理项目代码。
  • Cloudflare 帐户:部署和托管项目。

1.2 GitHub OAuth 应用程序设置

要启用 GitHub 登录,您需要在 GitHub 上创建 OAuth 应用程序。

  1. 登录 GitHub 并进入开发者设置。
  2. 选择OAuth 应用程序,然后单击新建OAuth 应用程序
  3. 填写申请详情:
    • 应用程序名称:NewsNow(或您喜欢的任何名称)。
    • 主页 URL:暂时使用您分叉的 GitHub 存储库的 URL,例如 https://github.com/your-username/newsnow。您可以稍后将其更改为部署的 URL。
    • 授权回调 URL:使用 https://your-cloudflare-pages-url/api/auth/callback 格式,在部署后将 your-cloudflare-pages-url 替换为您的 Cloudflare Pages URL。
  4. 注册后,保存客户端ID客户端密钥

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

2.分叉 GitHub 项目

  1. 前往 GitHub 上的原始项目页面:NewsNow Project。
  2. 点击右上角的Fork按钮将项目fork到您的GitHub帐户。

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

3. Cloudflare 页面部署

3.1 连接 GitHub

  1. 登录您的 Cloudflare 帐户。
  2. 在 Cloudflare 仪表板中,转到左侧菜单上的 “工作人员和页面”
  3. 点击“创建项目”并选择“连接到Git”
  4. 授权 Cloudflare 访问您的 GitHub 帐户并选择您分叉的 newsnow 存储库。

3.2 配置 Cloudflare Pages 项目

  1. 选择 newsnow 存储库并进入构建设置页面。
  2. 设置构建参数:
    • 框架预设:选择“无”。
    • 构建命令:输入 pnpm install && pnpm build。
    • 构建输出目录:输入dist。

3.3 配置环境变量

  1. 在构建设置页面上,点击“环境变量(高级)”
  2. 添加以下环境变量:
    • G_CLIENT_ID:您的 GitHub OAuth 应用程序的客户端 ID。
    • G_CLIENT_SECRET:您的 GitHub OAuth 应用程序的客户端密钥。
    • JWT_SECRET:建议使用与G_CLIENT_SECRET相同的值。
    • INIT_TABLE:首次部署时设置为 true 以初始化数据库。

4.创建 Cloudflare D1 数据库

4.1 创建数据库

  1. 在 Cloudflare 仪表板中,导航至 “工作人员和页面” -> “D1 SQL 数据库”.
  2. 点击“创建数据库”,并输入名称,例如newsnow_db。
  3. 记下数据库ID数据库名称

4.2 配置 wrangler.toml 文件

  1. 在 GitHub 存储库中,在项目根目录中创建或编辑 wrangler.toml 文件。
  2. 在 wrangler.toml 文件中添加以下配置:
   name = "newsnow-project"  # Your project name
   type = "javascript"

   [[d1_databases]]
   binding = "NEWSNOW_DB"
   database_name = "your_database_name"  # Replace with your created database name
   database_id = "your_database_id"      # Replace with your created database ID
  1. 将更改提交到 GitHub。

4.3 重新部署项目

  1. 返回 Cloudflare Pages 项目页面。
  2. 点击“部署”按钮重新部署项目。

5.部署验证

5.1 访问项目

  1. 等待部署完成。
  2. 访问 Cloudflare Pages 提供的 URL 以确保页面正确加载。

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

5.2 调整数据库初始化设置

  1. 如果项目部署成功且数据加载正确,请返回 Cloudflare Pages 项目设置。
  2. 将 INIT_TABLE 环境变量从 true 更改为 false,以防止数据库在将来的部署中重新初始化。

5.3 测试 GitHub OAuth 登录

  1. 尝试使用您的 GitHub 帐户登录。
  2. 如果登录失败,请检查 GitHub OAuth 设置中的授权回调 URL 是否与 Cloudflare Pages URL 匹配。

6.可选配置和扩展

6.1 自定义域

  • 如果您有自己的域名,您可以在 Cloudflare Pages 中设置自定义域名。

6.2 扩展数据源

  • 根据需要编辑目录shared/metadata、shared/sources和server/sources来修改或添加新的数据源。

6.3 调试和日志

  • 使用Cloudflare提供的调试和日志工具来监控项目的性能。

以上是每周 GitHub 项目:NewsNow - 优雅地阅读实时趋势新闻的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn