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

yazou

项目简介
NewsNow是一个优雅地阅读实时热门新闻的新闻聚合平台。它快速整合多个数据源，提供流畅阅读体验。通过GitHub OAuth登录和Cloudflare D1数据库管理，部署在Cloudflare Pages上。本文介绍项目简介、部署指南和可选配置扩展。部署前需注册GitHub和Cloudflare账户，设置GitHub OAuth应用程序。部署流程包括Fork GitHub项目、连接GitHub、设置Cloudflare Pages项目、配置环境变量、创建Cloudflare D1数据库等步骤。完成部署后，可验证项目访问、数据库配置和GitHub OAuth登录。可选配置包括自定义域名、扩展数据源和调试日志等。
本文将手把手教你如何在 Cloudflare Pages 上部署这个开源项目。通过详细的步骤说明，你将学会如何设置 GitHub OAuth 登录、配置 Cloudflare D1 数据库，以及如何顺利完成部署。

项目演示
https://news.4mf.net

项目部署指南

1. 前期准备

1.1 注册必要的账户
GitHub 账户：用于 Fork 和管理项目代码。
Cloudflare 账户：用于部署和托管项目。

1.2 GitHub OAuth 应用程序设置
为了启用 GitHub 登录功能，你需要在 GitHub 上创建一个 OAuth 应用程序。

• 登录 GitHub，进入 Developer Settings 页面。
  (https://github.com/settings/developers)
  
• 选择 OAuth Apps，点击 New OAuth App。
  
• 填写应用信息：
  
  
  
  • 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。
  
  

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

2. Fork GitHub 项目

• 访问原项目的 GitHub 页面：NewsNow 项目。(https://github.com/ourongxing/newsnow)
  
• 点击右上角的 Fork 按钮，将项目 Fork 到你的 GitHub 账户。

3. Cloudflare Pages 部署

3.1 连接 GitHub

• 登录 Cloudflare 账户。
  
• 在 Cloudflare 控制台左侧菜单中选择 “Workers & Pages”。
  
• 点击 “Create a Project”，选择 “Connect to Git”。
  
• 授权 Cloudflare 访问你的 GitHub 账户，选择你 Fork 的 newsnow 仓库。

3.2 设置 Cloudflare Pages 项目

• 选择你 Fork 的 newsnow 仓库，然后进入构建设置页面。
  
• 设置构建参数：
  
  
  
  • Framework preset: 选择 None。
    
  • Build command: 填写 pnpm install && pnpm build。
    
  • Build output directory: 填写 dist。
  
  

3.3 配置环境变量

• 在构建设置页面，点击 “Environment variables (advanced)”。
  
• 添加以下环境变量：
  
  
  
  • 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 创建数据库

• 在 Cloudflare 控制台，选择 “Workers & Pages” -> “D1 SQL Database”。
  
• 点击 “Create Database”，输入数据库的名称，例如 newsnow_db。
  
• 记下 Database ID 和 Database Name。

4.2 配置 wrangler.toml 文件

• 打开你的 GitHub 仓库，在项目的根目录中创建或编辑 wrangler.toml 文件。
  
• 将以下内容添加到 wrangler.toml 文件中：name = "newsnow-project" # 你的项目名称 type = "javascript" [[d1_databases]] binding = "NEWSNOW_DB" database_name = "your_database_name" # 替换为你创建的数据库名称 database_id = "your_database_id" # 替换为你创建的数据库 ID
  
• 提交修改到 GitHub。

4.3 重新部署项目

• 返回到 Cloudflare Pages 项目页面。
  
• 点击 “Deploy” 按钮，重新部署项目。

5. 验证部署

5.1 项目正常访问

• 等待 Cloudflare Pages 部署完成。
  
• 访问 Cloudflare Pages 提供的 URL，确保页面正常加载。

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

• 如果项目部署成功且数据加载正常，回到 Cloudflare Pages 的项目设置页面。
  
• 将环境变量 INIT_TABLE 从 true 修改为 false，避免重复初始化数据库。

5.3 验证 GitHub OAuth 登录

• 尝试使用你的 GitHub 账户登录。
  
• 如果登录失败，检查 GitHub 应用的 Authorization callback URL 是否与 Cloudflare Pages URL 一致。

6. 可选配置和扩展

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

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

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