- Astro Tailwind CSS static website to market a holiday home with excellent SEO & lighthouse score
- Note: to open web links in a new window use: ctrl+click on link
- Built with Astro framework, CSS and JavaScript with Bootstrap 5 CSS and Javascript
- Server-Side Rendering for very fast content rendering, minimal javascript and no need for a backend server
- TBA...Perfect performance, Perfect scores on accessibility, best practices and SEO.
- Image Optimization (using new Astro Assets and Unpic for Universal image CDN).
- Generation of project sitemap based on your routes.
- Analytics built-in Google Analytics, and Splitbee integration.
- CSS and Javascript are minimised to reduce initial render/First Contentful Paint time.
.
- Astro Framework v4
- Tailwind CSS v3 styling
- JPG to WebP Converter to create new image formats that result in a higher Lighthouse score
- PurifyCSS Online - remove unused CSS code from your stylesheets
- Online CSS Minifier Tool and Compressor
- Online JavaScript Minifier Tool and Compressor
- Boxy SVG: Online scalable graphics generator
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run format |
Format codes with Prettier |
npm run lint:eslint |
Run Eslint |
npm run astro ... |
Run CLI commands like astro add, astro preview |
- tba
<div class="carousel-item active">
<picture>
<source
type="image/webp"
class="d-block w-100"
srcset="./images/bg/house-front.webp"
alt="house front view"
/>
<source
type="image/jpeg"
class="d-block w-100"
srcset="/images/bg/house-front.jpg"
alt="house front view"
/>
<img
src="/images/bg/house-front.jpg"
class="d-block w-100"
alt="house front view"
/>
</picture>
<div class="carousel-caption col-md-6 col-10 col-offset-md-6">
<h1>Terracota</h1>
<p class="carousel-image-text">
Una vivienda moderna, muy bien equipada y muy confortable. En
este alojamiento se respira tranquilidad: ¡relájate con toda la
familia!
</p>
</div>
</div>/
├── public/
│ ├── _headers
│ └── robots.txt
├── src/
│ ├── assets/
│ │ ├── favicons/
│ │ ├── images/
│ │ └── styles/
│ │ └── tailwind.css
│ ├── components/
│ │ ├── blog/
│ │ ├── common/
│ │ ├── ui/
│ │ ├── widgets/
│ │ │ ├── Header.astro
│ │ │ └── ...
│ │ ├── CustomStyles.astro
│ │ ├── Favicons.astro
│ │ └── Logo.astro
│ ├── content/
│ │ ├── post/
│ │ │ ├── post-slug-1.md
│ │ │ ├── post-slug-2.mdx
│ │ │ └── ...
│ │ └-- config.ts
│ ├── layouts/
│ │ ├── Layout.astro
│ │ ├── MarkdownLayout.astro
│ │ └── PageLayout.astro
│ ├── pages/
│ │ ├── [...blog]/
│ │ │ ├── [category]/
│ │ │ ├── [tag]/
│ │ │ ├── [...page].astro
│ │ │ └── index.astro
│ │ ├── index.astro
│ │ ├── 404.astro
│ │ ├-- rss.xml.ts
│ │ └── ...
│ ├── utils/
│ ├── config.yaml
│ └── navigation.js
├── package.json
├── astro.config.mjs
└── ...
- Lighthouse score & pagespeed perfect
- Simple routing..Astro looks for
.astroor.mdfiles in thesrc/pages/directory. Each page is exposed as a route based on its file name.
- Status: In work
- To-Do: Add sections: header, footer, inicio, acerca, fotos, ubicacion, zona, contacto.
- Anna Monus: 9 tricks to eliminate render blocking resources
- Maddy Osman: The Ultimate List of Web-Safe HTML and CSS Fonts
- Rohith Sasanken: Types of SEO Keywords You MUST Know in 2023
- icolorpalette.com combination of terracotta and olive tree leaf green.
- This project is licensed under the MIT License - see the LICENSE file for details.