Installation Guide
Follow these steps to set up and start using the theme.
Prerequisites
Before you begin, ensure your system meets the following requirements.
Install Node.js
Stella requires Node.js (LTS version) to work. Node.js lets you run JavaScript code on your computer. Here’s how to install it based on your operating system:
Follow these steps to install Node.js on Windows:
- Download the latest LTS version of Node.js from the official website: Node.js Downloads
- Run the installer after it’s downloaded, and follow the on-screen instructions. The installer will guide you through the process.
- After installation, open the Command Prompt (search for “cmd” in the Start menu) and verify the installation by typing the following command and pressing Enter:
node -vIf Node.js was installed correctly, you’ll see the version number (e.g., v22.13.1). This confirms that Node.js is ready to use!
Here’s how to install Node.js on macOS:
- First, make sure you have Homebrew installed. Homebrew is a tool that makes installing software easy. If you don’t have it, follow this guide to install it.
- Open your Terminal (you can find it in Applications > Utilities) and run this command to install Node.js:
brew install node- After installation, verify Node.js by typing the following command:
node -vIf everything is set up, the terminal will display the installed version of Node.js.
To install Node.js on Linux, follow these steps:
- Open your Terminal and update your package list:
sudo apt update- Install Node.js using your package manager:
sudo apt install nodejs- Optionally, install npm (Node.js package manager) by running:
sudo apt install npm- Verify the installation by typing:
node -vThe installed version of Node.js will be displayed if everything worked correctly.
💡 Need help? Check out the official Node.js installation guide.
Setting Up Stella
Once Node.js is installed, follow these steps to set up Stella. You can use either npm or pnpm as your package manager.
Install Dependencies
Navigate to your project directory (the main theme folder) and run:
npm install bash pnpm install This will install all the necessary dependencies for Stella.
Start the Development Server
To start the local development server and view your site on your computer, run:
npm run dev bash pnpm dev 🔹 Your site will be available at http://localhost:4321 (or the customized port).
Create a Production Build
To generate an optimized production build of your site, run the following command in your project root:
npm run build bash pnpm build This will compile your project, optimize assets, and prepare everything for deployment. The output will be located in the dist/ folder by default.
Preview the Production Build
To see how your site will look in the final production version, run:
npm run preview bash pnpm preview This allows you to preview how the theme will look once it’s live on the internet.
Available Scripts
This guide covers all the npm/pnpm scripts available in Stella. These scripts help you develop, build, and manage your site efficiently.
Development Scripts
dev
Starts the development server with TOML configuration watching enabled.
npm run dev pnpm dev What it does:
- Watches for changes in TOML configuration files
- Starts the Astro development server
- Enables hot module replacement (HMR) for instant updates
🔹 Your site will be available at http://localhost:4321
toml:watch
Watches TOML configuration files for changes.
npm run toml:watch bash pnpm toml:watch What it does:
- Monitors TOML files for changes
- Automatically regenerates configuration when files are modified
Build Scripts
build
Creates an optimized production build of your site.
npm run build bash pnpm build What it does:
- Watches TOML configuration files
- Builds your site for production
- Removes draft pages from the sitemap
- Outputs the final build to the
dist/folder
preview
Builds and previews your production site locally.
npm run preview bash pnpm preview What it does:
- Runs the complete build process
- Starts a local preview server
- Allows you to test the production build before deployment
Quality Assurance Scripts
astro-check
Runs type checking and diagnostics on your Astro project.
npm run astro-check bash pnpm astro-check What it does:
- Checks for TypeScript errors
- Validates Astro components
- Reports potential issues in your code
format
Formats your source code using Prettier.
npm run format bash pnpm format What it does:
- Formats all files in the
./srcdirectory - Ensures consistent code style across your project
test
Runs the test suite in watch mode.
npm run test bash pnpm test What it does:
- Runs Jest tests with a custom TypeScript configuration
- Watches for file changes and re-runs tests automatically
Utility Scripts
generate-favicons
Generates favicon files from your source image.
npm run generate-favicons bash pnpm generate-favicons What it does:
- Creates favicons in multiple sizes
- Generates necessary icon formats for different platforms
generate-multilingual-content
Generates multilingual content structure for your site.
npm run generate-multilingual-content
bash pnpm generate-multilingual-content What it does:
- Creates content directories for multiple languages
- Sets up the structure for internationalization (i18n)
remove-multilingual
Removes multilingual content structure.
npm run remove-multilingual bash pnpm remove-multilingual What it does:
- Cleans up multilingual content directories
- Useful when reverting to a single-language setup
remove-draft-from-sitemap
Removes draft pages from the generated sitemap.
npm run remove-draft-from-sitemap bash pnpm remove-draft-from-sitemap What it does:
- Filters out pages marked as drafts from the sitemap
- Ensures only published content appears in search engines
🚀 You’re all set! Now you can start customizing Stella to fit your needs. 🎨