Astro landing-page

yarn create astro --template jungley8/astro-landing-page

šŸš€ Project Structure

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

/
ā”œā”€ā”€ public
│   └── favicon.svg
ā”œā”€ā”€ src
│   ā”œā”€ā”€ components
│   │   ā”œā”€ā”€ BlogPostCard.tsx
│   │   ā”œā”€ā”€ CTA.tsx
│   │   ā”œā”€ā”€ Card.astro
│   │   ā”œā”€ā”€ Data.tsx
│   │   ā”œā”€ā”€ Feature.tsx
│   │   ā”œā”€ā”€ Newsletter.tsx
│   │   ā”œā”€ā”€ Price.tsx
│   │   ā”œā”€ā”€ Signin.tsx
│   │   └── Stats.tsx
│   ā”œā”€ā”€ env.d.ts
│   ā”œā”€ā”€ layouts
│   │   ā”œā”€ā”€ Footer.tsx
│   │   ā”œā”€ā”€ Header.tsx
│   │   └── Layout.astro
│   └── pages
│       ā”œā”€ā”€ 404.astro
│       ā”œā”€ā”€ blog
│       │   ā”œā”€ā”€ [id].astro
│       │   └── index.astro
│       ā”œā”€ā”€ contact.astro
│       ā”œā”€ā”€ index.astro
│       ā”œā”€ā”€ price.astro
│       └── signin.astro
ā”œā”€ā”€ tailwind.config.cjs
└── 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.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

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

šŸ§ž Commands

All commands are run from the root of the project, from a terminal:

Command Action
yarn Installs dependencies
yarn dev Starts local dev server at localhost:3000
yarn build Build your production site to ./dist/
yarn preview Preview your build locally, before deploying
yarn astro ... Run CLI commands like astro add, astro check
yarn astro --help Get help using the Astro CLI
yarn prettier Formate and beautify your code

šŸ‘€ Want to learn more?

Feel free to check our documentation or jump into our Discord server.

Demo

astro-landing-page demo

Deploy

Host your own live version of Astro-landing-page with Vercel.

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes