Setting Up and Running Ryze Locally

Initial Setup

This guide walks through cloning, installing dependencies, running the dev server, and resolving the most common setup failures. Follow the steps carefully to get Ryze up and running on your local machine.

Prerequisites

1. Node.js 18.x or later (LTS recommended): Astro v5 requires modern Node features and stable async handling.
2. One of these package managers:
   • npm (bundled with Node)
   • yarn
   • pnpm

Cloning the Repository

Now that prerequisites are met, you need to get the Ryze repository on your computer. Choose the method that works best for you.

HTTPS Method

The simplest method, no SSH keys required. Paste this command in your terminal.

git clone https://github.com/yourusername/Ryze.git
cd Ryze

If prompted for authentication, enter your GitHub username and a personal access token (instead of your password). You can generate one at GitHub Settings → Developer Settings → Personal Access Tokens.

SSH Method

Faster and more secure if you’ve set up SSH keys with GitHub. If you haven’t, follow GitHub’s SSH setup guide.

git clone git@github.com:yourusername/Ryze.git
cd Ryze

GitHub CLI Method

If you have GitHub CLI installed, this is the quickest option.

gh repo clone yourusername/Ryze
cd Ryze

Installing Dependencies

Install and Run

npm install
npm run dev

Preview: http://localhost:4321
Troubleshooting: use nvm to switch Node versions.
Dev features:

• Hot Module Replacement (HMR) for fast iteration
• Automatic rebuilds on file change

To stop the dev server: press CTRL + C in the terminal.

Editing files

tsconfig / jsconfig

Ryze can use either TypeScript or JavaScript (or both). The config file tells Astro which language rules to follow.

{
  "extends": "astro/configs/strict",
  "compilerOptions": {
    "moduleResolution": "bundler",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@pages/*": ["src/pages/*"]
    }
  }
}

Key options:

• moduleResolution: How imports are resolved
• baseUrl: Base directory for imports
• paths: Aliases for cleaner imports

Useful for avoiding long relative paths. For example:

import Header from "@components/Header.astro";
// Instead of:
import Header from "../../../components/Header.astro";

Configuration Files

Edit these files to customize your site’s behavior and appearance:

astro.config.mjs - Site metadata and integrations

export default defineConfig({
  site: "https://yourdomain.com",
  integrations: [tailwind(), react()],
});

Content & Metadata

Edit src/blog markdown files to change posts. Update the frontmatter.

---
slug: "your-post"
title: "Your Title"
description: "Your description"
date: 2025-01-01
author: "Your Name"
tags: ["tag1", "tag2"]
featured: true
editable: false
---

Styling & Colors

• Global styles: Edit src/styles/global.css
• Typography: Edit src/styles/typography.css

Components

Replace components in src/components to customize:

• Header.astro — Navigation bar
• Footer.astro — Footer content
• PostCard.astro — Blog post previews
• Seo.astro — Meta tags

Next Steps

Now that your project is set up and running, you’re ready to start building:

1. Create pages: Add .astro files to src/pages
2. Build components: Create reusable Astro components in src/components
3. Write content: Add markdown files to src/blog with your posts
4. Deploy: Build with npm run build and deploy dist folder

To know more about how Ryze is being deployed, check out Deploying Ryze using Cloudflare. Happy coding!