Skip to content

ttntm/astro-landing-page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

cc5b255 Β· Jan 24, 2025

History

24 Commits
Feb 14, 2024
Sep 4, 2023
Jan 24, 2025
Mar 6, 2024
Jan 24, 2025
Aug 22, 2023
Mar 6, 2024
Sep 4, 2023
Aug 22, 2023
Mar 31, 2024
Mar 31, 2024
Dec 6, 2023
Mar 31, 2024
Feb 14, 2024
Aug 22, 2023
Dec 6, 2023

Repository files navigation

astro-landing-page

A simple landing page built with Astro and Tailwind CSS.

preview

Port of the 11ty & Hugo versions

How to use this template

Requirements:

  1. Astro (developed and tested with version 2.10.12)
  2. Tailwind CSS (Astro integration)

All other dependencies are either linked from a CDN or included in this repository.

Setup:

  1. Fork, clone or download
  2. cd into the root folder
  3. run npm install
  4. run npm run dev
  5. open a browser and go to http://localhost:4321

Setup Alternative:

npm create astro@latest -- --template ttntm/astro-landing-page

See: Starter Templates in the official docs.

Basic configuration:

  1. Astro -> ./astro.config.mjs
  2. Tailwind -> ./tailwind.config.cjs
  3. Netlify -> ./netlify.toml

CSS (in ./src/styles/) is processed by Astro directly; this project is using the Tailwind integration module.

Deployment:

Astro requires the final deployed URL in its config file.

Replace the placeholder with your site's URL and keep the trailing slash:

case 'production':
  build.siteURL = 'https://example.com/'
  break

Change Content:

Page content is stored in

  • ./src/pages/
    • imprint.md
    • privacy.md
  • ./src/content/sections/
  • ./src/data/features.json

Change Templates/Layout:

Page structure and templates are stored in ./src/layouts/ and can be edited there.

Best have a look at ./layouts/Base.astro first to understand how it all comes together - the page itself is constructed from partial templates stored in ./src/components/ and each section has a corresponding template file in the sections subfolder.

Sections are a so called collection that's defined in ./src/content/config.ts. They are processed in alphabetical order (as stored in ./src/content/sections/) by the Wrapper.astro component (./src/components/sections/). The wrapper passes them into the SectionResolver.astro component (./src/components/sections/); this intermediary resolver should help reduce redundancy in keeping the actual section components as "dumb" as possible.

Change images:

Images are stored in ./public/img/; everything in there can be considered a placeholder that should eventually be replaced with your actual production images.