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

Project Introduction

This week, we’re introducing NewsNow, a news aggregation platform that allows you to elegantly read real-time trending news. NewsNow quickly aggregates real-time news from multiple data sources, offering a smooth reading experience that helps users easily access the latest trending information. This project supports GitHub OAuth login and uses Cloudflare D1 database to manage and store data.

In this guide, I’ll walk you through the step-by-step process of deploying this open-source project on Cloudflare Pages. You’ll learn how to set up GitHub OAuth login, configure Cloudflare D1 database, and successfully deploy the project.

Deployment Guide

1. Preparation

1.1 Required Accounts

• GitHub Account: To fork and manage the project code.
• Cloudflare Account: To deploy and host the project.

1.2 GitHub OAuth Application Setup

To enable GitHub login, you need to create an OAuth application on GitHub.

1. Log in to GitHub and go to Developer Settings.
2. Choose OAuth Apps and click New OAuth App.
3. Fill in the application details:
   • Application name: NewsNow (or any name you prefer).
   • Homepage URL: Use the URL of your forked GitHub repository for now, e.g., https://github.com/your-username/newsnow. You can change this later to the deployed URL.
   • Authorization callback URL: Use the format https://your-cloudflare-pages-url/api/auth/callback, replacing your-cloudflare-pages-url with your Cloudflare Pages URL after deployment.
4. After registration, save the Client ID and Client Secret.

2. Fork the GitHub Project

1. Go to the original project page on GitHub: NewsNow Project.
2. Click the Fork button at the top right to fork the project to your GitHub account.

3. Cloudflare Pages Deployment

3.1 Connect GitHub

1. Log in to your Cloudflare account.
2. In the Cloudflare dashboard, go to “Workers & Pages” on the left menu.
3. Click “Create a Project” and choose “Connect to Git”.
4. Authorize Cloudflare to access your GitHub account and select the newsnow repository that you forked.

3.2 Configure Cloudflare Pages Project

1. Choose the newsnow repository and proceed to the build settings page.
2. Set up the build parameters:
   • Framework preset: Choose None.
   • Build command: Enter pnpm install && pnpm build.
   • Build output directory: Enter dist.

3.3 Configure Environment Variables

1. On the build settings page, click “Environment variables (advanced)”.
2. Add the following environment variables:
   • G_CLIENT_ID: Your GitHub OAuth application’s Client ID.
   • G_CLIENT_SECRET: Your GitHub OAuth application’s Client Secret.
   • JWT_SECRET: It’s recommended to use the same value as G_CLIENT_SECRET.
   • INIT_TABLE: Set to true for the first deployment to initialize the database.

4. Create Cloudflare D1 Database

4.1 Create the Database

1. In the Cloudflare dashboard, navigate to “Workers & Pages” -> “D1 SQL Database”.
2. Click “Create Database”, and enter a name, e.g., newsnow_db.
3. Note down the Database ID and Database Name.

4.2 Configure the wrangler.toml File

1. In your GitHub repository, create or edit the wrangler.toml file in the project’s root directory.
2. Add the following configuration to the wrangler.toml file:

   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. Commit the changes to GitHub.

4.3 Redeploy the Project

1. Go back to the Cloudflare Pages project page.
2. Click the “Deploy” button to redeploy the project.

5. Deployment Verification

5.1 Access the Project

1. Wait for the deployment to complete.
2. Visit the URL provided by Cloudflare Pages to ensure the page loads correctly.

5.2 Adjust Database Initialization Setting

1. If the project is deployed successfully and data is loading correctly, go back to the Cloudflare Pages project settings.
2. Change the INIT_TABLE environment variable from true to false to prevent the database from re-initializing on future deployments.

5.3 Test GitHub OAuth Login

1. Try logging in with your GitHub account.
2. If the login fails, check if the Authorization callback URL in the GitHub OAuth settings matches the Cloudflare Pages URL.

6. Optional Configuration and Extensions

6.1 Custom Domain

• If you have your own domain, you can set up a custom domain in Cloudflare Pages.

6.2 Extend Data Sources

• Modify or add new data sources by editing the directories shared/metadata, shared/sources, and server/sources according to your needs.

6.3 Debugging and Logs

• Use the debugging and log tools provided by Cloudflare to monitor the project’s performance.