mirror of
https://github.com/RayLabsHQ/gitea-mirror.git
synced 2025-12-08 12:36:44 +03:00
Docs Design updated
This commit is contained in:
Arunavo Ray
456
src/pages/docs/quickstart.astro
Normal file
456
src/pages/docs/quickstart.astro
Normal file
@@ -0,0 +1,456 @@
|
||||
---
|
||||
import MainLayout from '../../layouts/main.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Quick Start Guide - Gitea Mirror">
|
||||
<main class="max-w-5xl mx-auto px-4 py-12">
|
||||
<div class="sticky top-4 z-10 mb-6">
|
||||
<a
|
||||
href="/docs/"
|
||||
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-card text-foreground hover:bg-muted transition-colors border border-border focus:ring-2 focus:ring-ring outline-none"
|
||||
>
|
||||
<span aria-hidden="true">←</span> Back to Documentation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<article class="bg-card rounded-2xl shadow-lg p-6 md:p-8 border border-border">
|
||||
<!-- Header -->
|
||||
<div class="mb-12 space-y-4">
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground mb-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
<span>Quick Start</span>
|
||||
</div>
|
||||
<h1 class="text-4xl font-bold tracking-tight">Gitea Mirror Quick Start Guide</h1>
|
||||
<p class="text-lg text-muted-foreground leading-relaxed max-w-4xl">
|
||||
This guide will help you get Gitea Mirror up and running quickly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Prerequisites -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold mb-6">Prerequisites</h2>
|
||||
|
||||
<div class="bg-gradient-to-r from-primary/5 to-transparent rounded-lg p-6 border-l-4 border-primary mb-8">
|
||||
<h3 class="font-semibold mb-4">Before you begin, make sure you have:</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">1</div>
|
||||
<div>
|
||||
<span class="font-semibold text-foreground">A GitHub account with a personal access token</span>
|
||||
<p class="text-sm text-muted-foreground mt-1">Create one at <a href="https://github.com/settings/tokens" class="text-primary hover:underline">GitHub Settings</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">2</div>
|
||||
<div>
|
||||
<span class="font-semibold text-foreground">A Gitea instance with an access token</span>
|
||||
<p class="text-sm text-muted-foreground mt-1">Available in your Gitea Settings > Applications</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">3</div>
|
||||
<div>
|
||||
<span class="font-semibold text-foreground">One of the following:</span>
|
||||
<ul class="mt-2 space-y-1 text-sm text-muted-foreground pl-4">
|
||||
<li class="flex gap-2"><span>•</span> Docker and docker-compose (for Docker deployment)</li>
|
||||
<li class="flex gap-2"><span>•</span> Bun 1.2.9+ (for native deployment)</li>
|
||||
<li class="flex gap-2"><span>•</span> Proxmox VE or LXD (for LXC container deployment)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="my-12 h-px bg-border/50"></div>
|
||||
|
||||
<!-- Installation Options -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold mb-6">Installation Options</h2>
|
||||
<p class="text-muted-foreground mb-8">Choose the installation method that works best for your environment.</p>
|
||||
|
||||
<!-- Docker Installation -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
|
||||
🐳 Using Docker <span class="text-sm text-muted-foreground font-normal">(Recommended for most users)</span>
|
||||
</h3>
|
||||
|
||||
<div class="bg-card rounded-lg border border-border p-6">
|
||||
<p class="text-muted-foreground mb-4">Docker provides the easiest way to get started with minimal configuration.</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
{[
|
||||
{ step: 'Clone the repository', cmd: 'git clone https://github.com/arunavo4/gitea-mirror.git\ncd gitea-mirror' },
|
||||
{ step: 'Start the application in production mode', cmd: 'docker compose up -d' },
|
||||
{ step: 'Access the application', cmd: null, text: 'Open your browser and navigate to <a href="http://localhost:4321" class="text-primary hover:underline font-medium">http://localhost:4321</a>' }
|
||||
].map((item, i) => (
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-sm font-semibold text-muted-foreground">STEP {i + 1}</span>
|
||||
<span class="text-sm text-muted-foreground">{item.step}</span>
|
||||
</div>
|
||||
{item.cmd ? (
|
||||
<div class="bg-muted/30 rounded-lg p-4">
|
||||
<pre class="text-sm"><code>{item.cmd}</code></pre>
|
||||
</div>
|
||||
) : (
|
||||
<p class="text-sm" set:html={item.text}></p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bun Installation -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
|
||||
🏃 Using Bun <span class="text-sm text-muted-foreground font-normal">(Native Installation)</span>
|
||||
</h3>
|
||||
|
||||
<div class="bg-card rounded-lg border border-border p-6">
|
||||
<p class="text-muted-foreground mb-4">If you prefer to run the application directly on your system:</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-sm font-semibold text-muted-foreground">STEP 1</span>
|
||||
<span class="text-sm text-muted-foreground">Clone the repository</span>
|
||||
</div>
|
||||
<div class="bg-muted/30 rounded-lg p-4">
|
||||
<pre class="text-sm"><code>git clone https://github.com/arunavo4/gitea-mirror.git
|
||||
cd gitea-mirror</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-sm font-semibold text-muted-foreground">STEP 2</span>
|
||||
<span class="text-sm text-muted-foreground">Run the quick setup script</span>
|
||||
</div>
|
||||
<div class="bg-muted/30 rounded-lg p-4">
|
||||
<pre class="text-sm"><code>bun run setup</code></pre>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground mt-2">This installs dependencies and initializes the database.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-sm font-semibold text-muted-foreground">STEP 3</span>
|
||||
<span class="text-sm text-muted-foreground">Choose how to run the application</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
|
||||
<div class="border border-border rounded-lg p-4">
|
||||
<h5 class="font-semibold mb-2">Development Mode</h5>
|
||||
<div class="bg-muted/30 rounded-lg p-3 text-sm">
|
||||
<pre><code>bun run dev</code></pre>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground mt-2">For Bun-specific features, use: <code class="bg-muted px-1 rounded">bunx --bun astro dev</code></p>
|
||||
</div>
|
||||
|
||||
<div class="border border-border rounded-lg p-4">
|
||||
<h5 class="font-semibold mb-2">Production Mode</h5>
|
||||
<div class="bg-muted/30 rounded-lg p-3 text-sm">
|
||||
<pre><code>bun run build
|
||||
bun run start</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-sm font-semibold text-muted-foreground">STEP 4</span>
|
||||
<span class="text-sm text-muted-foreground">Access the application</span>
|
||||
</div>
|
||||
<p class="text-sm">Open your browser and navigate to <a href="http://localhost:4321" class="text-primary hover:underline font-medium">http://localhost:4321</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LXC Installation -->
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
|
||||
📦 Using LXC Containers <span class="text-sm text-muted-foreground font-normal">(Recommended for server deployments)</span>
|
||||
</h3>
|
||||
|
||||
<div class="bg-card rounded-lg border border-border p-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-semibold flex items-center gap-2">
|
||||
<span>Proxmox VE</span>
|
||||
<span class="text-xs text-muted-foreground font-normal">(Online Installation)</span>
|
||||
</h4>
|
||||
|
||||
<p class="text-sm text-muted-foreground">For deploying on a Proxmox VE host with internet access:</p>
|
||||
|
||||
<div class="bg-muted/30 rounded-lg p-4">
|
||||
<pre class="text-sm"><code># Optional env overrides:
|
||||
# CTID HOSTNAME STORAGE DISK_SIZE
|
||||
# CORES MEMORY BRIDGE IP_CONF
|
||||
sudo bash -c "$(curl -fsSL https://raw.githubusercontent.com/arunavo4/gitea-mirror/main/scripts/gitea-mirror-lxc-proxmox.sh)"</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-muted-foreground space-y-1">
|
||||
<p class="font-medium">This script:</p>
|
||||
<ul class="space-y-1 pl-4">
|
||||
<li class="flex gap-2"><span>•</span> Creates a privileged LXC container</li>
|
||||
<li class="flex gap-2"><span>•</span> Installs Bun and dependencies</li>
|
||||
<li class="flex gap-2"><span>•</span> Clones and builds the application</li>
|
||||
<li class="flex gap-2"><span>•</span> Sets up a systemd service</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-semibold flex items-center gap-2">
|
||||
<span>Local LXD</span>
|
||||
<span class="text-xs text-muted-foreground font-normal">(Offline-friendly)</span>
|
||||
</h4>
|
||||
|
||||
<p class="text-sm text-muted-foreground">For testing or environments without internet access:</p>
|
||||
|
||||
<ol class="space-y-3 text-sm">
|
||||
<li>
|
||||
<span class="text-muted-foreground">1. Clone the repository locally:</span>
|
||||
<div class="bg-muted/30 rounded-lg p-3 mt-1">
|
||||
<pre><code>git clone https://github.com/arunavo4/gitea-mirror.git</code></pre>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-muted-foreground">2. Download Bun installer:</span>
|
||||
<div class="bg-muted/30 rounded-lg p-3 mt-1">
|
||||
<pre><code>curl -L -o /tmp/bun-linux-x64.zip \
|
||||
https://github.com/oven-sh/bun/releases/latest/download/bun-linux-x64.zip</code></pre>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-muted-foreground">3. Run local LXC installer:</span>
|
||||
<div class="bg-muted/30 rounded-lg p-3 mt-1">
|
||||
<pre><code>sudo LOCAL_REPO_DIR=~/path/to/gitea-mirror \
|
||||
./gitea-mirror/scripts/gitea-mirror-lxc-local.sh</code></pre>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-4 border-t border-border">
|
||||
<p class="text-sm text-muted-foreground">For more details, see the <a href="https://github.com/arunavo4/gitea-mirror/blob/main/scripts/README-lxc.md" class="text-primary hover:underline">LXC Container Deployment Guide</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="my-12 h-px bg-border/50"></div>
|
||||
|
||||
<!-- Initial Configuration -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold mb-6">Initial Configuration</h2>
|
||||
<p class="text-muted-foreground mb-6">Follow these steps to configure Gitea Mirror for first use:</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{[
|
||||
{
|
||||
num: '1',
|
||||
title: 'Create Admin Account',
|
||||
items: [
|
||||
"You'll be prompted on first access",
|
||||
'Choose a secure username and password',
|
||||
'This will be your administrator account'
|
||||
]
|
||||
},
|
||||
{
|
||||
num: '2',
|
||||
title: 'Configure GitHub Connection',
|
||||
items: [
|
||||
'Navigate to the Configuration page',
|
||||
'Enter your GitHub credentials',
|
||||
'Select repositories to mirror',
|
||||
'Configure filtering options'
|
||||
]
|
||||
},
|
||||
{
|
||||
num: '3',
|
||||
title: 'Configure Gitea Connection',
|
||||
items: [
|
||||
'Enter your Gitea server URL',
|
||||
'Enter your Gitea access token',
|
||||
'Configure organization settings',
|
||||
'Set default visibility'
|
||||
]
|
||||
},
|
||||
{
|
||||
num: '4',
|
||||
title: 'Set Up Scheduling',
|
||||
items: [
|
||||
'Enable automatic mirroring',
|
||||
'Set the mirroring interval',
|
||||
'Save your configuration'
|
||||
]
|
||||
}
|
||||
].map(step => (
|
||||
<div class="bg-card rounded-lg border border-border p-4 hover:border-primary/50 transition-colors">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">{step.num}</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">{step.title}</h4>
|
||||
<ul class="text-sm text-muted-foreground space-y-1">
|
||||
{step.items.map(item => (
|
||||
<li>• {item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="my-12 h-px bg-border/50"></div>
|
||||
|
||||
<!-- Performing Your First Mirror -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold mb-6">Performing Your First Mirror</h2>
|
||||
|
||||
<div class="bg-gradient-to-r from-primary/5 to-transparent rounded-lg p-6 border-l-4 border-primary">
|
||||
<h3 class="font-semibold mb-4">After completing the configuration, you can start mirroring repositories:</h3>
|
||||
|
||||
<ol class="space-y-3">
|
||||
{[
|
||||
'Click <strong>"Import GitHub Data"</strong> to fetch repositories from GitHub',
|
||||
'Go to the <strong>Repositories</strong> page to view your imported repositories',
|
||||
'Select the repositories you want to mirror',
|
||||
'Click <strong>"Mirror Selected"</strong> to start the mirroring process',
|
||||
'Monitor the progress on the <strong>Activity</strong> page',
|
||||
"You'll receive toast notifications about the success or failure of operations"
|
||||
].map((step, i) => (
|
||||
<li class="flex gap-3">
|
||||
<span class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">{i + 1}</span>
|
||||
<span set:html={step}></span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="my-12 h-px bg-border/50"></div>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold mb-6">Troubleshooting</h2>
|
||||
|
||||
<div class="bg-amber-500/10 border border-amber-500/20 rounded-lg p-4">
|
||||
<div class="flex gap-3">
|
||||
<div class="text-amber-600 dark:text-amber-500">
|
||||
<svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<h4 class="font-semibold text-amber-600 dark:text-amber-500">If you encounter any issues:</h4>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex gap-2">
|
||||
<span class="text-amber-600 dark:text-amber-500">•</span>
|
||||
<span>Check the <strong>Activity Log</strong> for detailed error messages</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-amber-600 dark:text-amber-500">•</span>
|
||||
<span>Verify your GitHub and Gitea tokens have the correct permissions</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-amber-600 dark:text-amber-500">•</span>
|
||||
<span>Ensure your Gitea instance is accessible from the machine running Gitea Mirror</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-3">
|
||||
<h5 class="font-semibold">Check logs based on your deployment method:</h5>
|
||||
|
||||
<div class="bg-amber-500/5 rounded-lg p-3 space-y-2">
|
||||
<div class="grid grid-cols-1 gap-2 text-sm">
|
||||
<div>
|
||||
<span class="font-medium">Docker:</span>
|
||||
<code class="bg-amber-500/10 px-1.5 py-0.5 rounded ml-2">docker logs gitea-mirror</code>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">Native:</span>
|
||||
<span class="text-muted-foreground ml-2">Check terminal output or system logs</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">LXC:</span>
|
||||
<code class="bg-amber-500/10 px-1.5 py-0.5 rounded ml-2">systemctl status gitea-mirror</code>
|
||||
<span class="text-muted-foreground ml-1">or</span>
|
||||
<code class="bg-amber-500/10 px-1.5 py-0.5 rounded ml-1">journalctl -u gitea-mirror -f</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex gap-2">
|
||||
<span class="text-amber-600 dark:text-amber-500">•</span>
|
||||
<span>Use the health check endpoint: <code class="bg-amber-500/10 px-1.5 py-0.5 rounded">curl http://your-server:4321/api/health</code></span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-amber-600 dark:text-amber-500">•</span>
|
||||
<span>For database issues: <code class="bg-amber-500/10 px-1.5 py-0.5 rounded">bun run check-db</code> or <code class="bg-amber-500/10 px-1.5 py-0.5 rounded">bun run fix-db</code></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="my-12 h-px bg-border/50"></div>
|
||||
|
||||
<!-- Next Steps -->
|
||||
<section>
|
||||
<h2 class="text-2xl font-bold mb-6">Next Steps</h2>
|
||||
|
||||
<div class="bg-gradient-to-br from-primary/5 via-transparent to-primary/5 rounded-lg p-6 border border-border">
|
||||
<h3 class="font-semibold mb-4">After your initial setup:</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-3">
|
||||
{[
|
||||
'Explore the dashboard for an overview of your mirroring status',
|
||||
'Set up automatic mirroring schedules for hands-off operation',
|
||||
'Configure organization mirroring for team repositories',
|
||||
'Use the cleanup button in Activity Log to manage old events'
|
||||
].map(item => (
|
||||
<div class="flex gap-3">
|
||||
<span class="text-primary">✓</span>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex gap-3">
|
||||
<span class="text-primary">📖</span>
|
||||
<span>Check out the <a href="/docs/configuration" class="text-primary hover:underline font-medium">Configuration Guide</a> for advanced settings</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<span class="text-primary">🏗️</span>
|
||||
<span>Review the <a href="/docs/architecture" class="text-primary hover:underline font-medium">Architecture Documentation</a> to understand the system</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<span class="text-primary">📊</span>
|
||||
<span>For server deployments, set up monitoring using the health check endpoint</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</MainLayout>
|
||||
Reference in New Issue
Block a user