How to Install Blacks — Astro Template Guide

Publih On: 2023-12-02

Complete installation guide for the Blacks Astro JS template. From download to live site — in minutes.

Full documentation: For a deeper guide with screenshots and step-by-step details, visit the Blacks documentation →

Install Node.js — download Node.js here
Download the source code and extract it into your project folder
Access your project folder from the terminal. For example, if your project is on the Desktop:
```
cd C:\Users\pcname\desktop\project
```
Replace pcname with your computer username, and project with your project folder name.
Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Open in browser: localhost:4321

Now you need to update and configure your website. Access the src/data folder and open:

config.json — website configuration (title, description, navigation, footer, social, contact)
home.json — homepage content (hero, features, gallery, services)

Change the values to match your project.

Full guide: How to work with data →

Next, move to the src/pages folder. Each page type lives in its own folder:

Create promotion widgets displayed on all post pages. Access src/content/services and create new markdown files.

Full guide: How to work with promotion widgets →

Before you deploy, add your domain to astro.config.mjs:

export default defineConfig({
  site: 'https://yourdomain.com',
  integrations: [preact()]
});

Deploy to any static host:

Push to Git — register on GitHub or GitLab
Create a new repository and name it with your project name
Push your project — open your project folder in the terminal and run the commands from your GitHub repo
Register on a static host — Vercel, Netlify, Cloudflare Pages, or others. Sign up with your Git account.
Create a new project — connect with your GitHub repo
Configure build settings:
- Framework: Astro
- Build command: npm run build
- Output directory: dist
Click deploy — your website is live.