Project Initialization and Deployment

Follow these steps to set up, configure, and deploy the project locally and online.

---

Step 1: Clone the Repository

1. Open a terminal or command prompt.
2. Clone the repository:

   git clone https://github.com/llmgame-org/llmgame-org.github.io

3. Navigate into the project directory:

   cd llmgame-org.github.io

---

Step 2: Set Up the Front-End

1. Ensure you have Node.js and npm installed:

   node -v
   npm -v

   If not installed, download and install them from Node.js.

2. Install the front-end dependencies:

   npm install

3. Start the front-end development server:

   npm start

4. Open your browser and navigate to http://localhost:3000 to view the application.

---

Step 3: Set Up the Backend Server

1. Ensure Python is installed:

   python --version

   If not installed, download and install it from python.org.

2. Create a virtual environment:

   python -m venv game_arena_venv

3. Activate the virtual environment:

   • On Linux/macOS:

     source game_arena_venv/bin/activate

   • On Windows:

     game_arena_venv\Scripts\activate

4. Install backend dependencies:

   pip install -r requirements.txt

5. Start the backend server:

   python ./src/backend/app.py

   The backend will run on port 5000 by default.

---

Step 4: Set Up ngrok for API Access

1. Install ngrok:

   • Download it from ngrok.com.
   • Follow the installation instructions for your operating system.

2. Start ngrok to expose the backend API:

   ngrok http 5000

   Copy the generated https URL from the ngrok output (e.g., https://abc123.ngrok.io).

3. Update the config.js for the frontend:

   • Open the file ./src/backend/config.js in a text editor.
   • Replace http://127.0.0.1:5000 with the ngrok-generated URL.
   • Adjust the UPDATE_INTERVAL and FETCH_INTERVAL values based on your desired timing.

   Example config.js:

   export default BASE_URL;
   const BASE_URL = "https://abc123.ngrok.io"; // Replace with ngrok link
   // Replace with Update interval in milliseconds (e.g., 60 minutes)
   const UPDATE_INTERVAL = 60 * 60 * 1000; // 1 hour
   // Replace with read data interval in milliseconds (e.g., 30 seconds)
   const FETCH_INTERVAL = 30 * 1000; // 30 seconds
   export { BASE_URL, UPDATE_INTERVAL, FETCH_INTERVAL };

   Important: Adding the ngrok link as the BASE_URL allows the frontend to access backend data seamlessly.

---

Step 5: Add Blogs

1. Navigate to the ./public/blogs directory in the project.

2. Add your blog posts as markdown files. Each blog should be a separate .md file.

   Example structure:

   ./public/blogs
   ├── blog1.md
   ├── blog2.md
   └── blog3.md
   

3. Each markdown file will be automatically loaded and displayed in the blog section of the application.

---

Step 6: Deploy the Website

1. Ensure all changes are committed and pushed to the repository.

2. Run the following command to deploy the website to GitHub Pages:

   npm run deploy

3. The website will be deployed and accessible at:

   https://llmgame-org.github.io
   

---

Summary of Commands

Clone the Repository:

git clone https://github.com/llmgame-org/llmgame-org.github.io
cd llmgame-org.github.io

Set Up the Front-End:

npm install
npm start

Set Up the Backend:

python -m venv game_arena_venv
source game_arena_venv/bin/activate  # or game_arena_venv\Scripts\activate on Windows
pip install -r requirements.txt
python ./src/backend/app.py

Expose Backend with ngrok:

ngrok http 5000

Update base_url.js:

const BASE_URL = "https://abc123.ngrok.io"; // Replace with ngrok link
// Replace with Update interval in milliseconds (e.g., 60 minutes)
const UPDATE_INTERVAL = 60 * 60 * 1000; // 1 hour
// Replace with read data interval in milliseconds (e.g., 30 seconds)
const FETCH_INTERVAL = 30 * 1000; // 30 seconds
export { BASE_URL, UPDATE_INTERVAL, FETCH_INTERVAL };

Add Blogs:

1. Navigate to ./public/blogs.
2. Add markdown files for your blog posts.

Deploy the Website:

npm run deploy

---

This README provides all the necessary steps to initialize, configure, and deploy the project.