Astroship Starter Template 🛸

Astroship is a starter template for startups, marketing websites & landing pages. Built with Astro, TailwindCSS & Alpine.js

[Image]

Installation

If you are reading this on github, you can click on the "Use this template" button above to create a new repository from astroship to your account. Then you can do a git clone to clone it to your local system.

Alternatively, you can clone the project directly from this repo to your local system.

1. Clone the repo

git clone https://github.com/surjithctly/astroship.git myProjectName
# or
git clone https://github.com/surjithctly/astroship.git .

The . will clone it to the current directory so make sure you are inside your project folder first.

2. Install Dependencies

npm install
# or
yarn install
# or (recommended)
pnpm install

3. Start development Server

npm run dev
# or
yarn dev
# or (recommended)
pnpm dev

Preview & Build

npm run preview
npm run build
# or
yarn preview
yarn build
# or (recommended)
pnpm preview
pnpm build

We recommend using pnpm so save disk space on your computer.

Other Commands

pnpm astro ...
pnpm astro add
pnpm astro --help

Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── ...
├── src/
│   ├── components/
│   │   └── ...
│   ├── layouts/
│   │   └── ...
│   └── pages/
│       └── ...
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

Any static assets, like images, can be placed in the public/ directory.

TailwindCSS & Alpine.js

TailwindCSS & Alpine.js are already configured in this repo, so you can start using them without any installation.

Credits

Hero Illustration by Streamline

👀 Want to learn more?

Feel free to check out Astro Documentation or jump into our Discord Chat.