每周玩转一个 GitHub 项目：NewsNow - 优雅地阅读实时热门新闻

每周玩转一个 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，进入 Developer Settings 页面。
   (https://github.com/settings/developers)

2. 选择 OAuth Apps，点击 New OAuth App。

3. 填写应用信息：

   • Application name: NewsNow（或其他你喜欢的名字）。
   • Homepage URL: 先使用你 Fork 的 GitHub 仓库地址，例如 https://github.com/your-username/newsnow。部署完成后再更改为实际部署的 URL。
   • Authorization callback URL: 使用格式为 https://your-cloudflare-pages-url/api/auth/callback，其中 your-cloudflare-pages-url 将在部署完成后替换为你的 Cloudflare Pages URL。

4. 完成注册，保存 Client ID 和 Client Secret。

2. Fork GitHub 项目

1. 访问原项目的 GitHub 页面：NewsNow 项目。(https://github.com/ourongxing/newsnow)

2. 点击右上角的 Fork 按钮，将项目 Fork 到你的 GitHub 账户。

3. Cloudflare Pages 部署

3.1 连接 GitHub

1. 登录 Cloudflare 账户。

2. 在 Cloudflare 控制台左侧菜单中选择 “Workers & Pages”。

3. 点击 “Create a Project”，选择 “Connect to Git”。

4. 授权 Cloudflare 访问你的 GitHub 账户，选择你 Fork 的 newsnow 仓库。

3.2 设置 Cloudflare Pages 项目

1. 选择你 Fork 的 newsnow 仓库，然后进入构建设置页面。

2. 设置构建参数：

   • Framework preset: 选择 None。
   • Build command: 填写 pnpm install && pnpm build。
   • Build output directory: 填写 dist。

3.3 配置环境变量

1. 在构建设置页面，点击 “Environment variables (advanced)”。

2. 添加以下环境变量：

   • G_CLIENT_ID: 你的 GitHub OAuth 应用的 Client ID。
   • G_CLIENT_SECRET: 你的 GitHub OAuth 应用的 Client Secret。
   • JWT_SECRET: 建议使用与 G_CLIENT_SECRET 相同的值。
   • INIT_TABLE: 设置为 true，首次部署时需要初始化数据库。

4. 创建 Cloudflare D1 数据库

4.1 创建数据库

1. 在 Cloudflare 控制台，选择 “Workers & Pages” -> “D1 SQL Database”。

2. 点击 “Create Database”，输入数据库的名称，例如 newsnow_db。

3. 记下 Database ID 和 Database Name。

4.2 配置 wrangler.toml 文件

1. 打开你的 GitHub 仓库，在项目的根目录中创建或编辑 wrangler.toml 文件。

2. 将以下内容添加到 wrangler.toml 文件中：

   name = "newsnow-project"  # 你的项目名称
   type = "javascript"
   
   [[d1_databases]]
   binding = "NEWSNOW_DB"
   database_name = "your_database_name"  # 替换为你创建的数据库名称
   database_id = "your_database_id"      # 替换为你创建的数据库 ID
   

3. 提交修改到 GitHub。

4.3 重新部署项目

1. 返回到 Cloudflare Pages 项目页面。

2. 点击 “Deploy” 按钮，重新部署项目。

5. 验证部署

5.1 项目正常访问

1. 等待 Cloudflare Pages 部署完成。

2. 访问 Cloudflare Pages 提供的 URL，确保页面正常加载。
   

5.2 数据库初始化后调整配置

1. 如果项目部署成功且数据加载正常，回到 Cloudflare Pages 的项目设置页面。

2. 将环境变量 INIT_TABLE 从 true 修改为 false，避免重复初始化数据库。

5.3 验证 GitHub OAuth 登录

1. 尝试使用你的 GitHub 账户登录。

2. 如果登录失败，检查 GitHub 应用的 Authorization callback URL 是否与 Cloudflare Pages URL 一致。

6. 可选配置和扩展

6.1 自定义域名

如果你有自己的域名，可以在 Cloudflare Pages 中配置自定义域。

6.2 扩展数据源

可以根据项目需要在 shared/metadata、shared/sources 和 server/sources 目录中添加或修改数据源。

6.3 调试和日志

可以使用 Cloudflare 提供的调试和日志工具，监控项目的运行情况。