Skip to main content

​
Get Up and Running

This guide will walk you through getting the RobTop Games Web clone running on your local machine in just a few minutes.
1

Clone the Repository

Start by cloning the repository from GitHub:
git clone https://github.com/ElIvanFX/RobTopGamesWeb.git
Navigate into the project directory:
cd RobTopGamesWeb
2

Install Dependencies

Install all required packages with npm:
npm install
This installs Astro and all dependencies from package.json.
3

Start the Development Server

Launch the development server:
npm run dev
The dev script runs astro dev which starts the development server with hot module reloading enabled.
4

View the Site

Open your browser and visit:
http://localhost:4321
You should see the RobTop Games homepage fully rendered with all components.

​
Create Your First Page

Now that the site is running, let’s create a simple new page to understand how Astro works.
1

Create a New Page File

Create a new file at src/pages/about.astro:
src/pages/about.astro
---
import Layout from "../layouts/Layout.astro";
---

<Layout title="About RobTop Games" description="Learn more about RobTop Games">
  <section>
    <div class="container">
      <div class="row">
        <div class="col-md-8 mx-auto text-center text-white py-5">
          <h1 class="mb-4">About RobTop Games</h1>
          <p class="lead">
            RobTop Games is the creator of Geometry Dash and other popular rhythm-based platformer games.
          </p>
        </div>
      </div>
    </div>
  </section>
</Layout>
Files in src/pages/ automatically become routes. This file creates the /about route.
2

View Your New Page

Navigate to your new page in the browser:
http://localhost:4321/about
You should see your new About page with the Layout wrapper (header and footer) applied automatically.

​
Understanding the Page Structure

Let’s break down what’s happening in the Astro page:
Page Anatomy
---
// Component Script (runs at build time)
import Layout from "../layouts/Layout.astro";
import Socials from "../components/Socials.astro";
---

<!-- Template (HTML with components) -->
<Layout title="RobTop Games" description="">
  <Socials />
</Layout>
  • Frontmatter (---) - TypeScript/JavaScript code that runs at build time
  • Imports - Bring in layouts and components
  • Template - HTML with embedded components

​
Using the Layout Component

The Layout.astro component provides the base structure for all pages. It accepts several props:
src/layouts/Layout.astro
interface Props {
  title: string;        // Page title (required)
  description: string;  // Meta description (required)
  image?: string;       // OG image (optional)
  canonicalURL?: string; // Canonical URL (optional)
}
Example usage: 
<Layout 
  title="My Page Title" 
  description="This is what appears in search results"
  image="/assets/img/og-image.png"
>
  <!-- Your page content -->
</Layout>

​
Working with Components

The project includes reusable components in src/components/. Here’s an example from Apps.astro:
src/components/Apps.astro
<section>
  <div class="container d-flex justify-content-center align-items-center">
    <div class="shadow-none mt-4" style="height: auto;width: 724px;">
      <div class="row m-auto">
        <div class="col-6 col-sm-4 col-md-4">
          <a href="https://apps.apple.com/us/app/geometry-dash/id625334537" target="_blank">
            <img class="img-fluid mb-2 hover-scale transition-all" src="https://www.robtopgames.com/Images/ios.png" />
          </a>
        </div>
        <!-- More app links... -->
      </div>
    </div>
  </div>
</section>
This component uses Bootstrap’s grid system (row, col-6, etc.) for responsive layout.

​
Development Workflow

The development server watches for file changes and automatically reloads your browser.

​
Common Development Commands

# Start dev server (port 4321)
npm run dev

​
Project File Structure

Here’s what you’ll find in the project: 
RobTopGamesWeb/
├── src/
│   ├── components/       # Reusable UI components
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   ├── Socials.astro
│   │   ├── Video.astro
│   │   └── Apps.astro
│   ├── layouts/         # Page layout templates
│   │   ├── Layout.astro      # Main layout
│   │   └── PostLayout.astro  # Blog post layout
│   └── pages/           # File-based routes
│       ├── index.astro       # Homepage (/)
│       ├── youtube.astro     # YouTube page
│       ├── 404.astro         # Error page
│       └── blog/
│           ├── index.astro   # Blog listing
│           └── [slug].astro  # Dynamic blog posts
├── public/              # Static assets (served as-is)
│   └── assets/
│       ├── bootstrap/   # Bootstrap files
│       ├── css/         # Custom styles
│       ├── img/         # Images
│       └── js/          # JavaScript files
├── astro.config.mjs     # Astro configuration
└── package.json         # Dependencies and scripts

​
Building for Production

When you’re ready to deploy:
1

Build the Site

npm run build
This creates a dist/ directory with optimized static files.
2

Preview the Build

Test the production build locally:
npm run preview
3

Deploy

Upload the contents of dist/ to your web server or hosting platform.
The build output is pure HTML, CSS, and JavaScript - deploy it anywhere that serves static files.

​
Next Steps

Now that you’re up and running, explore these topics:

Components

Learn about all available components and how to use them

Content

Understand how to manage content and create blog posts

Styling

Customize the design with Bootstrap and custom CSS

Configuration

Configure Astro and project settings

Build docs developers (and LLMs) love

Get started for freeTalk to us