Scaleup-Astro Template is an Astro template designed for Business Consulting companies. This guide explains how to install, customize, and deploy your project.

1. Prepare Your Tools

Before getting started, ensure the following software is installed on your computer.

Node.js

Download the latest LTS version from:

https://nodejs.org

Node.js includes npm (Node Package Manager).

Verify your installation:

node -v
npm -v

Visual Studio Code

Download Visual Studio Code from:

https://code.visualstudio.com

2. Clone & Open the Project

After receiving the Scaleup-Astro template:

  1. Download the project.
  2. Extract the ZIP archive.
  3. Open the project folder in Visual Studio Code.
  4. Open a new terminal (Terminal → New Terminal).

Make sure the terminal is located at the project root.

3. Install & Run the Project

Install dependencies:

npm install

Run the development server:

npm run dev

Open your browser and visit:

http://localhost:4321

Build the production version:

npm run build

The optimized production files will be generated inside the dist/ directory.

4. Customization

Customize the template to match your brand by editing the components and styles.

Tailwind Utility Classes

Modify the .astro files inside src/ using Tailwind CSS utility classes such as:

  • bg-brand-600
  • text-xl
  • rounded-xl
  • p-8
  • grid
  • flex

Global Theme

Edit:

src/styles/style.css

Example:

@import "tailwindcss";

@theme {
  --color-brand-50: #eef3ff;
  --color-brand-100: #dbe6fe;
  --color-brand-200: #bed0fd;
  --color-brand-300: #93b0fb;
  --color-brand-400: #6086f7;
  --color-brand-500: #3d63f0;
  --color-brand-600: #2745e3;
  --color-brand-700: #2035c5;
  --color-brand-800: #1f2f9e;
  --color-brand-900: #1e2c7d;
  --color-brand-950: #151b4b;

  --font-display: var(--font-heading);
  --font-body: var(--font-body);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
}

.font-display {
  font-family: var(--font-display);
}

[x-cloak] {
  display: none !important;
}

5. Deployment

After running:

npm run build

Deploy the generated dist/ folder using one of the following platforms.

Platform Description
Vercel Seamless deployment for Astro applications.
Netlify Continuous deployment with CDN and edge functions.
Custom Server Upload the dist/ folder via FTP, SSH, or CI/CD.

6. Project Folder Structure

src/
├── components/
├── content/
│   ├── blog/
│   ├── case-studies/
│   ├── docs/
│   ├── industries/
│   ├── page/
│   ├── service/
│   ├── privacy/
│   └── terms/
├── layouts/
├── pages/
├── styles/
└── data/

7. Adding New Pages

Create static Astro pages inside:

src/pages/

Create content-driven pages inside:

src/content/page/

Supported formats:

  • .mdx

8. Best Practices

  • Keep components modular and reusable.
  • Store editable content inside src/content/.
  • Store business data inside src/data/.
  • Optimize images using Astro Image.
  • Enable SEO metadata on every page.
  • Reuse layouts whenever possible.

9. Next Steps

Continue building your website by adding your own content.

Content Location
Components src/components/
Blog Posts src/content/blog/
Industries src/content/industries/
Services src/content/service/
Case Studies src/content/case-studies/
Pages src/content/page/

You’re now ready to customize and deploy your Scaleup-Astro website.