Getting Started with SaaSKit - Complete Setup Guide

Welcome to SaaSKit, the premium Astro template for building beautiful SaaS landing pages. This comprehensive guide will help you get started quickly and make the most of all the features included in this template.

Introduction

SaaSKit is a production-ready template built with modern web technologies. It combines the performance of Astro with the flexibility of React components, beautiful Tailwind CSS styling, and powerful animations using Framer Motion.

What You’ll Learn

In this guide, you’ll learn how to:

• Install and set up the template
• Customize colors, content, and branding
• Configure images and assets
• Deploy to production
• Extend functionality

Quick Start

Getting started with SaaSKit is straightforward. Follow these steps to have your site running locally in minutes.

Prerequisites

Before you begin, make sure you have:

• Node.js version 18 or higher
• npm or yarn package manager
• A code editor (VS Code recommended)
• Basic knowledge of HTML, CSS, and JavaScript

Installation Steps

1. Install dependencies

   Open your terminal in the project directory and run:

   npm install

   This will install all required dependencies including Astro, React, Tailwind CSS, and Framer Motion.

2. Start the development server

   Once installation is complete, start the development server:

   npm run dev

   The server will start on http://localhost:4321 by default.

3. Open your browser

   Navigate to the URL shown in your terminal to see your site running locally.

4. Make your first change

   Try editing src/pages/index.astro and see your changes reflected instantly with hot module replacement.

Customization Guide

SaaSKit is designed to be highly customizable. Here’s how to make it your own.

Color Palette

The template uses a sophisticated royal color palette. You can customize it in tailwind.config.mjs:

colors: {
  'accent-dark': '#343434',
  'accent-teal': '#055e68',
  'accent-green': '#62a388',
  'accent-light': '#b9d2d2',
}

Tips for choosing colors:

• Maintain sufficient contrast for accessibility
• Use dark colors for text on light backgrounds
• Test your color choices in both light and dark modes
• Consider your brand identity when selecting colors

Site Configuration

All site-wide settings are in src/config.ts. Update these values to match your brand:

export const siteConfig = {
  name: 'Your Company Name',
  description: 'Your company description',
  url: 'https://yourdomain.com',
  // ... more settings
};

Content Management

Content is organized logically throughout the template:

• Pages: Located in src/pages/
• Components: Reusable components in src/components/
• Blog Posts: Markdown files in src/content/blog/
• Config: Site-wide settings in src/config.ts

Images

The template uses Unsplash for all images. You can:

• Use Unsplash URLs directly in frontmatter
• Customize image keywords in src/config.ts
• Replace with your own images when ready

Image optimization tips:

• Use appropriate image sizes for different contexts
• Always include alt text for accessibility
• Consider using WebP format for better compression
• Lazy load images below the fold

Advanced Configuration

Once you’re comfortable with the basics, explore these advanced features.

Dark Mode

Dark mode is fully implemented and can be toggled by users. The template automatically:

• Detects system preferences
• Persists user choice in localStorage
• Applies appropriate color schemes
• Maintains accessibility standards

SEO Optimization

The template includes comprehensive SEO features:

• Automatic sitemap generation
• Open Graph meta tags
• Twitter Card support
• Structured data (JSON-LD)
• Canonical URLs

Performance

SaaSKit is optimized for performance:

• Static site generation with Astro
• Minimal JavaScript by default
• Optimized images
• Fast page loads
• Excellent Lighthouse scores

Deployment

When you’re ready to deploy, follow these steps:

Build for Production

npm run build

This creates an optimized dist/ folder ready for deployment.

Preview Production Build

Before deploying, preview your production build:

npm run preview

Deployment Options

SaaSKit works with any static hosting service:

• Vercel: Connect your GitHub repo for automatic deployments
• Netlify: Drag and drop the dist/ folder or use Git integration
• Cloudflare Pages: Connect your repository for continuous deployment
• GitHub Pages: Use GitHub Actions for automated deployments

Next Steps

Now that you have SaaSKit set up, here are some recommended next steps:

Customize Your Brand

• Update the logo and favicon
• Replace placeholder content with your own
• Customize colors to match your brand
• Add your social media links

Add Content

• Write your first blog post
• Update the features section
• Customize pricing plans
• Add testimonials

Enhance Functionality

• Integrate with your backend API
• Add analytics tracking
• Set up email marketing
• Configure form submissions

Optimize

• Run Lighthouse audits
• Optimize images
• Test on multiple devices
• Check accessibility

Troubleshooting

Common Issues

Port already in use:

# Use a different port
npm run dev -- --port 4322

Build errors:

• Clear .astro cache: rm -rf .astro
• Delete node_modules and reinstall: rm -rf node_modules && npm install

Styling issues:

• Ensure Tailwind is properly configured
• Check for conflicting CSS
• Verify dark mode classes are applied correctly

Resources

• Astro Documentation
• Tailwind CSS Docs
• Framer Motion Guide
• React Documentation

Conclusion

You’re now ready to build an amazing SaaS landing page with SaaSKit! Remember to:

• Start with the basics and gradually customize
• Test your changes frequently
• Keep your dependencies updated
• Follow best practices for performance and SEO

Happy building! If you have questions or need help, check out our documentation or reach out to our support team.